Niestandardowe JavaScript Ajax dla ASP.NET

Question

Napisałem kilka podstawowych funkcji JavaScript i chciałbym dowiedzieć się, jak włączyć asynchroniczne postbacks w projekcie C# 4.0/ASP.net za pomocą tego kodu JS.

Na przykład, mam skrypt, który zwiększa liczbę po kliknięciu. Po ponownym kliknięciu liczba jest zmniejszana. Zasadniczo ładuję numer z bazy danych, a następnie ukrywam jeden numer <span> i po kliknięciu pokazuję inny z odpowiednią zmniejszoną liczbą. To nie jest skomplikowane javascript; jest to prosty przykład. Teraz po kliknięciu przycisku chcę wysłać to połączenie inkrementujące/dekrementujące na serwer, aby zaktualizować numer bazy danych.

Zdaję sobie sprawę, że mogę wykonać coś podobnego do tego przykładu za pomocą przełącznika AJAX Control Toolkit. Ja jednak chcę wiedzieć, jak używać mojego javascript OWN do tworzenia funkcjonalności AJAX.

Jak to zrobić, używając języka C# i niestandardowego kodu JavaScript?

Nie jestem przeciwny używaniu biblioteki ASP.net AJAX, po prostu nie chcę używać gotowej kontroli. Chcę się nauczyć procesu tworzenia własnej funkcjonalności AJAX. Zakładam, że będę musiał użyć asp:UpdatePanel, ale nie wiem jak wywoływać funkcje C# od strony klienta.

Moje javascript nie jest jQuery, w rzeczywistości nie chcę mieć nic wspólnego z jQuery, dopóki nie dowiem się więcej o javascript i tym procesie.

Answer 1

jeśli używasz UpdatePanel jest bardzo prosty w połączeniu z JavaScript do __doPostBack. Zobacz here for example.

Answer 2

Wystarczy popatrzeć na tym kursie około AJAX http://www.w3schools.com/Ajax/Default.Asp

To daje przegląd przy użyciu JavaScript GET i POST danych za pomocą AJAX.

Mam nadzieję, że to pomoże.

Answer 3

Oto link, w jaki sposób można włączyć środowisko ASP.NET C# za pomocą niestandardowego kodu JavaScript.

http://msdn.microsoft.com/en-us/library/bb386450.aspx

Zawiera również próbkę VS 2010 projekt tutaj: http://go.microsoft.com/fwlink/?LinkId=185646

oto ogólnie co się dzieje tutaj:

W AjaxIScriptControl rozwiązania:

SampleTextBox. cs - zajmuje się renderowaniem skryptu rol na stronie; i przywiązanie do klienta kodu JavaScript (plik js)

SampleTextBox.js - dba o funkcjonalność po stronie klienta i generuje JavaScript Object kontroli poprzez prototyp

Uwagi:

• W tym przykładzie zastosowano istniejącą ASP .NET wbudowanej kontroli (ty zawiadomienie SampleTextBox dziedziczy pole tekstowe i IScriptControl), ale można czynią każdy rodzaj kontroli HTML jeśli dziedziczyć ScriptControl klasę zamiast.

• To rozwiązanie wybrali również oddzielona kodu sterującego scenariusz i strony kodu w dwóch projektach, ale można łatwo zrobić to w jeden.

• można łatwo wykorzystać inną bibliotekę JavaScript w pliku JS

Z mojego doświadczenia tak daleko, jest to jeden z bardziej elegancki sposób naniesienie kodu po stronie serwera ze strony klienta, jeśli są utworzyć kontrolki wielokrotnego użytku dla swojej witryny. Wykorzystujesz moc po stronie serwera do wykonania początkowego renderowania, zapewniając jednocześnie możliwości po stronie klienta poprzez JavaScript.

Answer 4

Jeśli utworzysz funkcje C# jako WCF REST Services lub starszego stylu Script Services, możesz łatwo wywołać swoje metody obsługi za pomocą JavaScript, używając podstawowego XmlHttpRequest (bez jQuery lub UpdatePanels).

Oto krótki jsFiddle ułożyła: http://jsfiddle.net/ndVeS/

Próbka ta ma dwa pola tekstowe; należy wprowadzić wartość w pierwszej, kliknij przycisk, a następnie wartość ta jest przekazywana do usługi (usługa echo) i zwracana w wywołaniu zwrotnym. Kod JavaScript przyjmuje tę wartość i zapełnia ją drugim polem tekstowym.

Można zdefiniować C# WCF REST usługi takiego:

[ServiceContract] 
public class EchoService : IEchoService { 
    [WebGet(UriTemplate="EchoMe?val={theValue}, ResponseFormat=WebMessageFormat.Json)] 
    public string EchoMe(string theValue) { 
    return theValue; 
    } 
} 

Jeśli obsługiwać połączenia w ten sposób, można wydzielić logiki usług od prezentacji (pliki ASPX), a to pozwala na łatwiejsze Testowanie i możesz także oddzielić obowiązki od tych, którzy budują interfejs użytkownika od tych, które budują funkcjonalność biznesową.

Muszę przyznać, że jestem bardziej osobą jQuery, jeśli chodzi o to, ale pomyślałem, że to wspaniałe ćwiczenie, aby dowiedzieć się, jak działa XmlHttpRequest pod maską. Dzięki temu docenisz to, co zapewnia jQuery (lub podobne środowisko).

Oto ładny przegląd obiektu XMLHttpRequest i jak go używać: http://www.jibbering.com/2002/4/httprequest.html

Mam nadzieję, że to pomaga.

Answer 5

function GetXmlHttpObject(handler) { 
var objXMLHttp = null 
if (window.XMLHttpRequest) { 
    objXMLHttp = new XMLHttpRequest() 
} 
else if (window.ActiveXObject) { 
    objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP") 
} 
return objXMLHttp; 

}

funkcja GetDropDown() {

function stateChanged(StatesUpdated) { 


    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { 
     document.getElementById('updateplace').innerHTML = xmlHttp.responseText; 
     //"updateplace" is you div id which will hold the new data or new page 
     if (navigator.appName != "Microsoft Internet Explorer") { 

     } 
    } 
    else { 
     //alert(xmlHttp.status); 
    } 
} 





xmlHttp = GetXmlHttpObject() 
if (xmlHttp == null) { 
    alert("Browser does not support HTTP Request"); 
    return; 
} 



    url = "xyz.aspx" //this might be sent to any post data 
    url = url + "&sid=" + Math.random(); 


    xmlHttp.onreadystatechange = stateChanged; 

    xmlHttp.open("GET", url, true); 

    xmlHttp.send(null); 

}

z powyższym kodzie można wysyłać dane do jakichkolwiek .cs file również, gdzie można zmieniać dane i załaduj go na nową stronę, która załaduje się w div aktualizacji, a metoda powinna przekierować do nowego pliku aspx.

Mam nadzieję, że masz logikę :)

jeśli masz jakiekolwiek wątpliwości dotrzeć me @ sankalpa.sam@gmail.com

Answer 6

wiem, że to nie jest MVC, że robisz, ale mają wygląd w sekcji MVC strony ASP.NET znajdziesz tam wiele przykładów wywołań AJAX - MVC nie używa tych strasznych skryptów-zup tworzących obiekty .NET. Większość prawdopodobnie będzie korzystała z jQuery - jest to biblioteka javascript o otwartym kodzie źródłowym, która może być podłączona do dowolnej aplikacji internetowej i zapewnia naprawdę fajną funkcjonalność.

Answer 7

Może ur patrząc na to:

function() {ajaxscript $ .ajax ({ type: "POST", url : | url/methodName |, danych |: | nazwa_zmiennej, contentType : "application/json; charset = utf-8", dataType: "json", sukces: | niektóre javascript tutaj |, błąd: | niektóre javascript tutaj | });

Answer 8

Proste bez UpdatePanel:

pierwsze, dodać Generic Handler do projektu (.ashx). To będzie działać jako punkt końcowy Http. Nasz javascript wywoła to. Możemy (i prawdopodobnie powinniśmy) użyć punktu końcowego usługi sieci Web, ale to wymaga przetworzenia odpowiedzi i komplikuje przykład. Procedura obsługi zwraca zwykły tekst.

<%@ WebHandler Language="C#" Class="Handler" %> 

using System; 
using System.Web; 

public class Handler : IHttpHandler 
{ 
    // We'll use a static var as our "database". 
    // Feel free to add real database calls to the increment 
    // and decrement actions below. 
    static int TheNumber = 0; 

    public void ProcessRequest(HttpContext context) 
    {  
     string action = context.Request.QueryString["action"]; 
     if (!string.IsNullOrEmpty(action)) 
     { 
      if (action == "increment") 
       TheNumber++; //database update and fetch goes here 
      else if (action == "decrement") 
       TheNumber--; //database update and fetch goes here   
     } 
     context.Response.ContentType = "text/plain"; 
     context.Response.Write(TheNumber); 
    } 

    public bool IsReusable { get { return false; } } 
} 

Następnie stwórz swoją stronę internetową i dodaj asynchroniczny javascript.

<%@ Page Language="C#"%> 
<html> 
<head runat="server">  
    <script type="text/javascript"> 
    // An XMLHttpRequest object is required to make HTTP requests. 
    // Try a couple instantiation strategies to handle different 
    // browser implementations. 
    function createXMLHttpRequest() { 
     try { return new XMLHttpRequest(); } catch (e) { } 
     try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } 
     try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } 
     alert("XMLHttpRequest not supported"); 
     return null; 
    } 

    function callHandler(action) { 
     var xmlHttpReq = createXMLHttpRequest(); 
     // We're interested in an asychronous request so we define a 
     // callback function to be called when the request is complete. 
     xmlHttpReq.onreadystatechange = function() { 
      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) 
       document.getElementById("<%= lbl.ClientID%>").innerHTML 
        = xmlHttpReq.responseText; 
     } 
     xmlHttpReq.open("GET", "Handler.ashx?action=" + action, true); 
     xmlHttpReq.send(null); 
    } 
    </script> 
</head> 
<body> 
    <form id="Form1" runat="server"> 
    <div> 
    The Number:&nbsp;<Label runat="server" id="lbl">0</Label> 
    </div> 
    <div> 
     <asp:Button ID="Button1" runat="server" Text="Increment" 
      OnClientClick="callHandler('increment');return false;" /> 
     &nbsp; 
     <asp:Button ID="Button2" runat="server" Text="Decrement" 
      OnClientClick="callHandler('decrement');return false;" /> 
    </div> 
    </form> 
</body> 
</html> 

Ostateczna przepływu wynosi:

• Wstęga strona użytkownik kliknie przycisk zwiększania lub zmniejszania która zwraca naszą javascript
• Nasze javascript wysyła wniosek do pożądanego działania w ciągu kwerendy do Handler. ashx
• Handler.ashx odczytuje zapytanie o kwerendę, zwiększa lub zmniejsza jego zmienną statyczną i zwraca wartość
• Nasze wywołanie zwrotne otrzymuje wartość i aktualizuje nasze Interfejs użytkownika.