none
Conteúdo Dinâmico SEM AJAX RRS feed

  • Pergunta

  • Bom dia, tenho um projeto que poderia fazer uso de alguns combo-boxes carregando dinamicamente ao invés de carregar assim que a página abre. Como é muito pouco, não gostaria de usar o AJAX (ou pelo menos não gostaria de colocar nenhuma DLL a mais do que o básico do Framework do Dot Net.

    É algo muito simples e entendo que poderia ser resolvido com um procedimento JavaScript chamando um Generic Handler ou algo do gênero. Alguma sugestão para uma simples chamada de Databind que não envolva o AJAX (ou as bibliotecas do AJAX)?

    terça-feira, 16 de fevereiro de 2016 11:05

Respostas

Todas as Respostas

  • Amigo,

    Você pode utilizar o AJAX nativo para fazer isso, você não precisa utilizar a bibilioteca AJAX do .NET para trabalhar com AJAX, você pode por exemplo utilizar JQUERY para agilizar o desenvolvimento e SIM utilizar um GENERIC para responder o que você precisa.

    Veja se os links abaixo:

    http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ 
    - http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx 

    Espero ter ajudado e boa sorte!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Marcado como Resposta SammuelMiranda quarta-feira, 17 de fevereiro de 2016 16:59
    terça-feira, 16 de fevereiro de 2016 13:31
  • Lucas, obrigado.

    Vou testar o código aqui e te digo já se saiu o que eu to querendo.

    Uma dúvida - e isso vai parecer idiota, mas vai lá - o que é o ClientScriptManager? Pelo nome eu consigo deduzir, mas nunca usei ele pra nada, tenho que declarar isso na página? É um WebForms (e ... hehehe ... estou compilando no Dot Net 2.0).

    terça-feira, 16 de fevereiro de 2016 13:55
  • Olá Sammuel, é isso mesmo que o nome já diz, a ClientScriptManager é uma Classe para gerenciar scripts. Pode-se, por exemplo, chamar uma função alert() direto do Code Behind da sua Web Forms Application. 

    Pelo que entendi o que você quer é carregar informaçãos do servidor pro client somente após alguma ação do usuário. Você poderia executar isso através do PostBack de um Control que poderia ser um RadioButton ou DropDownList. Segue um artigo muito bom sobre o assunto.

    Desvendando ASP.NET Postback


    Abraço!
    terça-feira, 16 de fevereiro de 2016 15:20
  • Ok, eu vi Rogério - o PostBack eu uso com algum sucesso já, assim como já sobrescrevi diversos métodos como "OnLoad" e "OnInit" de páginas e componentes para adequar minhas necessidades.

    O problema era tratar o PostBack parcial, sem eu ter que enviar a página inteira, assim perdendo a posição do Scroll, o navegador dar aquele "glitch" que ninguém gostar etc. O AJAX é uma solução e estou escrevendo um pouco do que o Lucas recomendou para ver como vou encaixar isso no meu programa.

    Algo do tipo, "onclick" (no cliente, componente referente ao combobox por exemplo) carregar a lista ... algo assim. To chegando lá...

    terça-feira, 16 de fevereiro de 2016 15:48
  • Bacana, realmente é uma solução mais elegante e com melhor usabilidade pro usuário :)

    Siga o que o Lucas falou mesmo então que vai ficar legal.

    Abraços

    terça-feira, 16 de fevereiro de 2016 16:30
  • Sammuel, dá uma olhada nisso Combobox dinâmico com JSON e jQuery sem requisição AJAX e vê se te ajuda.

    O exemplo ai mostra como carregar sem fazer uma requisição AJAX utilizando apenas JSON, ou seja, você teria que serializar os dados para JSON e colocá-los na variável Javascript no carregamento da página.  Depois a troca dos valores acontece dinamicamente com jQuery conforme escolhe as opções.

    Utilizando o código do artigo você teria que colocar os dados serializado via C# nas linha abaixo:

    var categorias = sua lista serializada no C# aqui;
    var subCategorias = sua outra lista serializada no C# aqui;
    
    Também precisaria adaptar as propriedades do seu objeto serializado...

    • Marcado como Resposta Marcos SJ quarta-feira, 17 de fevereiro de 2016 16:41
    quarta-feira, 17 de fevereiro de 2016 02:39
  • Cesar, obrigado. Seu exemplo vai me ajudar pois não sou muito bom com JavaScript (não li muito ainda) e já me mostra o que eu tenho que voltar para as listas carregarem - muito bom, mas no código exemplo as opções já estão no HTML enviado e o SELECT apenas carrega dinamicamente.

    Eu quero mandar nada na página - o ComboBox vazio, sem opções - e quando, no cliente, clicar nele, carregar as opções - uma query que roda no servidor - sem dar postback na página toda. Isso é parte do AJAX, pois se eu uso apenas a lista no MarkUp para suprir o "categorias" e o "subcategorias" do exemplo, ainda sim iria tudo na página direto.

    Ainda sim, excelente. Preciso de conhecimento de Javascript mesmo, e esse processamento já me deu ideias.


    quarta-feira, 17 de fevereiro de 2016 12:59
  • Usei o post conforme o lucas mostrou. Meu código ficou assim:

    ASPX

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="kbs.aspx.cs" Inherits="CWEB.Web.UI.KnowledgeBase" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="main_head" runat="server">
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Wiki</title>
        <link type="image/x-icon" rel="shortcut icon" href="~/content/images/icon.ico" />
        <link type="text/css" rel="stylesheet" href="~/content/scripts/style.css" />
        <link type="text/css" rel="stylesheet" href="~/content/scripts/jqueryui.css" />
        <script type="text/javascript" language="javascript" src="content/scripts/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="content/scripts/clickblock.js"></script>
    </head>
    <body>
        <form id="main_form" class="kbspage" runat="server">
            <script type="text/javascript" language="javascript">
                $(document).ready(function () {
                    $.ajax({
                        type: "POST",
                        url: "kbs.aspx/GetQR",
                        data: '{StringToCode: ' + document.getElementById('<%=this.code.ClientID%>').value + '}',
                        contentType: "application/json",
                        dataType: "json",
                        success: function (msg) { document.getElementById('<%=this.pgcontent.ClientID%>').value = msg.d; }
                    });
                });
            </script>
            <asp:HiddenField runat="server" ID="code" Value="aiaiai" />
            <asp:Label runat="server" ID="pgcontent" />
        </form>
    </body>
    </html>

    C#

    using MdWeb = global::CWEB.Web;
    using SysWeb = global::System.Web.UI;
    using SysIO = global::System.IO;
    namespace CWEB.Web.UI
    {
        public class KnowledgeBase : SysWeb.Page
        {
            protected SysWeb.HtmlControls.HtmlHead main_head;
            protected SysWeb.HtmlControls.HtmlForm main_form;
            protected SysWeb.WebControls.HiddenField code;
            protected SysWeb.WebControls.Label pgcontent;
            [global::System.Web.Services.WebMethod(EnableSession=false)] public static string GetQR(string StringToCode) { return "<b>" + StringToCode + "</b>"; }
        }
    }

    Mas quando carrego a página nada acontece. Ela está em branco, o console do navegador não mostra nenhum alerta no Javascript e o Debuger na função "GetQR" não é disparado nunca.

    Qual pode ser o problema?


    quarta-feira, 17 de fevereiro de 2016 17:38
  • Possivelmente é a ausência de aspas depois do StringToCode:

    data: '{StringToCode: "' + document.getElementById('<%=this.code.ClientID%>').value + '"}',

    Sem aspas ele não reconhece como string e não invoca o método.

    Você também pode adicionar o error ai no seu $.ajax e ver o erro que ocorre:

    $.ajax({
        type: "POST",
        url: "kbs.aspx/GetQR",
        data: '{StringToCode: ' + document.getElementById('<%=this.code.ClientID%>').value + '}',
        contentType: "application/json",
        dataType: "json",
        success: function(msg) { document.getElementById('<%=this.pgcontent.ClientID%>').value = msg.d; },
        error:function(xhr, ajaxOptions, thrownError) { document.getElementById('<%=this.pgcontent.ClientID%>').value = "Erro:" + xhr.responseText; }
    });

    quinta-feira, 18 de fevereiro de 2016 02:15
  • De fato, coloquei as aspas, primeira coisa, segundo: no erro coloquei o alert() pois o getElementByid.Value não acontecia nada da mesma forma. Com o alert() está voltando para mim o html da página - como se fosse um response novo...

    O ASP processa JSON? O contentType e dataType indicam JSON no exemplo que usei de base, mas tenho minhas dúvidas...

    quinta-feira, 18 de fevereiro de 2016 14:18
  • Sim, ele processa o JSON na chamada do WebMethod.

    Agora entra no debuger da página GetQR?

    Eu geralmente adiciono o charset no contenttype:

    contentType: "application/json; charset=utf-8",


    Este é um é um código que eu utilizei

    var parametros = "id:" + id + ";
    $.ajax({
    	type: "POST",
    	url: "/default.aspx/save",
    	data: "{" + parametros + "}",
    	contentType: "application/json; charset=utf-8",
    	dataType: "json",
    	success: function (result) {
    		alert("sucesso");
    	},
    	error: function (result) {
    		alert(result.responseText);
    	}
    });
    


    [WebMethod]
    public static void save(int id)
    {
    	
    }
    

    Este código funciona no meu projeto e se parece muito com o seu. A sua URL ("kbs.aspx/GetQR") está correta?
    No meu exemplo eu utilizo o caminho completo /default.aspx/save


    Pode testar esta variação?

    var meuObjeto = { StringToCode: "Teste" };
    $.ajax({
        type: "POST",
        url: "kbs.aspx/GetQR",
        data: JSON.stringify(meuObjeto),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) { alert(msg); alert(msg.d); },
        error: function (xhr) { alert(xhr.responseText); }
    });


    quinta-feira, 18 de fevereiro de 2016 14:55
  • Então, eu tentei com caminho completo e com apenas o ASPX. Mesmo resultado.

    Troquei o content type e tudo mais para "text/plain"; sinto que estou perto - pois no sucesso eu recebo como resultado o HTML da página, e o Debuger (Visual Studio - lado servidor - C#) nunca é usado. O método "GetQR" nunca é chamado.

    Noto que, se eu digitar "http://localhost:9000/kbs.aspx/GetQR" (que é o que o ajax basicamente está fazendo certo?) eu recebo a página inteira também; minha impressão é que o método que tem o atributo WebMethod não é declarado ou acessível, e simplesmente não ativa. É como se fosse um request novo acho.

    Todos os exemplos que vejo na internet o WebMethod é parte de um asmx e não de um aspx.

    Meu código ficou assim:

    ASPX

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="kbs.aspx.cs" Inherits="CWEB.Web.UI.KnowledgeBase" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="main_head" runat="server">
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Wiki</title>
        <link type="image/x-icon" rel="shortcut icon" href="~/content/images/icon.ico" />
        <link type="text/css" rel="stylesheet" href="~/content/scripts/style.css" />
        <link type="text/css" rel="stylesheet" href="~/content/scripts/jqueryui.css" />
        <script type="text/javascript" language="javascript" src="content/scripts/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="content/scripts/clickblock.js"></script>
    </head>
    <body>
        <form id="main_form" class="kbspage" runat="server">
            <script type="text/javascript" language="javascript">
                function callqr()
                {
                    $.ajax({
                        type: "POST",
                        url: "kbs.aspx/GetQR",
                        data: '{ "' + document.getElementById('<%=this.code.ClientID%>').value + '" }',
                        contentType: "text/plain; charset=utf-8",
                        dataType: "text",
                        success: function (data, textStatus, jqXHR) { alert("Sucesso: " + data); },
                        error: function(xhr, ajaxOptions, thrownError) { alert("Erro: " + xhr.responseText); }
                    });
                }
                $(document).ready(callqr);
            </script>
            <asp:HiddenField runat="server" ID="code" Value="aiaiai" />
            <span id="pgcontent"></span>
        </form>
    </body>
    </html>
    C#
    using MdWeb = global::CWEB.Web;
    using SysWeb = global::System.Web.UI;
    using SysIO = global::System.IO;
    namespace CWEB.Web.UI
    {
        public class KnowledgeBase : SysWeb.Page
        {
            protected SysWeb.HtmlControls.HtmlHead main_head;
            protected SysWeb.HtmlControls.HtmlForm main_form;
            protected SysWeb.WebControls.HiddenField code;
            [global::System.Web.Services.WebMethod] public static string GetQR(string StringToCode) { return "OK: " + StringToCode; }
        }
    }

    Ainda sim, eu recebo o SUCESS no javascript, mas o conteúdo dele é "<html><head>....</head><body><form>...</html>" - ou seja, o render da Page.

    quinta-feira, 18 de fevereiro de 2016 15:35
  • Complementando: tanto que se eu chamo a tag <asp:ScriptManager></asp:ScriptManager> na minha página, o ASP (markup) NÃO ACHA!
    quinta-feira, 18 de fevereiro de 2016 15:38