Ajuda com JQuery/GridView

Question

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;
           }
        }

Answer 1

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

Answer 2

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',

	});

Answer 3

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

Answer 4

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',

	});

Answer 5

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

Answer 6

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?

Answer 7

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