Wie würden Sie Objekte mit MVC und jQuery AJAX übergeben?

Question

Ich experimentiere endlich und versuche MVC nach Jahren von asp.net zu lernen.
Ich bin es gewohnt, asp.net AJAX PageMethods zu verwenden, wo Sie ein Objekt übergeben können, das automatisch geparst wird, egal welcher Typ der Parameter in dieser Methode ist.

Javascript:

PageMethods.AddPerson({First:"John",Last:"Doe"}); 

-Code-Behind:

[WebMethod] 
public static Result AddPerson(Person objPerson) 
{ 
    return Person.Save(); 
} 

Wie würden Sie diese MVC und jQuery?
Musste nur Strings senden und den JSON zum Objekt analysieren?

Answer 1

Das hängt davon ab, wie komplex Ihre Formulardaten sein werden. Lassen Sie uns ein jQuery-Beispiel verwenden:

$.ajax({ 
    url: '\Persons\AddPerson', // PersonsController, AddPerson Action 
    data: { First: "John", Last: "Doe" }, 
    type: 'POST', 
    success: function(data, status) 
    { 
     alert('Method called successfully!'); 
    } 
}); 

So veröffentlichen wir zwei Daten. Wenn die Person-Klasse zwei Eigenschaften mit dem Namen "First" und "Last" hat, sollte der ASP.NET MVC Model Binder keine Probleme haben, diese Formulardaten in diese Eigenschaften zu übernehmen (alles andere ist voreingestellt).

Natürlich könnten Sie immer einen benutzerdefinierten Modellordner für den Personentyp erstellen, und dann können Sie die gewünschten Formularwerte verwenden und sie in eine beliebige Eigenschaft einfügen oder eine andere Art von Logik aufrufen.

Answer 2

Wenn Sie ein Formular über Ajax an eine Aktionsmethode auf Ihrem Controller POST senden, beginnt die ModelBinder-Architektur, die gebuchten Formularwerte in Geschäftsobjekte für Sie zu analysieren. Sie können Modelbinding auf verschiedene Arten nutzen.

public ActionResult MyAction(MyObject obj) 
{ 
} 

Im obigen Beispiel versucht der Modelbinder implizit ein MyObject aus den Informationen in der Anforderung empfangen zu erstellen.

public ActionResult MyAction(FormCollection stuff) 
{ 
    MyObject obj = new MyObject(); 
    TryUpdateModel(obj); 
} 

Hier versuchen wir explizit die verbannten Formulardaten an ein Objekt zu binden, das wir erstellt haben. Der ModelBinder versucht, die angegebenen Werte mit den Eigenschaften des Objekts abzugleichen.

In beiden Fällen können Sie das Objekt ModelState abfragen, um festzustellen, ob bei der Übersetzung der gebuchten Werte in das Objekt Fehler aufgetreten sind.

Für eine Einführung in die Modellbindung, see here.

Für erweiterte Modellbindungen an Listen und Wörterbücher, see Phil Haack's post.

Answer 3

Man könnte so etwas tun:

var person = {}; 
person["First"] = $("#FirstName").val(); 
person["Last"] = $("#LastName").val(); 

$.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "/Admin/AddPerson", 
     data: JSON.stringify(person), 
     dataType: "json", 
     success: function(result) { 

     }, 
     error: function(result) { 

     } 
}); 

und dann auf Ihrem Admin-Controller:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult AddRelease(Person p) 
{ 
    // Code to add person    

} 

Die JSON.stringify Methode von here zur Verfügung steht. Sie könnten auch ein Modell anstelle des Person-Objekts als Parameter verwenden, damit Sie alle Ihre Validierungen verarbeiten können.

Answer 4

Ich habe einen Beitrag, der AJAX-Aufrufe an ASP.NET MVC-Aktionsmethoden behandelt. Es umfasst die folgenden Kombinationen:

• HTTP GET, POST
• jQuery Methoden $ .get, $ .getJSON, $ .post
• Parameter auf die Aktionsmethoden Senden
• Return-Parameter (Strings und JSON) aus den Aktionsmethoden
• Beitragssschreiben Daten
• eine Teilansicht MVC über Ajax Loading-

AJAX calls to ASP.NET MVC action methods using jQuery

Answer 5

Ich glaube, ich bin ein Betrüger und wie folgt vor:

 $("#ProgressDialog").dialog({ 
      autoOpen: false, 
      draggable: false, 
      modal: true, 
      resizable: false, 
      title: "Loading", 
      closeOnEscape: false//, 

      // open: function() { $(".ui-dialog-titlebar-close").hide(); } // Hide close button 
     }); 
     $("form").live("submit", function (event) { 
       event.preventDefault(); 
       var form = $(this); 
       $("#ProgressDialog").dialog("open"); 
       $.ajax({ 
        url: form.attr('action'), 
        type: "POST", 
        data: form.serialize(),//USE THIS to autoserialize! 
        success: function (data) { 
         $("#dialog").dialog({height:0}); 
        }, 
        error: function (jqXhr, textStatus, errorThrown) { 
         alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')"); 
        }, 
        complete: function() { 
         $("#ProgressDialog").dialog("close"); 

        } 
       }); 
      }); 
     }); 

<div id="ProgressDialog" style="text-align: center; padding: 50px;"> 
    <img src="@Url.Content("~/Content/ajax-loader.gif")" width="128" height="15" alt="Loading" /> 
</div>