2010-02-16 5 views
9

Ich möchte meine eigene AJAX in ASP.NET schreiben, und nicht die ASP.NET Script verwenden usw.manuell machen AJAX-Aufrufe in ASP.NET und C#

WARUM? Ich mag es, Dinge manuell zu tun und zu wissen, wie das Zeug von innen funktioniert, also möchte ich es einfach für mich machen.

Also meine Frage ist, nachdem ich einen AJAX-Aufruf machen:

var ajaxCall = new XMLHttpRequest(); 
.... 
ajaxCall.send(null) 

Wie kann ich in C#, in der Page_Load hinzufügen (oder auch nicht), so dass es für diese hört und gibt einen String zum Beispiel .

Antwort

4

+1 für Sie selbst Dinge tun - Ich möchte wissen, dass ich Dinge selbst tun kann, bevor Frameworks verwenden, die es für mich tun, also wenn es Titten geht, kann ich grob anfangen zu reparieren.

Wie auch immer auf Ihre Frage. Geben Sie Daten einfach unter Verwendung von ASP.NET oder Response.Write aus. Wenn Sie eine POST-Anfrage durchführen, können Sie dies in Page_Load mit if (Page.IsPostBack.) Überprüfen. Denken Sie daran, dass Sie normalerweise nur die Daten für einen Teil einer Seite und nicht die ganze Seite selbst senden benötigt nicht die Tags , <head> oder <body>.

Wenn ich habe dies vor in ASP.NET-Websites getan gesehen, separate Seiten wurden für die AJAX verwendet Anrufe (zB index.aspx = normal Ort, index ajax.aspx = ajaxified Seite Komponente.)

if (Page.IsPostBack) 
{ 
    Response.Write("Hello, world! From AJAX."); 
} 

Sie müssen nicht verwenden Page.IsPostBack, sind die meisten AJAX-Anfragen nur die GET, wenn Sie also in Ihrem Page_Load setzen:

Response.Write("Hello, world! From AJAX."); 

dann für diese Seite einen AJAX-Aufruf tun, erhalten Sie "Hallo, Welt! Von AJAX." kehrte vom AJAX-Anruf zurück.

+0

das funktioniert gut. Vielen Dank. Ich habe eine separate Seite erstellt, die genau das zurückgibt, wonach ich suche. Vielen Dank.Obwohl das nach einer ineffizienten Methode aussieht, nach dem, was ich von den anderen Antworten gelesen habe. Vielen Dank! –

+0

Ja, idealerweise würden Sie Ihre Seite in ASP Markup usw. erstellen, das war nur ein kurzes Beispiel. Auch wie andere gesagt haben, das ASP.NET AJAX-Handling ist wirklich anständig und tot einfach (Sie brauchen nicht einmal eine separate Seite oder separaten Code) - oder jQuery ist ebenso brillant für die Client-Seite, aber wie Sie das gesagt haben war eine Lernübung. –

1

Ihre beste Wette wäre, eine Handler-Datei (* .ashx) zu erstellen, die die eingehende Anfrage verarbeitet und das korrekt formatierte json/xml an das JavaScript zurückgibt. Der ScriptManager wird verwendet, um diesen Inhalt direkt in die eigentliche Seite einzubetten, aber Sie werden es einfacher finden, wenn Sie den ScriptManager vollständig neu erstellen wollen, und die IIS-Verarbeitung der Standardanforderung umgehen.

+0

ja du hast Recht. Generische Handler sind ideal für Ajax, da es leichter ist als asp.net-Seite. – Adeel

+0

Ich werde das definitiv versuchen! Vielen Dank! –

0

Eines der Features in ASP.Net ist die Möglichkeit, serverseitigen Code vom clientseitigen Code ohne Postback aufzurufen, wobei ein so genannter Client-Callback verwendet wird. Es gibt ein paar kleinere Vorbehalte, die ich bisher gefunden habe: -

  • es verwendet XmlHttp, das ist IE nur im Moment. Firefox und andere Browser haben eine Alternative, aber die Callbacks verwenden dies nur.
  • der einzige Typ, den Sie vom Server zurückgeben kann, ist eine Zeichenfolge (aber wir können um das bekommen von Serialisierung, wenn nötig)

Das Beispiel, das ich verwendet habe, ist, wo ich zwei miteinander verbundene Textboxen, die sein müssen synchron gehalten. Wenn das Feld ClientID geändert wird, sollte das Feld Clientname den Namen des Clients anzeigen, der diese ID hat, und umgekehrt.

mit dieser Funktionalität zu starten, Ihr gewährleisten Code-Behind implementiert die ICallbackEventHandler Schnittstelle: -

public partial class WebForm1 : System.Web.UI.Page, ICallbackEventHandler 

Als nächstes melde ich meine Callback-Methoden in der Page_Load-Methode in meinem aspx.cs: -

// Set up client callbacks. These allow client-side scripts to call 
// server-side functions and retrieve the results. Its a string-only 
// return I'm afraid, limited by the ICallbackEventHandler method signatures 

txtClientID.Attributes.Add("onchange", "GetClientNameById('id|' + this.value, 'id');"); 

string callBackClientID = Page.ClientScript.GetCallbackEventReference(this, "arg", "ClientNameCallback", "context", "ClientNameCallbackError", true); 

string clientIDfunction = "function GetClientNameById(arg,context) { " + callBackClientID + "; }"; 

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "GetClientNameById", clientIDfunction, true); 

txtClientName.Attributes.Add("onchange", "GetClientIdByName('name|' + this.value, 'name');"); 

string callBackClientName = Page.ClientScript.GetCallbackEventReference(this, "arg", "ClientIdCallback", "context", "ClientIdCallbackError", true); 

string clientNamefunction = "function GetClientIdByName(arg, context) { " + callBackClientName + "; }"; 

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "GetClientIdByName", clientNamefunction, true); 

Dies registriert die Serverfunktionen mit der Seite und hängt sie an die Callback-Methoden des Clients an - diese Callback-Methoden sind grundlegende Platzhalter, die nichts anderes tun, als dem Server irgendwo den String zurückzugeben. Also auf der aspx Seite selbst: -

<script type="text/javascript"> 

function ClientNameCallback(result, context) 

{ 

//sorry about the hardcoded element name... 

if(result != "") 

document.getElementById('ctl00_ContentPlaceHolder1_txtClientName').setAttribute('value',result); 

} 

function ClientIdCallback(result,context) 

{ 

//sorry about the hardcoded element name... 

if(result != "") 

document.getElementById('ctl00_ContentPlaceHolder1_txtClientID').setAttribute('value',result); 

} 

function ClientNameCallbackError(result, context) 

{ 

//Not sure what error is likely to arise at this point, but... 

alert('Error in client name callback function - please say that to eSolutions!'); 

} 

function ClientIdCallbackError(result, context) 

{ 

//Not sure what error is likely to arise at this point, but... 

alert('Error in client id callback function - please say that to eSolutions!'); 

} 

</script> 

Schließlich implementieren wir die erforderliche ICallbackEventHandler, die die serverseitige Verarbeitung enthält wollen wir durchführen: -

string ICallbackEventHandler.GetCallbackResult() 
{ 
    return callbackReturnValue; 
} 

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument) 
{ 

// eventArgument should be in format field|value, 
// e.g., "id|30102" or "name|test client" 
// This is because of the "single string" limitations 
// of the callback interface 

if(eventArgument.StartsWith("name")) 
{ 
    //....do lookup to get the id based on the name, from an array or database, or whatever 
    callbackReturnValue = <string we want to pass back to client-side 
} 

else if(eventArgument.StartsWith("id")) 

usw. usw.

+0

Ich werde sehen müssen, ob mir das besser gefällt, als die von Andy Shellam beschriebene separate Seitenweise zu verwenden. –

6

Wie this answer, +1 für das Selbermachen.

Allerdings muss ich stark beraten Sie eine Bibliothek wie jQuery auf der Client-Seite zu verwenden, um Unterschiede zwischen den Browsern zu berücksichtigen (und in diesem speziellen Fall gibt es Unterschiede). Es (oder andere Bibliotheken) bietet eine Abstraktion, die Sie in allen Webbrowsern verwenden können, um Ihren Code zu normalisieren.

Das heißt, in ASP.NET können Sie überprüfen, ob der Aufruf ein Post zurück ist, und wenn ja, schreiben Sie einfach den Inhalt in den Ausgabestream.

Allerdings, würde ich dringend empfehlen, dass. Vielmehr sollte der Aufruf zu ajax vollständig auf einer anderen Seite sein, da es einen anderen Zweck, eine andere Art von Antwort bietet und daher eine eigene URL verdient.

Beachten Sie auch, dass beim Zurückgeben von Inhalt in Form von XML oder JSON (typisch für Ajax-Aufrufe, wobei JSON nun ziemlich dominant ist), die ContentType-Eigenschaft der Antwort auf den entsprechenden Mime geändert werden muss type ("text/xml" für XML, "application/json" für JSON).

Beachten Sie, dass ASP.NET MVC dies alles viel, viel einfacher macht, und Sie möglicherweise in die Verwendung dieses anstelle des WebForms-Modells sehen möchten, da MVC von Grund auf für viele dieser Szenarien viel einfacher aufgebaut ist. Es erlaubt Ihnen, sauber Methoden zu trennen, die Seitenrendering verarbeiten, von denen, die Funktionalität in Form von Ajax-Aufrufen bieten (und dies ist nur einer der vielen Vorteile).

+0

Ja, nachdem ich die ganze Idee, wie es manuell gemacht wird, verstanden habe und alle inneren Abläufe herausfinden werde, werde ich höchstwahrscheinlich Wechseln Sie in eine Bibliothek wie jQuery. Vielen Dank. –

+0

+1 für Hinweis auf die Content-Type-Anforderung –

1

Wenn ich richtig denke, können Sie zwischen einer normalen HTTP-Anfrage und einem AJAX-Anruf unterscheiden, indem Sie die Kopfzeile X-Requested-With untersuchen.

in Ihrem Spielzeug Beispiel Also, wenn Sie anders auf eine AJAX-Anforderung reagieren wollen:

public void Page_Load(object sender, EventArgs e) 
{ 
    if (Request.Headers["X-Requested-With"] == "XMLHttpRequest") 
    { 
     Response.Clear(); // dont want <html>.... etc stuff 
     Response.Write("Hi from AJAX!"); 
    } 
    else 
    { 
     // normal page stuff 
    } 
} 

dann in Ihrem js, so etwas wie diese (verzeihen Syntaxfehler bitte)

var req = new XmlHttpRequest(); 
req.open("GET","default.aspx",false); 
req.send(""); 
document.getElementById('some_div').innerHTML = req.responseXML; 
+0

Hmm .. leider konnte ich dies nicht zur Arbeit bringen. Ich werde noch mehr Nachforschungen anstellen müssen, da dies ein effizienter Weg zu sein scheint. Vielen Dank! –

+0

@Tomaszewski welcher Teil hat nicht funktioniert? Wenn Sie einen Unterbrechungspunkt in den CS-Code gesteckt haben, war der korrekte Codeblock feuern? – Kirschstein

+0

Hallo, danke für die Antwort. Während der Fehlersuche scheint mein Request.Headers keinen Schlüssel namens "X-Requested-With" zu haben, es sei denn, ich verpasse etwas. –

Verwandte Themen