1

Eu tenho esse código em Aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebSite.View.Index" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <title>Projeto para Testes</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="dvEventos" class="dvEventos">
            <h1>Apenas um teste</h1>
            <asp:Button ID="btnEventoCsharp" CssClass="btnEventoCsharp" Text="Evento C#" OnClick="btnEventoCsharp_Click" runat="server" />
            <asp:Button ID="btnEventoCsharpByJS" CssClass="btnEventoCsharpByJS" Text="Evento C# by JS" OnClick="btnEventoCsharpByJS_Click" runat="server"  />
            <button id="btnEventoJqueryClick" class="btnEventoJqueryClick">Evento C# by Jquery</button>
            <button id="btnEventoJquery" class="btnEventoJquery">Evento Jquery</button>
        </div>
    </form>
</body>
<script>
    $(document).ready(function () {
        CarregaEventosIndex();
    });

    function CarregaEventosIndex() {
        $('.btnEventoJquery').off('click').on('click', function () {
            alert('Event click by Jquery');
        });

        $('.btnEventoJqueryClick').off('click').on('click', function () {
            $("input[id*=btnEventoCsharpByJS]").click();
        });
    }
</script>
</html>

O arquivo do meu CodeBehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebSite.View
{
    public partial class Index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void MetodoSemParametroChamadoEventosDiferentes()
        {
            string passeiAqui = "sem parametro";
            string evento = passeiAqui;
        }

        /// Evento de Teste
        protected void btnEventoCsharpByJS_Click(object sender, EventArgs e)
        {
            MetodoSemParametroChamadoEventosDiferentes();
        }
    }
}

Estou utilizando Webforms, e eu preciso chamar um evento do CodeBehind pelo jQuery, no caso, usando esse botão btnEventoJqueryClick. Mas tem um porem, se eu usar esse código $("input[id*=btnEventoCsharpByJS]").click(); pelo console do navegador, usando breakpoint no CodeBehind percebo que o evento é chamado, mas clicando no botão não está sendo chamado o evento. O que estou fazendo de errado? Ou, como posso chamar um evento do CodeBehind pelo jQuery de forma diferente?

4
  • Olhando no console do navegador, aparece alguma requisição de "rede"? Criei um exemplo aqui, exatamente como você colocou aí e esta funcionando. 24/12/2019 às 12:50
  • Para executar qualquer coisa que esteja do lado do servidor pelo browser, você vai precisar fazer uma requisição para o mesmo, um GET ou POST por exemplo. 24/12/2019 às 13:19
  • Te ajudou a solução?
    – novic
    18/01/2020 às 15:45
  • Consegui usando outra solução 23/01/2020 às 22:06

1 Resposta 1

1

Para solucionar essa questão coloque um <input type="hidden" /> igual exemplo abaixo:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

dentro da tag <form></form>, esses dois input vão servir para que o servidor saiba o que é para fazer, e se tiver algum argumento para passar que também tenha isso para execução de qualquer método no codebehind, toda a requisição nesse caso é com o verbo POSTque é o padrão.

A pagina .aspx tem o seguinte resultado:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs"
    Inherits="WebApplication1.Test"%>

<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="Scripts/jquery-3.4.1.js"></script>
</head>
<body>
  <form id="form1" runat="server">
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />     
    <button id="btnDateTime">Evento Data e Hora</button>    
    <div>      
      <asp:Literal ID="TxtDataNow" runat="server"></asp:Literal>
    </div>
  </form>
  <script>
    function __doPostBack(eventTarget, eventArgument) {
      const theForm = document.getElementById("form1");
      if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
      }
    }
    $(document).ready(function () {
      $("#btnDateTime").click(function () {
        __doPostBack('btnDateTime', '');
      });
    });
  </script>
</body>
</html>

Foi criado um código em javascript com o nome de __doPostBack que tem a intenção real de enviar as informações para o seu back-end sendo as informações de ação e argumentos se assim for necessário.


No código dessa página teria alguma modificações onde precisa saber qual botão foi clicado e o que é para ser feito, no caso __EVENTTARGET é o nome do botão que foi clicado e nesse caso aciona o método ActionBtn() alterando o valor do <Literal>:

public partial class Test : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
     if (Page.IsPostBack)
     {
        var __EVENTTARGET = Request.Form["__EVENTTARGET"];
        if (__EVENTTARGET == "btnDateTime")
        {
           ActionBtn();
        }
     }
  }
  protected void ActionBtn()
  {
     TxtDataNow.Text = DateTime.Now.ToString(@"dd/MM/yyyy HH\:mm\:ss");
  }
}

Não sei até que ponto isso precise ser feito assim, quando eu usava esse estilo nunca fiz nada parecido, no máximo quando era um WebService com um método static para trazer informações para o Front, tem que verificar se isso realmente é necessário, talvez, em certos casos raros sim, mas, na maioria um simples componente com o seu evento normal de PostBack já resolve o problema.

Nesse exemplo é usado um button normal, porque, a maioria dos exemplos são vinculados a componentes pertence a toolbox para que o evento dele seja refeito de outra forma, nesse não ele faz realmente o evento. Se tiver algum problema com o EventValidation inclua no inicio da página na primeira linha um configuração: <%@ Page EnableEventValidation="false" ....

Referencias:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .