So hängen Sie einen ganzen Modellsatz an Formulardaten an und erhalten ihn in MVC

75

Wie übergebe ich ein ganzes Set-Modellobjekt durch Formulardaten und konvertiere es in den Modelltyp in der Steuerung?

Unten ist was ich versucht habe!

JavaScript-Teil:

model = {
             EventFromDate: fromDate,
             EventToDate: toDate,
             ImageUrl: imgUrl,
             HotNewsDesc: $("#txthtDescription").val().trim(),
        };
formdata.append("model",model);

Übergeben Sie es dann durch AJAX, es wird eine Zeichenfolge sein, und wenn ich überprüfe, dass der Wert des Request.Form["model"]Ergebnisses gleich ist, wird es als Zeichenfolge empfangen und der Wert wird sein"[object object]"

Gibt es eine Möglichkeit, das Modell durch Formulardaten zu leiten und im Controller zu empfangen?

javascript c# ajax asp.net-mvc form-data Guruprasad J Rao
quelle
Habe ich nicht diese nur beantworten hier ?
Ich habe einen Kommentar @StephenMuecke hinterlassen. Deshalb habe ich es hier gepostet ...
Guruprasad J Rao

Antworten:

89

Wenn Ihre Ansicht auf einem Modell basiert und Sie die Steuerelemente in <form>Tags generiert haben , können Sie das Modell für die FormDataVerwendung serialisieren

var formdata = new FormData($('form').get(0));

Dies schließt auch alle mit generierten Dateien ein <input type="file" name="myImage" .../>

und poste es zurück mit

$.ajax({
  url: '@Url.Action("YourActionName", "YourControllerName")',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false,         
});

und in Ihrem Controller

[HttpPost]
public ActionResult YourActionName(YourModelType model)
{
}

oder (wenn Ihr Modell keine Eigenschaft für enthält HttpPostedFileBase)

[HttpPost]
public ActionResult YourActionName(YourModelType model, HttpPostedFileBase myImage)
{
}

Wenn Sie zusätzliche Informationen hinzufügen möchten, die nicht im Formular enthalten sind, können Sie diese mit anhängen

formdata.append('someProperty', 'SomeValue');

quelle
2
@ StephenMuecke Vielen Dank. Es ist wirklich eines der schwierigsten Probleme in Bezug auf Ajax-Anrufe und mit Ihrer Hilfe ist es gelöst :) Ich frage mich, ob es auch mit Html.BeginFormund Ajax.BeginFormanstelle von möglich ist <form>. Wenn ja, welche Änderungen sollten angewendet werden?
Jack
2
Ja, es ist möglich Html.BeginForm(), Dateien mit einer normalen Übermittlungsnormalen einzuschließen. Entschuldigung, ich bin ein bisschen verloren. Auf welche Frage bezog sich das?
2
@ LuisGouveia, nein es ist nicht mit Ajax.BeginForm(). In jedem Fall sind die AjaxMethoden veraltet (sie sind nicht einmal in der neuesten Version von MVC enthalten) und die Verwendung $.ajax()(oder ihrer Derivate wie usw.) $.get()bietet $.load()Ihnen viel mehr Flexibilität.
2
@LuisGouveia, Ja, das ist eine andere Option, aber warum nicht einfach FormDatagemäß der Antwort verwenden? (oder benötigen Sie dies für ältere Browser, die es nicht unterstützen?)
2
@MSH, es werden mehrere Dateien hochgeladen (der Parameter müsste nur sein, IEnumerable<HttpPostedFileBase>wenn Sie einen<input type="file" multiple="multiple" ... />
21

Wenn Sie Formulardaten mit Ajax senden möchten. Dies ist die Art des Sendens 

var formData = new FormData();

//File Upload
   var totalFiles = document.getElementById("Iupload").files.length;


for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("Iupload").files[i];

    formData.append("Document", file);
}

formData.append("NameCode", $('#SelecterID').val());
formData.append("AirLineCode", $('#SelecterID').val());


$.ajax({
        url: "/Controller/ActionName",
        type: "POST",
        dataType: "JSON",
        data: formData,
        contentType: false,
        processData: false,
        success: function (result) {
    }
})
user3824027
quelle
Auf der Serverseite erhalten Sie die Dateien mit Request.Files
Minh Nguyen
0

Wenn Sie in der Ansichtsseite Ajax verwenden,

$('#button_Id').on('click', function(){
        var Datas=JSON.stringify($('form').serialize());
        $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            url: '@Url.Action("ActionName","ControllerName")',
            data:Datas,
            cache: false,
            dataType: 'JSON',
            async: true,
            success: function (data) {

            },
        });
    });

Auf der Controllerseite

 [HttpPost]
 public ActionResult ActionName(ModelName modelObj)
 {
 //Some code here
 }
Sam
quelle