Usando o método getjson do jQuery com um formulário Web ASP.NET

StackOverflow https://stackoverflow.com/questions/1176603

Pergunta

Como faço para chamar um método em uma página do formulário da Web ASP.NET usando o método getjson no jQuery?

O objetivo é o seguinte:

  1. O usuário clica em um item de lista
  2. O valor é enviado para o servidor
  3. O servidor responde com a lista relacionada de coisas, formatada usando JSON
  4. Preencha a caixa secundária

Não quero usar um UpdatePanel, fiz centenas em horários usando a estrutura do ASP.NET MVC, mas não consigo descobrir usando formulários da Web!

Até agora, posso fazer tudo, incluindo ligar para o servidor, ele simplesmente não chama o método certo.

Obrigado,
Kieron

Algum código:

jQuery(document).ready(function() {
   jQuery("#<%= AreaListBox.ClientID %>").click(function() {
       updateRegions(jQuery(this).val());
   });
});

function updateRegions(areaId) {
    jQuery.getJSON('/Locations.aspx/GetRegions', 
        { areaId: areaId },
        function (data, textStatus) {
            debugger;
        });
}
Foi útil?

Solução

Aqui está um exemplo minimalista que deve começar você:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>

<script runat="server">
    [WebMethod]
    public static string GetRegions(int areaId)
    {
        return "Foo " + areaId;
    }
</script>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery and page methods</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function() {
        var areaId = 42;
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetRegions",
            data: "{areaId:" + areaId + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
               alert(data.d);
           }
        });
    });
    </script>
</body>
</html>

Outras dicas

Eu ajustei seu código um pouco. Adicionei a saída lateral do servidor do ClientID ao método Updateregions para passar por ele. E mudei seu método getjson para passar na URL com um parâmetro de sequência de consulta (em vez de dados separados) e a função de volta. 

jQuery(document).ready(function() {
   jQuery("#<%= AreaListBox.ClientID %>").click(function() {
       updateRegions(<%= AreaListBox.ClientID %>);
   });
});

function updateRegions(areaId) {
    jQuery("h2").html("AreaId:" + areaId);

    jQuery.getJSON("/Locations.aspx/GetRegions?" + areaId, 
        function (data, textStatus) {
            debugger;
        });
}

Deixe -me saber se isso funciona!

Você também pode usar um getjson, mas deve alterar o webMethod nesse caso. Você deve decorar com:

[WebMethod(EnableSession = true)]       
[ScriptMethod(UseHttpGet =false, ResponseFormat = ResponseFormat.Json)]

Fazer um Get pode não ser o que você deseja.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top