101 MVC3 mit Json und JQuery
101 Beispiel
Das ganze ist ein einfaches kleines Beispiel mit dem MVC3 /Json und JQuery.
Ich habe mit dem Visual Web Express ein Default MVC3 Web Projekt erstellt mit Razor Unterstützung. Obwohl wir in diesem Beispiel die Razor Engine nicht brauchen. Weil wir nur aktive Elemente erstellen mit JavaScript (also JQuery).
Im Index.cshtml habe ich eine kleine Tabelle erstellt und einen Link eingebaut, wo wir verwenden um unser JQuery Script anzukicken. Ich habe das ganze sehr vereinfacht und allen Spalten eine eindeute ID verpasst. Mit dem ID Selektor werden wir über das JQuery Script die Daten einspielen.
Das ganze sieht in meinem Fall so aus:
jQueryBasic101 001
Zudem habe ich im _Layout.cshtml einen Verweis erstellt für unser JQuery File Json001.js
jQueryBasic101-002
Im Projekt Ordner Model erstellen wir ein Klasse mit dem Namen vPerson.cs (v steht bei mir für View, sozusagen ein Model View). Die Klasse ist unser Daten Container wo wir über Linq bearbeiten werden.
namespace Json001.Models
{
public class vPerson
{
public int tblPersonID { get; set;}
public string tblPersonName { get; set;}
public int tblPersonAge { get; set;}
public string tblPersonMail { get; set;}
public string tblPersonBirthday { get; set;}
}//end of class
}//end of namespace
Im Controller Ordner verwenden wir den default Projekt Controller mit dem Namen HomeController.cs. Dort ergänzen wir eine zusätzliche Methode, wo wir einen Parameter übergeben mit der Post Methode und als Rückgabe Wert liefert die Methode ein Json Objekt.
[HttpPost]
public ActionResult Index(int ID)
{
if(ID == 10){
var person = new vPerson()
{
tblPersonID = ID,
tblPersonAge = 15,
tblPersonBirthday = DateTime.Parse("01/01/1974").ToShortDateString(),
tblPersonMail = "glenn@json.dev",
tblPersonName = "daniel glenn"
};
return Json(person);
}
return View();
}
Wir prüfen den Parameter und erstellen ein vPerson Model, wo wir dann über den Linq Syntax abspitzen. Jetzt schauen wir uns noch unser JQuery Script an. Im Ordner Scripts in unserem Projekt erstellen wir jetzt ein neues Javascript File mit dem Namen Json001.js.
$(function () {
$("#ReadValues").click(function () {
// AJAX Post mit Param Demo
$.post("/", { "ID": 10 },
function (data) {
// verarbeiten der Daten und ans Tag binden
$('#tblPersonID').text(data.tblPersonID);
$('#tblPersonAge').text(data.tblPersonAge);
$('#tblPersonBirthday').text(data.tblPersonBirthday);
$('#tblPersonMail').text(data.tblPersonMail);
$('#tblPersonName').text(data.tblPersonMail);
},"json");
});
});
Die ID ReadValues erwartet ein Click Event. Der Event löst ein AJAX Post aus mit einem Parameter ID wo den Wert 10 hat. Das ganze wird an sich selber gesendet. Wir könnten auch explizit den Verweis auf den HomeController angeben auf die Methode Index mit /Home/Index. Der Rückgabe Wert soll ein Json Daten Objekt sein.
Default Ansicht:
101-MVC3-Json-JQuery-001
nach dem Event:
101-MVC3-Json-JQuery-002
Hier das kleine Projekt: 101-MVC3-Json-JQuery-001
Gruss @all
Ebook Downloads…
[...]on WordPress blogs especially you can find many different types of themes such as found on[...]…
OpenOffice Download…
[...]following are a handful of hyper-links to internet pages which we connect to as we feel they are definitely worth browsing[...]…