MVC partial page Updates
Habe ich ein MVC-Projekt, wo ich ein Formular mit Feldern kann der Benutzer eingeben und speichern. Auf derselben Seite habe ich eine Tabelle, die zeigt eine kurze Auflistung der Informationen, die der Benutzer gerade gespeichert. Das problem ich habe versucht, zu aktualisieren, nur die Tabelle nach dem speichern und nicht eine ganze Seite aktualisieren.
Ist das möglich in jquery oder MVC? Wenn ja hat jemand ein Beispiel.
Hier ist, was die action im controller sieht wie folgt aus:
public ActionResult RefreshList()
{
string _employeeID = Request.QueryString["empIDSearch"];
this.ViewData["coursehistorylist"] = _service.ListCoursesByEmpID(_employeeID);
return View("CourseHistoryList");
}
Die Funktion in den Blick: (und das ist, wo ich bin verwirrt darüber, wie zum aktualisieren der Tabelle)
$.ajax({
url: "/Home/RefreshList",
type: "POST",
success: function(result) {
alert("got here");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError + " " + ajaxOptions);
}
});
Greifen die ViewData von der regler:
<% foreach (var item in
(IEnumerable<EdMVC.Models.tblEdCourse>)ViewData["coursehistorylist"])
{
%>
Dank.
- Geben Sie den code, den Sie verwenden, um das Formular abschicken und es sollte leicht sein, Ihnen zu helfen.
- aktualisiert mit code-Beispiele
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hinweis: Als ich dies schrieb, MVC war nur in der version 1, allerdings meistens relevant, nun gibt es bestimmte Teile von diesem post, die nicht für die späteren Versionen von MVC.
Dies ist eine mehr in die Tiefe version von NickLarsen Antwort, leider lief ich aus dem Raum in den Kommentaren, so fügte Sie als Antwort.
Dies dürfte wohl eine "GET" - Anforderung, wie Sie nicht senden, werden alle Daten auf dem server auf diese Anfrage. jQuery wird eigentlich diese arbeiten für sich selbst, wenn Sie die $.ajax-request, so können Sie es weglassen, wie ich es schon unten. Wenn explizit die Notwendigkeit eines "POST" action, sicher sein, um diese Unterscheidung zu machen.
In der ajax-Aufruf, den Sie hier machen, ist das Ergebnis-variable wird der string, der vom server zurückgegeben und angezeigt werden können und angewendet als solche. Wenn Sie möchten, können Sie auch deaktivieren Sie diese in ein jQuery-Objekt und filter gegen Sie, aber das ist aus dem Anwendungsbereich dieser Frage.
Ihre $.ajax-code würde müssen aktualisiert werden, um die folgenden:
Den oben genannten code einfügen das Ergebnis wird in einem element mit der id "myDivId", wenn der server korrekt antwortet.
Dass div müssten die folgenden id-Attribut, aber der Inhalt des div und die anderen Attribute irrelevant sind.
Den obigen Beispielen wird die Funktion ganz von selbst, solange die controller-action wird Ihre url verweist, der einen Wert zurückgibt.
Auf einem Ganz Anderen Hinweis...
Folgende ist komplett zu machen, Ihr Leben mit MVC einfacher, auch wenn es nicht wirklich relevant für die Frage es wird nicht passen in einen Kommentar und verdient erwähnt zu werden.
Zur Senkung der namespace-Deklaration, fügen Sie den namespace auf das web.config-Datei, unter der
<pages><namespaces>
Knoten, fügen Sie den folgenden:<add namespace="EdMVC.Models"/>
Sie sollten dies auch tun, mit anderen namespaces, die Sie zugreifen müssen regelmäßig, da dies ermöglicht es Ihnen den Zugriff auf Ihre Objekte leicht aus dem Blick.
Auch in diesem Fall sollten Sie wahrscheinlich dem senden der Daten an die Ansicht über die Ansicht "Modell" Wert, wenn überhaupt möglich, eher als das ViewData-dictionary, die Sie immer benötigen, zu werfen zurück, wenn verwendet.
Dies zu tun, ändern Sie Ihre Rücksendung aus:
zu:
Von hier aus müssen Sie zum erstellen einer stark typisierten view, dies zu tun, ersetzen Sie das inherits-Attribut oben in Ihrem Blick zu:
Mit diesen Schritten können Sie nun Zugriff auf es als ein stark typisiertes Objekt etwa so:
Sind, oder ob es ein einzelnes Objekt ist, einfach
<%= Model.Id %>
Dies sollte Ihnen ermöglichen, zu schneiden nach unten auf Ihre casting-und sparen Ihnen jede Menge Zeit auf lange Sicht, wenn Sie eine der oben keinen Sinn oder ist schwer zu verstehen, lassen Sie mich wissen, und ich werde wieder Wort.
Der einzige Schritt, die Ihnen fehlt, ersetzen Sie die vorhandene Tabelle mit den neuen Daten, die zurückgegeben wird, in der success Funktion.
Für ein wenig mehr Informationen, sollten Sie wickeln den Anruf zu dem partial view in der action view mit einem div hat eine id. Dann rufen Sie die
.html(newData)
Funktion auf die div in Ihrem Erfolg Methode.var myTable = $('myDivId');
bekommt man ein jquery-handle für das div, dann rufen SiemyTable.html(newData);
.Dazu können Sie in web-Formularen, die es klingt wie Sie verwenden, indem Sie einfach mit einem update panel.
Jedoch...
MVC ist ein Idealer Ansatz, weil es entfernt die enge Kopplung zwischen der Präsentationsschicht einer Webanwendung, und der eigentliche code, der zur Abwicklung der Benutzerinteraktion. Allerdings, wenn Sie investiert in eine webforms-Lösung, Implementierung von jquery können noch gemacht werden...
JQuery ist eine JavaScript-Bibliothek, mit der Sie die "Abfrage" der DOM von web-Seiten, um den Zugriff auf die verschiedenen Elemente auf dieser Seite. Es hat auch praktische Funktionen für das tun asynchrone Anfragen an den server.
In web-Formulare, die Sie erstellen können ein webservice zum speichern der Eingabe und return eine neue Zeile in der Tabelle zu tun, die teilweise Aktualisierung. Sie müssen auch lernen, wie man JSON zurückgeben von der webservice-um es einfach zu handhaben JavaScript.
Folgenden sind einige hilfreiche Links:
Rückkehr JSON aus .NET-Web-Service:
http://blog.davebouwman.com/index.php/2008/09/posting-data-to-aspnet-json-services-with-dojo/
Verbrauchen .NET Web Service mit JQuery:
http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/