Chamar a função ASP.NET de JavaScript?

https://stackoverflow.com/questions/3713

08-06-2019
|

Pergunta

Estou escrevendo uma página web em ASP.NET.Eu tenho algum código JavaScript e um botão de envio com um evento de clique.

É possível chamar um método que criei em ASP com o evento click do JavaScript?

Solução

Bem, se você não quiser fazer isso usando Ajax ou qualquer outra forma e apenas quiser que um postback normal do ASP.NET aconteça, aqui está como você faz isso (sem usar nenhuma outra biblioteca):

Mas é um pouco complicado...:)

eu.No seu arquivo de código (supondo que você esteja usando C# e .NET 2.0 ou posterior), adicione a seguinte interface à sua classe Page para fazer com que pareça

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

ii.Isso deve adicionar (usando Aba-Aba) esta função em seu arquivo de código:

public void RaisePostBackEvent(string eventArgument) { }

iii.No seu evento onclick em JavaScript, escreva o seguinte código:

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

Isso chamará o método 'RaisePostBackEvent' em seu arquivo de código com 'eventArgument' como 'argumentString' que você passou do JavaScript.Agora você pode convocar qualquer outro evento que desejar.

P.S:Isso é 'sublinhado-sublinhado-doPostBack' ...E não deve haver espaço nessa sequência...De alguma forma, o WMD não me permite escrever sublinhados seguidos de um caractere!

Outras dicas

O __doPostBack() método funciona bem.

Outra solução (muito hackeada) é simplesmente adicionar um botão ASP invisível em sua marcação e clicar nele com um método JavaScript.

<div style="display: none;">
   <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>

No seu JavaScript, recupere a referência ao botão usando seu ID do Cliente e depois ligue para o .clique() método nele.

var button = document.getElementById(/* button client id */);

button.click();

O Biblioteca Microsoft AJAX conseguirá isso.Você também pode criar sua própria solução que envolve o uso de AJAX para chamar seus próprios arquivos de script aspx (basicamente) para executar funções .NET.

Sugiro a biblioteca Microsoft AJAX.Depois de instalado e referenciado, basta adicionar uma linha no carregamento da página ou no init:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Então você pode fazer coisas como:

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function

Então, você pode chamá-lo em sua página como:

PageClassName.Get5(javascriptCallbackFunction);

O último parâmetro da sua chamada de função deve ser a função de retorno de chamada javascript que será executada quando a solicitação AJAX for retornada.

Você pode fazer isso de forma assíncrona usando .NET Ajax PageMethods.Ver aqui ou aqui.

A programação estática e fortemente tipada sempre pareceu muito natural para mim, então, no início, resisti em aprender JavaScript (sem mencionar HTML e CSS) quando tive que construir front-ends baseados na Web para meus aplicativos.Eu faria qualquer coisa para contornar isso, como redirecionar para uma página apenas para executar e agir no evento OnLoad, desde que pudesse codificar C# puro.

Você descobrirá, entretanto, que se for trabalhar com sites, você deve ter uma mente aberta e começar a pensar mais orientado para a web (ou seja, não tente fazer coisas do lado do cliente no servidor e vice-versa) .Eu adoro webforms ASP.NET e ainda os uso (assim como MVC), mas direi que tentar simplificar as coisas e ocultar a separação entre cliente e servidor pode confundir os recém-chegados e às vezes acabar dificultando as coisas.

Meu conselho é aprender um pouco de JavaScript básico (como registrar eventos, recuperar objetos DOM, manipular CSS, etc.) e você achará a programação web muito mais agradável (para não mencionar mais fácil).Muitas pessoas mencionaram diferentes bibliotecas Ajax, mas eu não vi nenhum exemplo real de Ajax, então aqui vai.(Se você não está familiarizado com o Ajax, tudo o que acontece é fazer uma solicitação HTTP assíncrona para atualizar o conteúdo (ou talvez executar uma ação do lado do servidor em seu cenário) sem recarregar a página inteira ou fazer um postback completo.

Lado do cliente:

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request

xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
    if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
          document.getElementById("resultText").innerHTML = xmlhttp.responseText;
    }
};
</script>

É isso.Embora o nome possa ser enganoso, o resultado também pode ser em texto simples ou JSON, você não está limitado ao XML. jQuery fornece uma interface ainda mais simples para fazer chamadas Ajax (entre simplificar outras tarefas JavaScript).

A solicitação pode ser HTTP-POST ou HTTP-GET e não precisa ser para uma página da Web, mas você pode postar em qualquer serviço que escute solicitações HTTP, como um Repousante API.A API Web ASP.NET MVC 4 também facilita a configuração do serviço Web do lado do servidor para lidar com a solicitação.Mas muitas pessoas não sabem que você também pode adicionar controladores de API ao projeto de formulários da web e usá-los para lidar com chamadas Ajax como esta.

Lado do servidor:

public class DataController : ApiController
{
    public HttpResponseMessage<string[]> Get()
    {
        HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
            Repository.Get(true),
            new MediaTypeHeaderValue("application/json")
        );

        return response;
    }
}

Global.asax

Depois é só cadastrar a rota HTTP no seu arquivo Global.asax, assim o ASP.NET saberá como direcionar a requisição.

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

Com AJAX e controladores, você pode postar de volta no servidor a qualquer momento de forma assíncrona para realizar qualquer operação no servidor.Essa combinação fornece a flexibilidade do JavaScript e o poder do C#/ASP.NET, proporcionando às pessoas que visitam seu site uma experiência geral melhor.Sem sacrificar nada, você obtém o melhor dos dois mundos.

Referências

Eu acho que postagem no blog Como buscar e mostrar dados do banco de dados SQL Server na página ASP.NET usando Ajax (jQuery) Ajudará você.

Código JavaScript

<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">

    function GetCompanies() {
        $("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCompanies",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }

    function OnSuccess(data) {
        var TableContent = "<table border='0'>" +
                                "<tr>" +
                                    "<td>Rank</td>" +
                                    "<td>Company Name</td>" +
                                    "<td>Revenue</td>" +
                                    "<td>Industry</td>" +
                                "</tr>";
        for (var i = 0; i < data.d.length; i++) {
            TableContent += "<tr>" +
                                    "<td>"+ data.d[i].Rank +"</td>" +
                                    "<td>"+data.d[i].CompanyName+"</td>" +
                                    "<td>"+data.d[i].Revenue+"</td>" +
                                    "<td>"+data.d[i].Industry+"</td>" +
                                "</tr>";
        }
        TableContent += "</table>";

        $("#UpdatePanel").html(TableContent);
    }

    function OnError(data) {

    }
</script>

Função do lado do servidor ASP.NET

[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
    System.Threading.Thread.Sleep(5000);
    List<TopCompany> allCompany = new List<TopCompany>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCompany = dc.TopCompanies.ToList();
    }
    return allCompany;
}

A biblioteca Microsoft AJAX fará isso.Você também pode criar sua própria solução que envolve o uso de AJAX para chamar seus próprios arquivos de script aspx (basicamente) para executar funções .NET.

Esta é a biblioteca chamada AjaxPro que foi escrita por um MVP chamado Michael Schwarz.Esta biblioteca não foi escrita pela Microsoft.

Eu usei o AjaxPro extensivamente e é uma biblioteca muito boa, que eu recomendaria para retornos de chamada simples para o servidor.Funciona bem com a versão Microsoft do Ajax sem problemas.No entanto, eu observaria que, com a facilidade com que a Microsoft tornou o Ajax, eu só o usaria se fosse realmente necessário.É preciso muito JavaScript para executar algumas funcionalidades realmente complicadas que você obtém da Microsoft, simplesmente colocando-as em um painel de atualização.

É muito fácil para ambos os cenários (ou seja, síncrono/assíncrono) se você quiser acionar um manipulador de eventos do lado do servidor, por exemplo, o evento click de Button.

Para acionar um manipulador de eventos de um controle:Se você já adicionou um ScriptManager à sua página, pule a etapa 1.

Adicione o seguinte na seção de script do cliente da sua página
```
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
```
1. Escreva seu manipulador de eventos do lado do servidor para seu controle
  
  Void protegido btnsayhello_click (remetente de objeto, EventArgs e) {label1.text = "Hello World ...";}
2. Adicione uma função de cliente para chamar o manipulador de eventos do lado do servidor
  
  function SayHello () {__DOPOSTBACK ("BTNSAYHELLO", "");}

Substitua "btnSayHello" no código acima pelo ID do cliente do seu controle.

Ao fazer isso, se o seu controle estiver dentro de um painel de atualização, a página não será atualizada.Isso é tão fácil.

Outra coisa a dizer é que:Tenha cuidado com o ID do cliente, pois depende da política de geração de ID definida com a propriedade ClientIDMode.

Estou tentando implementar isso, mas não está funcionando direito.A página está postando de volta, mas meu código não está sendo executado.Quando depuro a página, o Raisepostbackevent nunca é demitido.Uma coisa que fiz de maneira diferente é que estou fazendo isso em um controle do usuário em vez de uma página ASPX.

Se alguém for como Merk e tiver problemas para resolver isso, tenho uma solução:

Quando você tem um controle de usuário, parece que você também deve criar o PostBackEventHandler na página pai.E então você pode invocar o PostBackEventHandler do controle de usuário chamando-o diretamente.Veja abaixo:

public void RaisePostBackEvent(string _arg)
{
    UserControlID.RaisePostBackEvent(_arg);
}

Onde UserControlID é o ID que você concedeu ao controle do usuário na página pai quando o aninhou na marcação.

Observação:Você também pode simplesmente chamar métodos pertencentes diretamente a esse controle de usuário (nesse caso, você só precisaria do manipulador RaisePostBackEvent na página pai):

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

Você pode querer criar um serviço web para seus métodos comuns.
Basta adicionar um WebMethodAttribute sobre as funções que você deseja chamar e pronto.
Ter um serviço web com todas as suas coisas comuns também torna o sistema mais fácil de manter.

Caso a função __doPostBack não seja gerada na página você precisa inserir um controle para forçá-la assim:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

A respeito de:

var button = document.getElementById(/* Button client id */);

button.click();

Deveria ser assim:

var button = document.getElementById('<%=formID.ClientID%>');

Onde formID é o ID de controle do ASP.NET no arquivo .aspx.

Adicione esta linha ao carregamento da página se estiver recebendo o erro esperado do objeto.

ClientScript.GetPostBackEventReference(this, "");

Você pode usar PageMethods.Your C# method Name para acessar métodos C# ou métodos VB.NET em JavaScript.

Experimente isto:

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

Ou isto

Response.Write("<script>alert('Hello World');</script>");

Use a propriedade OnClientClick do botão para chamar funções JavaScript...

Você também pode obtê-lo adicionando esta linha ao seu código JavaScript:

document.getElementById('<%=btnName.ClientID%>').click()

Acho que esse é muito fácil!

Por favor, tente isto:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

ddlVoucherType é um controle que a alteração do índice selecionado chamará...E você pode colocar qualquer função na alteração do índice selecionado deste controle.

A maneira mais simples e melhor de conseguir isso é usar o onmouseup() Evento JavaScript em vez de onclick()

Dessa forma você irá disparar o JavaScript depois de clicar e não irá interferir no ASP OnClick() evento.

Eu tento isso para poder executar um método Asp.Net enquanto uso jQuery.

Faça um redirecionamento de página no seu código jQuery
```
window.location = "Page.aspx?key=1";
```

Em seguida, use uma string de consulta no carregamento da página

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.QueryString["key"] != null)
    {
        string key= Request.QueryString["key"];
        if (key=="1")
        {
            // Some code
        }
    }
}

Portanto, não há necessidade de executar um código extra

Esta resposta funciona muito bem para mim, graças a vários navegadores:

O método __doPostBack() funciona bem.

Outra solução (muito hackeada) é simplesmente adicionar um botão ASP invisível em sua marcação e clicar nele com um método JavaScript.

<div style="display: none;"> 
    <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" /> 
</div>

No seu JavaScript, recupere a referência ao botão usando seu ClientID e chame o método .Click() nele:

var button = document.getElementByID(/* button client id */); 

button.Click();

Bloco de citação

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow