ASP.Net MVC-Modell Bindung an Javascript

Question

Die Frage ist ziemlich einfach: Ich verwende @Html.EditorForModel() Felder für mein Modell zu generieren. Dann füllt der Benutzer alle diese Felder und ich möchte dieses Feld über AJAX senden, weil ich mehrere Server-Dienste ohne Seite neu laden sollte.

Ich googelte mehrere Ansätze, aber es scheint, dass es keinen Standard Weg gibt, solche Dinge zu tun. Ich meine, ich habe kein Objekt auf der Client-Seite, das ein Modell darstellt. Ich fand eine einzige Bibliothek ruft JSModel (link), aber es scheint nicht zu funktionieren. Mein Code für jetzt ist:

@model Student 

<script src="@Url.Content("~/scripts/jquery-1.12.2.min.js")" type="text/javascript" async="async"></script> 
<script src="@Url.Content("~/scripts/Requester.js")" type="text/javascript" async="async"></script> 
<script src="@Url.Content("~/scripts/jsmodel.js")" type="text/javascript"></script> 

<script type="text/javascript"> 
    var requester = new Requester(@Html.Raw(Json.Encode(new Student()))); 

    function SendSignupRequest() { 
     requester.SendSignupRequest(); 
    } 
</script> 

<h2>Student</h2> 
<div> 
    @Html.EditorForModel() 
</div> 
<input type="button" value="Send" onclick="SendSignupRequest()"/> 

Requester.js:

function Requester(rawModel) { 
    this.modelObj = new JSModel(rawModel); 

    this.SendSignupRequest = function() { 
     var model = modelObj.refresh(); 
     var val = model.prop("Name"); 
     alert(val); 
    } 
} 

Gibt es eine einfache Möglichkeit, ein Modellobjekt in JSON serialisiert und an den Server zu senden, ohne manuell ein Objekt mit Millionen von der Konstruktion document.getElementById?

Answer 1

Ansicht

@using (Html.BeginForm("action", "controller", FormMethod.Post, new { @class = "form-horizontal form-compact ", role = "form", id = "form1" })) 
    { 

    } 

Java Script

var formdata = $("#form1").serializeArray(); 

$.ajax({ 
       url: url, 
       type: 'POST', 
       data: formdata, 
       success: function (data) { 
} 

-Controller

public ActionResult action(Model model) 
{ 
//access data here 
} 

Answer 2

Yes you can use form serialize using Jquery 

var formData = $('#form').serializeObject(); 
    $.extend(formData, { Contacts : myContacts}); 
    $.extend(formData, { Address : myAddress}); 
    var result = JSON.stringify(formData); 

    $('#formHiddenField').val(result); 

    then submit form using: 
     $.ajax(
    url: @Url.Action("post url") 
    data: myForm.serialize(), 
    dataType: 'json', 
    type: 'POST', 
    success: function(){ 
    }) 

Answer 3

Sie können Ihr Formular ein JSON-Objekt mit jQuery serialisiert:

var data = $('form').serialize(); 

(Dies würde natürlich bedeuten, dass Ihre Formularelemente in einem form Verpackung, die eigentlich sowieso geschehen soll.)

Dann übergeben Sie einfach das data Objekt an den Server in der POST-Anfrage. Etwas so einfaches wie:

$.post('some/url', data, function(response) { 
    // success callback 
}); 

ohne manuell ein Objekt mit Millionen von document.getElementById Konstruktion

Beachten Sie, dass, wenn Ihr Objekt Millionen von Feldern hat, dann kann man sehr gut begegnen Probleme hier.

Answer 4

Warum nicht Ajax.BeginForm() für Ihre Zwecke. Ich glaube, Modellbindung funktioniert automatisch.