none
Ajuda com JQuery/GridView RRS feed

  • Pergunta

  • Olá a todos.

    Estou com um probleminha que não estou sabendo resolver. O designer da empresa me passou um layout de uma página que ao clicar num href abre uma modal com o fundo cinza atrás da modal cobrindo o site por trás da modal. Funciona normalmente.

    O problema é que preciso que esse href fique dentro da GridView e tenha um CommandArgument, logo, exibo a modal (<div>) simplesmente exibindo/ocultando um Panel, porém desta forma não aparece o fundo cinza por trás da modal.

    Ou seja, se uso o JQuery não consigo passar o argumento da linha do GridView, se uso o Panel não consigo exibir o fundo cinza.

    Alguém já passou por isso e tem alguma dica?

    Segue código do designer:

    ...
                            <td class="text-center">
                            	<a href="#modalConfirma" class="modal-with-zoom-anim"><i class="fa fa-pencil"></i></a>&nbsp;
                            </td>   
    ...
    
    
      <div id="modalConfirma" class="zoom-anim-dialog modal-block modal-block-sm mfp-hide"> <!-- mfp-show para exibir.. -->
        <section class="panel">
          <header class="panel-heading">
            <h2 class="panel-title">Alterar Valor</h2>
          </header>
          <div class="panel-body">
            <form id="demo-form" class="form-horizontal">
              <div class="col-xs-12 col-lg-12 ml-none pl-none pr-none mr-none mb-md">
                <div class="col-lg-6 col-md-12 col-xs-12  ml-none pr-none pl-xs"> Nome:<br>
                  <input type="text" class="form-control" placeholder="Cobrador 17" readonly>
                </div>
                <div class="col-lg-6 col-md-12 col-xs-12 ml-none pr-none pl-xs text-right"> Valor:<br>
                  <input type="text" class="form-control text-right">
                </div>
              </div>
            </form>
          </div>
          <footer class="panel-footer">
            <div class="row">
              <div class="col-md-12 text-right">
                <button class="btn btn-primary modal-confirm">Salvar</button>
              </div>
            </div>
          </footer>
        </section>
      </div>

    Segue como abro:

    ...
                                                        <td class="text-center" width="5%">
                                                            <asp:LinkButton ID='lnkBaixarPagamento' CommandName='BaixarPagamento' CommandArgument='<%# Eval("idLoja") %>' runat='server'>
                                                                    <i class="fa fa-pencil actionsFont" data-toggle="tooltip" data-placement="top" title="" data-original-title="Editar"></i>
                                                            </asp:LinkButton>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
    ...
    
    
            protected void gvCartela_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "BaixarPagamento")
                {
                    txtNome.Text = oUsuarioBO.Nome;
                    hidIdLoja.Value = e.CommandArgument.ToString();
                    pnBaixa.Visible = true;
               }
            }


    quinta-feira, 8 de março de 2018 15:23

Respostas

  • Olá, desculpa em demorar para responder mas segue o código do teste que eu fiz usando o seu primeiro código.

    Copie e cole e você vai ver que irá funcionar, depois basta você fazer um DE/PARA e ajustar ao seu sistema.

    Abs!

    <%@ Page EnableEventValidation="false" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ForumMSDN_Web.Default" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <table  style="margin-top:5em;margin-left:5em">
                <tr>
                    <td class="text-center">
                        <a href="#mTESTE" data-toggle="modal" data-target="#mTESTE" class="modal-with-zoom-anim"><i class="fa fa-pencil"></i></a>&nbsp;
                    </td>
                </tr>
            </table>
    
            <div runat="server" id="mTESTE" class="modal fade">
                <section class="panel">
                    <header class="panel-heading">
                        <h2 class="panel-title">Alterar Valor</h2>
                    </header>
                    <div class="panel-body">
                        <div id="demo-form" class="form-horizontal">
                            <div class="col-xs-12 col-lg-12 ml-none pl-none pr-none mr-none mb-md">
                                <div class="col-lg-6 col-md-12 col-xs-12  ml-none pr-none pl-xs">
                                    Nome:<br />
                                    <asp:TextBox runat="server" ID="txtNome" CssClass="form-control" placeholder="Cobrador 17" />
                                </div>
                                <div class="col-lg-6 col-md-12 col-xs-12 ml-none pr-none pl-xs text-right">
                                    Valor:<br />
                                    <asp:TextBox runat="server" ID="txtValor" CssClass="form-control text-right" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer class="panel-footer">
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <button class="btn btn-primary modal-confirm">Salvar</button>
                            </div>
                        </div>
                    </footer>
                </section>
            </div>
    
            <div style="margin-top:5em;margin-left:5em">
                <asp:GridView runat="server" ID="GridTeste" OnRowCommand="GridTeste_RowCommand">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblID" Text='<%# Eval("ID") %>' />
                            </ItemTemplate>
                            <ItemTemplate>
                                <asp:Button runat="server" ID="btnTeste" CommandName="TESTE" Text="TESTE" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    

    using System;
    using System.Collections.Generic;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace ForumMSDN_Web
    {
        public partial class Default : Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGrid();
                }
            }
    
            private void BindGrid()
            {
                List<int> lstGrid = new List<int>();
                lstGrid.Add(1);
                lstGrid.Add(2);
                lstGrid.Add(3);
    
                GridTeste.DataSource = lstGrid;
                GridTeste.DataBind();
            }
    
            protected void GridTeste_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "TESTE")
                {
                    ClientScript.RegisterStartupScript(GetType(), "JS", "<script>$('#mTESTE').modal('show'); </script>", false);
                }
    
            }
        }
    }


    Leandro de Agostini MCTS - Web Application, Framework 4

    terça-feira, 13 de março de 2018 15:13

Todas as Respostas

  • Olá,

    adicione na sua página aspx este controle

    <asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true" />

    e no codebehind adicione este código dentro do e.CommandName == "BaixarPagamento"

    ClientScript.RegisterStartupScript(GetType(), "JS", "<script>$('#modalConfirma).modal('show'); </script>", false);

    Abs!


    Leandro de Agostini MCTS - Web Application, Framework 4

    quinta-feira, 8 de março de 2018 21:16
  • Não funcionou...

    Tentei também: 

    ClientScript.RegisterStartupScript(GetType(), "JS", "<script>$('#modalConfirma).addClass('mfp-show'); </script>", false);

    mas também não resolveu, não abriu o modal.

    Essa linha abaixo executa um outro comando JS, é esse comando que preciso saber chamar.

    <a href="#modalConfirma" class="modal-with-zoom-anim"><i class="fa fa-pencil"></i></a>

    	$('.modal-with-zoom-anim').magnificPopup({
    		type: 'inline',
    
    		fixedContentPos: false,
    		fixedBgPos: true,
    
    		overflowY: 'auto',
    		
    		closeBtnInside: true,
    		preloader: false,
    		closeOnBgClick: true,	
    		
    		midClick: true,
    		removalDelay: 300,
    		mainClass: 'my-mfp-zoom-in',
    
    	});


    • Editado wcsantos sexta-feira, 9 de março de 2018 14:23
    sexta-feira, 9 de março de 2018 13:53
  • Olá, adicione neste trecho

     protected void gvCartela_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "BaixarPagamento")
                {
                    ClientScript.RegisterStartupScript(GetType(), "JS", "<script>$('#modalConfirma).modal('show');    </script>", false);
               }
            }
    Abs!


    Leandro de Agostini MCTS - Web Application, Framework 4

    sexta-feira, 9 de março de 2018 14:16
  • Não funcionou...

    Tentei também: 

    ClientScript.RegisterStartupScript(GetType(), "JS", "<script>$('#modalConfirma).addClass('mfp-show'); </script>", false);

    mas também não resolveu, não abriu o modal.

    Essa linha abaixo executa um outro comando JS, é esse comando que preciso saber chamar.

    <a href="#modalConfirma" class="modal-with-zoom-anim"><i class="fa fa-pencil"></i></a>

    	$('.modal-with-zoom-anim').magnificPopup({
    		type: 'inline',
    
    		fixedContentPos: false,
    		fixedBgPos: true,
    
    		overflowY: 'auto',
    		
    		closeBtnInside: true,
    		preloader: false,
    		closeOnBgClick: true,	
    		
    		midClick: true,
    		removalDelay: 300,
    		mainClass: 'my-mfp-zoom-in',
    
    	});
    segunda-feira, 12 de março de 2018 12:54
  • OLá, adicione a propriedade runat="server" na div para que o c# possa localizá-la e executar o comando de ClientScript.

    <div runat="server" id="modalConfirma" class="zoom-anim-dialog modal-block modal-block-sm mfp-hide">

    Caso não funcione continue postando para que eu posso lhe ajudar.

    Abs!


    Leandro de Agostini MCTS - Web Application, Framework 4

    segunda-feira, 12 de março de 2018 13:20
  • Tipo... mudei tudo. Da forma anterior não estava conseguindo. Agora são 3 partes.

    Html

            <div class="window" id="janela1">
                <a href="#" class="fechar">X Fechar</a>
                <section class="panel">
                    <header class="panel-heading">
                        <h2 class="panel-title">Alterar Prêmios</h2>
                    </header>
                    <div class="panel-body">
                        <div id="demo-form" class="form-horizontal">
                            <div class="col-xs-12 col-lg-12 ml-none pl-none pr-none mr-none mb-md">
                                <div class="col-lg-6 col-md-12 col-xs-12  ml-none pr-none pl-xs">
                                    Nome:<br>
                                    <asp:TextBox ID="txtNome" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
                                    <asp:HiddenField ID="hidIdPonto" runat="server" />
                                </div>
                                <div class="col-lg-6 col-md-12 col-xs-12 ml-none pr-none pl-xs text-right">
                                    Valor:<br>
                                    <asp:TextBox ID="txtValor" CssClass="form-control text-right" runat="server"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer class="panel-footer">
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <asp:LinkButton ID="lnkBaixa" CssClass="btn btn-primary modal-confirm" OnClick="lnkBaixa_Click" runat="server">Salvar</asp:LinkButton>
                            </div>
                        </div>
                    </footer>
                </section>
            </div>
    
    
            <!-- mascara para cobrir o site -->
            <div id="mascara"></div>


    Script

        <script type="text/javascript">
            function abreModal() {
                //ev.preventDefault();
    
                //var id = $(this).attr("href");
                var id = "#janela1";
    
                var alturaTela = $(document).height();
                var larguraTela = $(window).width();
    
                //colocando o fundo preto
                $('#mascara').css({ 'width': larguraTela, 'height': alturaTela });
                $('#mascara').fadeIn(1000);
                $('#mascara').fadeTo("slow", 0.8);
    
                var left = ($(window).width() / 2) - ($(id).width() / 2);
                var top = ($(window).height() / 2) - ($(id).height() / 2);
    
                $(id).css({ 'top': top, 'left': left });
                $(id).show();
            };
    
        </script>

    No codebehind

    protected void gvCartela_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "BaixarPagamento")
                {
                    ClientScript.RegisterStartupScript(GetType(), "JS", "abreModal();", false);
               }
            }


    No inspector no Chrome, quando digito abreModal(); no console ele abre e funciona. Aqui no codebehind ainda não funciona. Não sei, mas talvez seja porque a página esteja fazendo reload, não?

    segunda-feira, 12 de março de 2018 17:33
  • Olá, desculpa em demorar para responder mas segue o código do teste que eu fiz usando o seu primeiro código.

    Copie e cole e você vai ver que irá funcionar, depois basta você fazer um DE/PARA e ajustar ao seu sistema.

    Abs!

    <%@ Page EnableEventValidation="false" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ForumMSDN_Web.Default" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <table  style="margin-top:5em;margin-left:5em">
                <tr>
                    <td class="text-center">
                        <a href="#mTESTE" data-toggle="modal" data-target="#mTESTE" class="modal-with-zoom-anim"><i class="fa fa-pencil"></i></a>&nbsp;
                    </td>
                </tr>
            </table>
    
            <div runat="server" id="mTESTE" class="modal fade">
                <section class="panel">
                    <header class="panel-heading">
                        <h2 class="panel-title">Alterar Valor</h2>
                    </header>
                    <div class="panel-body">
                        <div id="demo-form" class="form-horizontal">
                            <div class="col-xs-12 col-lg-12 ml-none pl-none pr-none mr-none mb-md">
                                <div class="col-lg-6 col-md-12 col-xs-12  ml-none pr-none pl-xs">
                                    Nome:<br />
                                    <asp:TextBox runat="server" ID="txtNome" CssClass="form-control" placeholder="Cobrador 17" />
                                </div>
                                <div class="col-lg-6 col-md-12 col-xs-12 ml-none pr-none pl-xs text-right">
                                    Valor:<br />
                                    <asp:TextBox runat="server" ID="txtValor" CssClass="form-control text-right" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer class="panel-footer">
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <button class="btn btn-primary modal-confirm">Salvar</button>
                            </div>
                        </div>
                    </footer>
                </section>
            </div>
    
            <div style="margin-top:5em;margin-left:5em">
                <asp:GridView runat="server" ID="GridTeste" OnRowCommand="GridTeste_RowCommand">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblID" Text='<%# Eval("ID") %>' />
                            </ItemTemplate>
                            <ItemTemplate>
                                <asp:Button runat="server" ID="btnTeste" CommandName="TESTE" Text="TESTE" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    

    using System;
    using System.Collections.Generic;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace ForumMSDN_Web
    {
        public partial class Default : Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGrid();
                }
            }
    
            private void BindGrid()
            {
                List<int> lstGrid = new List<int>();
                lstGrid.Add(1);
                lstGrid.Add(2);
                lstGrid.Add(3);
    
                GridTeste.DataSource = lstGrid;
                GridTeste.DataBind();
            }
    
            protected void GridTeste_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "TESTE")
                {
                    ClientScript.RegisterStartupScript(GetType(), "JS", "<script>$('#mTESTE').modal('show'); </script>", false);
                }
    
            }
        }
    }


    Leandro de Agostini MCTS - Web Application, Framework 4

    terça-feira, 13 de março de 2018 15:13