10 Stimmen

ASP.NET MVC 2 das Laden der Teilansicht mit jQuery - keine Client-seitige Validierung

Ich verwende jQuery.load(), um eine Teilansicht zu rendern. Dieser Teil sieht so aus:

$('#sizeAddHolder').load(
                '/MyController/MyAction', function () { ... });

Der Code für Aktionen in meinem Controller sieht wie folgt aus:

    public ActionResult MyAction(byte id)
    {
        var model = new MyModel
        {
            ObjectProp1 = "Some text"
        };

        return View(model);
    }

    [HttpPost]
    public ActionResult MyAction(byte id, FormCollection form)
    {
        // TODO: DB insert logic goes here

        var result = ...;

        return Json(result);
    }

Ich gebe eine Teilansicht zurück, die ungefähr so aussieht:

<% using (Html.BeginForm("MyAction", "MyController")) {%>
    <%= Html.ValidationSummary(true) %>

    Objekt erstellen

        Felder

            <%= Html.LabelFor(model => model.ObjectProp1) %>

            <%= Html.TextBoxFor(model => model.Size.ObjectProp1) %>
            <%= Html.ValidationMessageFor(model => model.ObjectProp1) %>

        div class="editor-label">
            <%= Html.LabelFor(model => model.ObjectProp2) %>

            <%= Html.TextBoxFor(model => model.ObjectProp2) %>
            <%= Html.ValidationMessageFor(model => model.ObjectProp2) %>

<% } %>

Die Client-seitige Validierung funktioniert in diesem Fall nicht. Außerdem ist das Skript, das Validierungsnachrichten enthält, auch nicht in der zurückgegebenen Ansicht enthalten. Beide Eigenschaften in meiner Modelklasse haben die Attribute Required und StringLength. Gibt es einen Weg, die Client-seitige Validierung in einer Ansicht auszulösen, die wie diese geladen wurde?

7voto

Flexo Punkte 2456

Zunächst sollten Sie eine partielle Ansicht zurückgeben und nicht eine Ansicht.

return PartialView(model);

Zweitens, versuchen Sie, diese partielle Ansicht mit AJAX zu laden? In diesem Fall möchten Sie möglicherweise jquery.ajax verwenden

function ajax_update(path)
  $.ajax {
    url: path,
    success: function(result) {
      $('#sizeAddHolder').html(result);
    }
  return false;
}

2voto

Rafael Mueller Punkte 5886

Sie sollten dataType beim ajax-Aufruf verwenden

function ajax_update(path)
  $.ajax {
    url: path,
    dataType: "html",
    success: function(result) {
      $('#sizeAddHolder').html(result);
    }
  return false;
}

Von jQuery-Dokumentation:

dataType Standardmäßig: Intelligente Vermutung (xml, json, script oder html)

Der Typ der Daten, die Sie vom Server erwarten. Wenn keiner angegeben ist, wird jQuery intelligent versuchen, die Ergebnisse zu erhalten, basierend auf dem MIME-Typ der Antwort (ein XML-MIME-Typ wird XML ergeben, in 1.4 wird JSON ein JavaScript-Objekt ergeben, in 1.4 wird script das Skript ausführen und alles andere wird als Zeichenfolge zurückgegeben). Die verfügbaren Typen (und das Ergebnis, das als erstes Argument an Ihren Erfolgsrückruf übergeben wird) sind:

* "xml": Gibt ein XML-Dokument zurück, das über jQuery verarbeitet werden kann.
* "html": Gibt HTML als einfachen Text zurück; enthaltene Skripttags werden ausgewertet, wenn sie in das DOM eingefügt werden.
* "script": Bewertet die Antwort als JavaScript und gibt sie als einfachen Text zurück. Deaktiviert das Zwischenspeichern, es sei denn, die Option "cache" wird verwendet. Hinweis: Dadurch werden POST-Anfragen für Anfragen an entfernte Domains in GETs umgewandelt.
* "json": Bewertet die Antwort als JSON und gibt ein JavaScript-Objekt zurück. In jQuery 1.4 wird die JSON-Daten streng geparst; jedes fehlerhafte JSON wird abgelehnt und ein Syntaxfehler wird geworfen. (Siehe json.org für weitere Informationen zur korrekten JSON-Formatierung.)
* "jsonp": Lädt einen JSON-Block mit JSONP. Fügt Ihrem URL ein zusätzliches "?callback=?" am Ende hinzu, um den Rückruf anzugeben.
* "text": Eine einfache Textzeichenfolge.

1voto

tpeczek Punkte 23457

Ich bin mir nicht sicher, ob Sie noch nach einer Antwort auf Ihre Frage suchen, aber ich habe einen Beitrag darüber geschrieben, wie AJAX-geladene Formulare mit Client-seitiger Validierung in ASP.NET MVC 2 funktionieren:

http://tpeczek.com/2010/04/making-aspnet-mvc-2-client-side.html

1voto

jcruz Punkte 718

Das Problem besteht darin, dass das Formular, das mit Ajax geladen wird, nie bei der Microsoft-Validierung registriert wird. Um dies zu lösen, rufen Sie die folgende Funktion Sys.Mvc.FormContext._Application_Load auf.

function ajax_update(path)
  $.ajax {
    url: path,
    success: function(result) {
      $('#sizeAddHolder').html(result);
      Sys.Mvc.FormContext._Application_Load();
    }
  return false;
}

Das sollte das Problem beheben. Stellen Sie außerdem sicher, dass die über Ajax geladenen Formulare eindeutige IDs haben. Andernfalls schlägt die Validierung fehl.

Vermeiden Sie die Verwendung von load(). Dadurch werden alle Skripte entfernt, die in der Antwort geladen wurden.

1voto

Boppster Punkte 26

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X