ASP.NET MVC-Anwendung mit JQuery, AJAX

Blog

ASP.NET MVC-Anwendung mit JQuery, AJAX

Bevor wir in das Kernthema eintauchen, werfen wir einen Überblick über JQuery und Ajax. Was ist es?



Was ist JQuery?
Nun, JQuery ist ein Framework (Werkzeuge) zum Schreiben von JavaScript. Geschrieben als weniger schreiben, mehr tun, soll jQuery die Verwendung von JavaScript vereinfachen.

Was ist JavaScript?
JavaScript ist eine objektorientierte Computerprogrammiersprache (Scripting), die häufig verwendet wird, um interaktive Effekte in Webbrowsern zu erzeugen.



Nehmen wir ein Beispielbeispiel:
Wir haben eine Senden-Schaltfläche in unserer JQuery AJAX MVC-Anwendung. Versuchen wir, eine Nachricht anzuzeigen, wenn darauf geklickt wird.

Hier ist unser Button mit definiert id=btnSubmit :



Jetzt müssen wir dafür ein Skript schreiben, hier ist etwas JavaScript-Code:

var myBtn = document.getElementById('btnSubmit'); myBtn.addEventListener('click', function(e) { e.preventDefault(); //This prevents the default action alert('Hello'); //Show the alert });

Durch diesen Code wird das Ergebnis angezeigt Hallo :

Nun, wenn wir das gleiche Ergebnis erzielen können, indem wir stattdessen jQuery verwenden. Werfen wir einen Blick:

$('#btnSubmit').click(function(event) { event.preventDefault(); //This prevents the default action alert('Hello'); //Show the alert });

Notiz: Hier ist die Verwendung von „e“ nur eine Abkürzung für Ereignis, das das Ereignis ausgelöst hat. Wir können jeden Variablennamen übergeben. Beachten Sie, dass das 'e' in den Namen ' Veranstaltung ’ im JQuery-Teil.

Dieses Stück Code erzeugt auch das gleiche Ergebnis Hallo . Aus diesem Grund ist jQuery bekannt als Schreib 'weniger, TU mehr .

Zum Schluss das Skript:

$(document).ready(function() { $(function() { /*var myBtn = document.getElementById('btnSubmit'); myBtn.addEventListener('click', function(e) { e.preventDefault(); alert('Hello'); });*/ $('#btnSubmit').click(function(event) { event.preventDefault(); alert('Hello'); }); }); });

Konzentrieren wir uns auf Ajax:

AJAX steht für Asynchronous JavaScript and XML. Bei AJAX geht es darum, Daten mit einem Server auszutauschen, ohne die ganze Seite neu zu laden. Es ist eine Technik zum Erstellen schneller und dynamischer Webseiten.

In .NET können wir serverseitigen Code auf zwei Arten aufrufen:

  1. ASP .NET AJAX
  2. jQuery AJAX

In diesem Artikel konzentrieren wir uns auf JQuery Ajax.

privates Twitter ansehen, ohne zu folgen

$.ajax() Methode:

Die Kernmethode von JQuery zum Erstellen von Ajax-Anfragen. Hier sind einige jQuery AJAX-Methoden:

  • $.ajax() Führt eine asynchrone AJAX-Anforderung aus.
  • $.get() Lädt Daten von einem Server mithilfe einer AJAX-HTTP-GET-Anforderung.
  • $.post() Lädt Daten von einem Server mithilfe einer AJAX-HTTP-POST-Anforderung.

Mehr wissen klicken .

$.ajax () Methode Konfigurationsoption:

Optionen, die wir verwenden:

wo kann man rüstung kaufen
  • asynchron:
  • Typ:
  • URL:
  • Daten:
  • Datentyp:
  • Erfolg:
  • Error:

Lassen Sie uns eine Detailübersicht haben:

asynchron

Auf false setzen, wenn die Anfrage synchron gesendet werden soll. Der Standardwert ist wahr.

Beachten Sie, dass Ihre Anforderung die Ausführung von anderem Code blockiert, wenn Sie diese Option auf 'false' setzen, bis die Antwort empfangen wird.

Beispiel:

async: false,

Typ

Dies ist eine Art von HTTP-Anforderung und akzeptiert ein gültiges HTTP-Verb.

Die Art der Anfrage, POST oder WERDEN standardmäßig auf WERDEN . Andere Anfragetypen, z. B. STELLEN und LÖSCHEN können verwendet werden, werden jedoch möglicherweise nicht von allen Webbrowsern unterstützt.

Beispiel:

type: 'POST',

URL

Die URL für die Anfrage.

Beispiel:

url: '/Home/JqAJAX',

Daten

Die an den Server zu sendenden Daten. Dies kann entweder ein Objekt oder eine Abfragezeichenfolge sein.

Beispiel:

data: JSON.stringify(model_data),

Datentyp

Der Datentyp, den Sie vom Server erwarten. Standardmäßig prüft jQuery den MIME-Typ der Antwort, wenn kein dataType angegeben ist.

Akzeptierte Werte sind text, xml, json, script, html jsonp.

Django E-Commerce-Tutorial

Beispiel:

dataType: 'json',

Inhaltstyp

Dies ist der Inhaltstyp der von Ihnen gestellten Anfrage. Die Standardeinstellung ist ‘ application/x-www-form-urlencoded '.

Beispiel:

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

Erfolg

Eine Callback-Funktion, die ausgeführt werden soll, wenn die Anforderung erfolgreich ist. Die Funktion empfängt die Antwortdaten (in ein JavaScript-Objekt konvertiert, wenn der DataType JSON war) sowie den Textstatus der Anfrage und des Rohanfrageobjekts.

Success: function (result) { $('#result').html(result); }

Error

Eine Callback-Funktion, die ausgeführt wird, wenn die Anforderung zu einem Fehler führt. Die Funktion empfängt das Rohanfrageobjekt und den Textstatus der Anfrage.

error: function (result) { alert('Error occured!!'); },

Lassen Sie uns Werte mit JQuey, Ajax posten:

Wir verwenden oft die jQuery Ajax-Methode in ASP.NET Razor-Webseiten. Hier ist ein Beispielcode:

$(document).ready(function() { $(function() { $('#btnSubmit').click(function(event) { event.preventDefault(); var Student = { ID: '10001', Name: 'Shashangka', Age: 31 }; $.ajax({ type: 'POST', url: '/Home/JqAJAX', data: JSON.stringify(Student), dataType: 'json' contentType: 'application/json; charset=utf-8', success: function(data) { alert(data.msg); }, error: function() { alert('Error occured!!') } }); }); }); });

Controller-Aktion:

// GET: Home/JqAJAX [HttpPost] public ActionResult JqAJAX(Student st) { try { return Json(new { msg = 'Successfully added ' + st.Name }); } catch (Exception ex) { throw ex; } }

JSON-Posting

JSON ist ein Datenaustauschformat, bei dem Werte in eine Zeichenfolge konvertiert werden. Die empfohlene Methode zum Erstellen von JSON besteht darin, die Methode JSON.stringify einzubeziehen. In diesem Fall haben wir definiert:

JSON.stringify(Student)

Und der Datentyp eingestellt auf:

datatype: 'json'

Und der Inhaltstyp auf application/json eingestellt

contentType: 'application/json; charset=utf-8'

Syntax:

JSON.stringify(Wert[, Ersetzung[, Leerzeichen]])

Post-Skript:

var Student = { ID: '10001', Name: 'Shashangka', Age: 31 }; $.ajax({ type: 'POST', url: '/Home/JqAJAX', data: JSON.stringify(Student), contentType: 'application/json; charset=utf-8', success: function(data) { alert(data.msg); }, error: function() { alert('Error occured!!') } });

Controller-Aktion:

wie kaufe ich golem gnt
// GET: Home/JqAJAX [HttpPost] public ActionResult JqAJAX(Student st) { try { return Json(new { msg = 'Successfully added ' + st.Name }); } catch (Exception ex) { throw ex; } }

Ergebnis der JSON-Antwort:
Gesendetes Datenformat:
{ID:1001,Name:Shashangka,Alter:31}
Empfangenes Datenformat:
{msg:Shashangka erfolgreich hinzugefügt}

Lassen Sie uns JavaScript-Objekte posten:

Um JavaScript-Objekte zu senden, müssen wir die Methode JSON.stringify(Student) weglassen und das einfache Objekt an die Datenoption übergeben. In diesem Fall haben wir definiert:

data: Student

Und der Datentyp festgelegt auf:

datatype: 'html'

Und der Inhaltstyp auf Standard gesetzt.

contentType: 'application/x-www-form-urlencoded'

Post-Skript

var Student = { ID: '10001', Name: 'Shashangka', Age: 31 }; $.ajax({ type: 'POST', url: '/Home/JqAJAX', data: Student, contentType: 'application/x-www-form-urlencoded', datatype: 'html', success: function(data) { alert(data.msg); }, error: function() { alert('Error occured!!') } });

Controller-Aktion:

var Student = { ID: '10001', Name: 'Shashangka', Age: 31 }; $.ajax({ type: 'POST', url: '/Home/JqAJAX', data: Student, contentType: 'application/x-www-form-urlencoded', datatype: 'html', success: function(data) { alert(data.msg); }, error: function() { alert('Error occured!!') } });

Ergebnis der Antwort auf JavaScript-Objekte:

Gesendetes Datenformat:
ID=10001&Name=Shashangka&Alter=31
Empfangenes Datenformat:
{msg:Shashangka erfolgreich hinzugefügt}

Lassen Sie uns JavaScript-Arrays veröffentlichen:

Um ein Array zu senden, müssen wir die Methode JSON.stringify(Student) weglassen und das einfache Objekt an die Datenoption übergeben. In diesem Fall haben wir definiert:

data: Student

Und der Datentyp festgelegt auf:

datatype: 'html'

Und der Inhaltstyp auf Standard gesetzt

bestes buch zum lernen von knoten js
contentType: 'application/x-www-form-urlencoded'

Post-Skript:

var ID = ['Shashangka', 'Shekhar', 'Mandal']; $.ajax({ type: 'POST', url: '/Home/JqAJAX', data: { values: ID }, datatype: 'html', contentType: 'application/x-www-form-urlencoded', success: function(data) { alert(data.msg); }, error: function() { alert('Error occured!!') } });

Controller-Aktion:

// GET: Home/JqAJAX [HttpPost] public ActionResult JqAJAX(string[] values) { try { return Json(new { msg = String.Format('Fist Name: {0}', values[0]) }); } catch (Exception ex) { throw ex; } }

Ergebnis der Array-Antwort:

Gesendetes Datenformat:
values[]=Shashangka&values[]=Shekhar&values[]=Mandal
Empfangenes Datenformat:
{msg:Faustname: Shashangka}

Ich hoffe, dies wird Ihnen helfen, verschiedene Datentypen und Ajax-Postings zu verstehen. Dankeschön!

#ASP.NET MVC #jquery #ajax #ASP.NET