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

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

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

Bem, se você não quiser fazê-lo usando o Ajax ou de qualquer outra forma e apenas desejar que uma postagem normal do ASP.NET ocorra, aqui está como você faz isso (sem usar outras bibliotecas):

É um pouco complicado embora ... :)

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 Tab- Tab) essa função ao 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' no seu arquivo de código com o 'eventArgument' como a 'argumentString' que você passou do JavaScript. Agora, você pode ligar para qualquer outro evento que desejar.

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

O __doPostBack()método funciona bem.

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

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

No JavaScript, recupere a referência ao botão usando seu ClientID e, em seguida, chame o método .click () .

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

button.click();

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

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

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Então você pode fazer coisas como:

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

Em seguida, 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 o .NET Ajax PageMethods. Veja aqui ou aqui .

Acho que a postagem no blog Como buscar e mostrar dados do banco de dados do SQL Server na página ASP.NET usando o Ajax (jQuery) irá ajudá-lo.

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 programação estática e fortemente tipada sempre me pareceu muito natural para mim, então, no começo, resisti a aprender JavaScript (sem mencionar HTML e CSS) quando tive que criar 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 ação no evento OnLoad, desde que eu pudesse codificar C # puro.

Você verá, no entanto, que, se estiver trabalhando com sites, deve ter uma mente aberta e começar a pensar mais na Web (ou seja, não tente fazer coisas do lado do cliente no servidor e vice-versa) . Adoro as formas Web do ASP.NET e ainda as uso (assim como o MVC ), mas direi que, ao tentar simplificar as coisas e ocultar a separação entre cliente e servidor, pode confundir os recém-chegados e, às vezes, dificultar 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 da Web muito mais agradável (para não mencionar mais fácil). Muitas pessoas mencionaram bibliotecas diferentes do Ajax, mas eu não vi nenhum exemplo real do Ajax, então aqui está. (Se você não está familiarizado com o Ajax, basta fazer uma solicitação HTTP assíncrona para atualizar o conteúdo (ou talvez executar uma ação do servidor no seu cenário) sem recarregar a página inteira ou fazer uma postagem completa.

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 aí. Embora o nome possa ser enganoso, o resultado também pode estar em texto sem formatação ou JSON, você não está limitado ao XML. O jQuery fornece uma interface ainda mais simples para fazer chamadas Ajax (entre outras tarefas de JavaScript).

A solicitação pode ser um HTTP-POST ou HTTP-GET e não precisa estar em uma página da Web, mas você pode postar em qualquer serviço que atenda a solicitações HTTP, como uma API RESTful . A API da Web do ASP.NET MVC 4 facilita a configuração do serviço da 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 do 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

Em seguida, basta registrar a rota HTTP no seu arquivo Global.asax, para que o ASP.NET saiba como direcionar a solicitação.

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

Com o AJAX e os Controladores, você pode enviar de volta ao servidor a qualquer momento de forma assíncrona para executar qualquer operação do lado do servidor. Esse golpe de dois oferece a flexibilidade do JavaScript e o poder do C # / ASP.NET, proporcionando às pessoas que visitam o site uma melhor experiência geral. Sem sacrificar nada, você obtém o melhor dos dois mundos.

Referências

• Ajax ,
• jQuery Ajax ,
• Controller em Webforms

A biblioteca Microsoft AJAX fará isso. Você também pode criar sua própria solução que envolve o uso do AJAX para chamar seus próprios arquivos de script aspx (como 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 o usaria apenas se realmente necessário. É preciso muito JavaScript para executar algumas funcionalidades realmente complicadas que você obtém da Microsoft, basta colocá-las em um painel de atualização.

É tão fácil para os dois cenários (ou seja, síncrono / assíncrono) se você deseja acionar um manipulador de eventos do lado do servidor, por exemplo, o evento de clique de Button.

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

1. Adicione o seguinte na seção de script do cliente da 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();
       }
   }
   //]]>

   2. Escreva seu manipulador de eventos do lado do servidor para seu controle

      void protegido btnSayHello_Click (remetente do objeto, EventArgs e) {Label1.Text = "Olá, mundo ..."; }

   3. Adicione uma função de cliente para chamar o manipulador de eventos do lado do servidor

      função SayHello () {__doPostBack ("btnSayHello", ""); }

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

Ao fazer isso, se 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 é: Tenha cuidado com a identificação 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á sendo postada de volta, mas meu código não está sendo executado. Quando depuro a página, o RaisePostBackEvent nunca é acionado. Uma coisa que fiz de maneira diferente é fazer isso em um controle de usuário em vez de em uma página aspx.

Se alguém mais for como Merk, e com problemas para resolver isso, eu 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. Ver abaixo:

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

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

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

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

Você pode criar um serviço da web para seus métodos comuns.
Basta adicionar um WebMethodAttribute sobre as funções que você deseja chamar, e é isso.
Ter um serviço da Web com todas as suas coisas comuns também facilita a manutenção do sistema.

Se a função __doPostBack não for gerada na página, você precisará inserir um controle para forçá-lo assim:

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

A respeito de:

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

button.click();

Deve ser como:

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

Onde formID é a identificação de controle do ASP.NET no arquivo .aspx.

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

ClientScript.GetPostBackEventReference(this, "");

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

Tente o seguinte:

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 no seu código JavaScript:

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

Eu acho que este é muito fácil!

Por favor tente isto:

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

ddlVoucherType é um controle que a alteração de índice selecionada chamará ... E você pode colocar qualquer função na alteração de índice selecionada desse controle.

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

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

Eu tento isso e, portanto, eu poderia executar um método Asp.Net enquanto usava o jQuery.

1. Redirecione uma página no seu código jQuery

   window.location = "Page.aspx?key=1";

2. 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 é necessário executar um código extra

Esta resposta funciona como uma brisa para mim, graças ao navegador:

O método __doPostBack () funciona bem.

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

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

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

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

button.Click(); 

Bloco de citação