Wie erstelle ich ein Modell MVC AJAX in ASP.NET mit 5

Question

Derzeit kann ich Modelle regelmäßig erstellen (von SettingProfile gehen/Create)

Aber wenn ich versuche, AJAX zu verwenden, um Daten in settingProfile JS Objekt gewickelt senden Es gibt HTTP 500 Internal Server Error Fehler zurück, ich glaube, dass das Problem im Datentyp liegt. Was wäre der richtige Weg, Create-Methode in AJAX aufzurufen?

Mein Code:

Modell:

public class SettingProfile 
    { 
     [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 
     public int ID { get; set; } 
     public string Name { get; set; } 
     public long? UserId { get; set; } 
     public string Url { get; set; } 
    } 

anzeigen (JS):

function saveSettingProfile() { 
     var name = prompt("Please enter profile name", ""); 
     var url = $("form").serialize(); // Not AJAX url, its a variable in model 

     var settingProfile = { 
      Name: name, 
      Url: url 
     }; 

     jQuery.ajax({ 
      url: "@Url.Action("Create", "SettingProfile")", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      method: "POST", 
      data: settingProfile 
     }).done(function (response) { 
      alert("Profile saved successfully"); 
     }).fail(function() { 
      alert("Could not save profile"); 
     }); 
    } 

Controller:

 [HttpPost] 
     //[ValidateAntiForgeryToken] 
     public ActionResult Create([Bind(Include = "Name,Url")] SettingProfile settingProfile) 
     { 
      settingProfile.UserId = 8; // TODO: get user id from session 
      if (ModelState.IsValid) 
      { 
       db.SettingProfiles.Add(settingProfile); 
       db.SaveChanges(); 
       return Json(new { success = true }); 
      } 
      return Json(new { success = false }); 
     } 

Answer 1

500 Fehler bedeutet, Ihre Server-Code abstürzt . Es könnte viele Gründe haben. Eine Sache, die ich bemerkte (was 500 Fehler verursachen könnte) ist die Art, wie Sie Daten senden.

Sie haben den contentType als "application/json" angegeben. Aber Sie senden das JavaScript-Objekt so wie es ist. So wird Ihre Anfrage Payload als etwas wie

Name=SomeNameValue&Url=SomeUrlValue gesendet und mit Ihrem aktuellen Server-Code kann das Modell Binder es nicht auf ein Objekt von SettingProfile zuordnen.

Die Lösung besteht darin, die stringifizierte Version Ihres Javascript-Objekts zu senden. Sie können dazu die Methode JSON.stringify verwenden.

jQuery.ajax({ 
       url: "@Url.Action("Create", "SettingProfile")", 
       contentType: "application/json; charset=utf-8", 
       method: "POST", 
       data: JSON.stringify(settingProfile) 
     }).done(function (response) { 
      alert("Profile saved successfully"); 
     }; 

jetzt Ihre Kundennummer wird eine Anfrage Nutzlast wie

{"Name":"SomeName","Url":"SomeUrl"} 

und Binder Modell in der Lage, senden Sie es richtig abzubilden.

Wenn es sich um einfache Daten handelt, können Sie einfach keinen benutzerdefinierten contentType angeben und das js-Objekt so senden, wie es ist. jQuery verwendet den Standardwert contentType, der "application/x-www-form-urlencoded" lautet und die Modellbindung funktioniert.

Also der folgende Code wird gut funktionieren.

jQuery.ajax({ 
       url: "@Url.Action("Create", "SettingProfile")", 
       method: "POST", 
       data:settingProfile 
     }) 

Sie können auch die Netzwerk-Registerkarte des Browsers überprüfen und die Antwort sehen vom Server für die Ajax-Aufruf zurückkommt. Wenn eine Ausnahme auftritt, können Sie dort die Details sehen.