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

votos
124

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

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

Publicado 06/08/2008 em 18:16
fonte usuário
Em outras línguas...                            


20 respostas

votos
88

Bem, se você não quer fazê-lo usando Ajax ou qualquer outra forma e quer apenas um postback ASP.NET normal de acontecer, aqui é como fazê-lo (sem o uso de quaisquer outras bibliotecas):

É um pouco complicado embora ... :)

Eu. Em seu arquivo de código (supondo que você estiver usando C # e .NET 2.0 ou posterior), adicione o seguinte interface para sua classe de página para torná-lo parecido

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

ii. Isso deve adicionar (utilizando Tab- Tab) esta função para seu arquivo de código:

public void RaisePostBackEvent(string eventArgument) { }

iii. Em seu evento onclick em JavaScript, escrever o seguinte código:

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

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

PS: Isso é 'destacar-sublinhado-doPostBack' ... E, não deve haver nenhum espaço nessa seqüência ... De alguma forma, a ADM não permite que eu escreva em sublinhados seguido por um caractere!

Respondeu 06/08/2008 em 19:04
fonte usuário

votos
54

O __doPostBack()método funciona bem.

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

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

De seu JavaScript, recuperar a referência ao botão usando seu ClientID e depois chamar o .click () método nele.

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

button.click();
Respondeu 11/08/2008 em 20:03
fonte usuário

votos
18

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

Sugiro a biblioteca Microsoft AJAX. Uma vez instalado e referenciada, basta adicionar uma linha em seu carregamento da página ou de inicialização:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Depois, você pode fazer coisas como:

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

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

PageClassName.Get5(javascriptCallbackFunction);

O último parâmetro de sua chamada de função deve ser a função de retorno JavaScript que será executado quando o pedido AJAX é retornado.

Respondeu 06/08/2008 em 18:40
fonte usuário

votos
11

Você pode fazê-lo de forma assíncrona usando PageMethods .NET Ajax. Veja aqui ou aqui .

Respondeu 06/08/2008 em 18:23
fonte usuário

votos
4

Estática, programação fortemente tipado sempre se sentiu muito natural para mim, então no começo eu resisti aprender JavaScript (para não mencionar HTML e CSS) quando eu tinha para construir front-ends baseados na web para as minhas aplicações. Eu faria qualquer coisa para contornar este como redirecionando para uma página apenas para executar e ação sobre o evento OnLoad, contanto que eu poderia código puro C #.

Você vai encontrar no entanto que se você estiver indo trabalhar com os sites, você deve ter uma mente aberta e começar a pensar mais web-oriented (isto é, não tentar fazer as coisas do lado do cliente no servidor e vice-versa) . Eu amo webforms ASP.NET e ainda usá-lo (assim como MVC ), mas vou dizer que, ao tentar tornar as coisas mais simples e escondendo a separação de cliente e servidor pode confundir os recém-chegados e realmente acabar fazendo as coisas mais difíceis, por vezes, .

Meu conselho é para aprender alguns básicos JavaScript (como registrar eventos, recuperar objetos DOM, manipular CSS, etc.) e você vai encontrar a programação web muito mais agradável (para não mencionar mais fácil). Um monte de pessoas mencionado diferentes bibliotecas Ajax, mas eu não vi qualquer exemplos reais Ajax, por isso, aqui vai. (Se você não estiver familiarizado com Ajax, tudo o que é, está fazendo 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.

Do 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 pode ser enganador o resultado pode ser em texto simples ou JSON, bem, você não está limitado a XML. jQuery fornece uma interface ainda mais simples para fazer chamadas Ajax (entre simplificando outras tarefas JavaScript).

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

Do 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 registar o caminho HTTP no seu arquivo Global.asax, então ASP.NET vai saber como direcionar a solicitação.

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

Com AJAX e controladores, você pode enviar de volta para o servidor, a qualquer momento de forma assíncrona para realizar qualquer operação do lado do servidor. Este one-two punch fornece tanto a flexibilidade de JavaScript eo poder do C # / ASP.NET, dando as pessoas que visitam seu site uma melhor experiência global. Sem sacrificar qualquer coisa, você obtém o melhor dos dois mundos.

Referências

Respondeu 13/06/2012 em 11:36
fonte usuário

votos
3

Acho blog Como buscar e dados do banco de dados do servidor mostram SQL na página ASP.NET usando Ajax (jQuery) irá ajudá-lo.

Código JavaScript

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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 ASP.NET Servidor Side

[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;
}
Respondeu 21/05/2014 em 12:28
fonte usuário

votos
3

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

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

Eu tenho usado AjaxPro extensivamente, e é uma biblioteca muito agradável, que eu recomendaria para retornos de chamada simples para o servidor. Ele funciona bem com a versão da Microsoft do Ajax, sem problemas. No entanto, gostaria de observar, com o quão fácil a Microsoft fez Ajax, eu só iria usá-lo se for realmente necessário. Ele tem um monte de JavaScript para fazer alguma funcionalidade realmente complicado que você começa a partir Microsoft por apenas deixá-la cair em um painel de atualização.

Respondeu 25/08/2008 em 18:25
fonte usuário

votos
2

É tão fácil para ambos os cenários (isto é, síncrona / assíncrona) se você deseja acionar um manipulador de eventos do lado do servidor, por exemplo, evento de clique do botão.

Para desencadear um manipulador de eventos de um controle: Se você adicionou um ScriptManager na sua página já ignore a etapa 1.

  1. Adicione o seguinte na sua seção de script de cliente 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. Escrever-lhe manipulador de eventos do lado do servidor para o seu controle

      protected void btnSayHello_Click (object sender, EventArgs e) {Label1.Text = "Olá mundo ..."; }

    2. Adicionar uma função de cliente para chamar o manipulador de eventos do lado do servidor

      funcionar SayHello () {__doPostBack ( "btnSayHello", ""); }

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

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

Uma outra coisa a dizer é que: Tenha cuidado com ID de cliente, porque depende de você política ID geração definido com a propriedade ClientIDMode.

Respondeu 12/08/2011 em 13:48
fonte usuário

votos
1

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 do controle ASP.NET no arquivo .aspx.

Respondeu 27/11/2014 em 06:30
fonte usuário

votos
1

Eu estou tentando implementar isso, mas ele não está funcionando direito. A página está postando de volta, mas meu código não está sendo executado. Quando eu depurar a página, o RaisePostBackEvent nunca é despedido. Uma coisa que eu fiz diferente é que eu estou fazendo isso em um controle de usuário em vez de uma página aspx.

Se alguém é como Merk, e tendo problemas ao longo vindo 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 mãe. E então você pode invocar 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ê deu o controle de usuário na página pai quando você nested-lo no mark up.

Nota: Você pode também simplesmente chamar métodos que pertencem a esse controle de usuário diretamente (neste caso, você só precisa do manipulador RaisePostBackEvent na página pai):

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}
Respondeu 12/11/2013 em 22:01
fonte usuário

votos
1

Se a função __doPostBack não é gerado na página que você precisa inserir um controle para forçá-lo como este:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />
Respondeu 26/08/2010 em 17:19
fonte usuário

votos
1

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 é sobre isso.
Ter um serviço web com todas as suas coisas comum também torna o sistema mais fácil de manter.

Respondeu 11/08/2008 em 19:15
fonte usuário

votos
0

Eu tento isso e então eu poderia executar um método de Asp.Net enquanto estiver usando jQuery.

  1. Fazer um redirecionamento página em seu código jQuery

    window.location = "Page.aspx?key=1";
    
  2. Em seguida, use uma seqüência 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

Respondeu 15/03/2017 em 18:07
fonte usuário

votos
0

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

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

Respondeu 05/12/2016 em 09:29
fonte usuário

votos
0

Por favor, tente o seguinte:

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

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

Respondeu 05/03/2016 em 09:29
fonte usuário

votos
0

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

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

Eu acho que isso é muito fácil!

Respondeu 01/10/2013 em 11:23
fonte usuário

votos
0

Tente 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 ...

Respondeu 14/03/2013 em 08:39
fonte usuário

votos
0

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

Respondeu 15/06/2011 em 08:06
fonte usuário

votos
0

Adicione esta linha ao carregamento da página se você está recebendo objeto esperado erro.

ClientScript.GetPostBackEventReference(this, "");
Respondeu 12/02/2011 em 10:21
fonte usuário

votos
0

Esta resposta funciona como uma brisa para mim graças cross browser:

O método __doPostBack () funciona bem.

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

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

De seu JavaScript, recuperar a referência ao botão usando seu ClientID e, em seguida, chamar o método .Clique () sobre ele:

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

button.Click(); 

Bloco de citação

Respondeu 10/05/2010 em 12:57
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more