Beispiel:
Modell:
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}
Regler:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("Thanks", "text/html");
}
}
Aussicht:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
und hier ist ein besseres (aus meiner Sicht) Beispiel:
Aussicht:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Html.BeginForm())
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
index.js
::
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#result').html(result);
}
});
}
return false;
});
});
Dies kann mit dem jQuery-Formular-Plugin weiter verbessert werden .
Ich denke, dass alle Antworten einen entscheidenden Punkt verfehlt haben:
Wenn Sie das Ajax-Formular verwenden, damit es sich selbst aktualisieren muss (und NICHT ein anderes Div außerhalb des Formulars), müssen Sie das enthaltene Div AUSSERHALB des Formulars platzieren. Zum Beispiel:
Andernfalls werden Sie wie @David enden, wo das Ergebnis auf einer neuen Seite angezeigt wird.
quelle
UnobtrusiveJavaScriptEnabled
nirgendwo wahr gesetztIch habe Darins Lösung irgendwann zum Laufen gebracht, aber zuerst ein paar Fehler gemacht, die zu einem ähnlichen Problem wie David (in den Kommentaren unter Darins Lösung) führten, bei dem das Ergebnis auf einer neuen Seite veröffentlicht wurde.
Da ich nach der Rückgabe der Methode etwas mit dem Formular tun musste, habe ich es zur späteren Verwendung gespeichert:
Diese Variable hatte jedoch nicht die Eigenschaften "action" oder "method", die im Ajax-Aufruf verwendet werden.
Stattdessen müssen Sie die Variable "this" verwenden:
quelle
jQuery
Objekt mit dem Formular als Selektor ist.form[0]
hätte die Eigenschaften. Es wird auch empfohlen,jQuery
Variablen ein Präfix$
voranzustellen, um sie leichter identifizieren zu können.Die Lösung von Darin Dimitrov hat mit einer Ausnahme für mich funktioniert. Als ich die Teilansicht mit (absichtlichen) Validierungsfehlern übermittelte, wurden im Dialogfeld doppelte Formulare zurückgegeben:
Um dies zu beheben, musste ich das Html.BeginForm in ein div einschließen:
Als das Formular gesendet wurde, habe ich das div in der Erfolgsfunktion gelöscht und das validierte Formular ausgegeben:
quelle
Partial Views
, um die Erstellungsfunktion unter der Indexseite zu rendern. Ich kann alle Validierungsnachrichten in der Teilansicht erhalten. Wenn diesCreate
jedoch erfolgreich ist, wird der Index zweimal angezeigt. Ich habe keineHtml.BeginForm
in meiner Indexansicht.UpdateTargetId = "myForm"
stattdessenWenn keine Datenüberprüfung durchgeführt wurde oder der Inhalt immer in einem neuen Fenster zurückgegeben wird, stellen Sie sicher, dass sich diese drei Zeilen oben in der Ansicht befinden:
quelle
Beispiel
// Im Modell
// In PartailView //PartailView.cshtml
In der Ansicht Index.cshtml
Im Controller
Sie müssen ViewName und Model an die RenderPartialViewToString-Methode übergeben. Es gibt Ihnen die Ansicht mit Validierung zurück, die Sie im Modell angewendet haben, und hängt den Inhalt in "targetId" div in Index.cshtml an. Auf diese Weise können Sie die Validierung anwenden, indem Sie RenderHtml der Teilansicht abfangen.
quelle
Ajax-Formulare arbeiten asynchron mit Javascript. Daher ist es erforderlich, die Skriptdateien zur Ausführung zu laden. Obwohl es sich um einen kleinen Leistungskompromiss handelt, erfolgt die Ausführung ohne Postback.
Wir müssen den Unterschied zwischen dem Verhalten von HTML- und Ajax-Formularen verstehen.
Ajax:
Das Formular wird nicht umgeleitet, auch wenn Sie eine RedirectAction () ausführen.
Führt Speicher-, Aktualisierungs- und Änderungsvorgänge asynchron aus.
Html:
Leitet das Formular um.
Führt Operationen sowohl synchron als auch asynchron aus (mit etwas zusätzlichem Code und Sorgfalt).
Demonstrierte die Unterschiede mit einem POC im folgenden Link. Verknüpfung
quelle
Vor dem Hinzufügen der Ajax.BeginForm. Fügen Sie Ihrem Projekt die folgenden Skripte in der angegebenen Reihenfolge hinzu:
Nur diese beiden reichen aus, um eine Ajax-Operation durchzuführen.
quelle