Як додати цілий набір моделі до формних даних та отримати їх у MVC


75

Як передати цілий набір об'єкта моделі через дані форми і перетворити його на тип моделі в контролері?

Нижче - те, що я пробував!

Частина JavaScript:

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

потім передайте його через AJAX, це буде рядок, і якщо я перевірю, значення Request.Form["model"]результату буде однаковим, тобто воно буде отримане як рядок, і значення буде"[object object]"

Чи є спосіб передати модель через дані форми і отримати її в контролері?


Хіба я не просто відповів на це тут ?

Я опустив коментар @StephenMuecke. Ось чому я розмістив його тут ...
Guruprasad J Rao

Відповіді:


89

Якщо ваш погляд базується на моделі, і ви створили елементи керування всередині <form>тегів, тоді ви можете серіалізувати модель для FormDataвикористання

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

Сюди також входять будь-які файли, створені за допомогою <input type="file" name="myImage" .../>

і опублікуйте його назад за допомогою

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

і у вашому контролері

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

або (якщо ваша модель не містить властивості для HttpPostedFileBase)

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

Якщо ви хочете додати додаткову інформацію, яка відсутня у формі, тоді ви можете додати її за допомогою

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

2
@StephenMuecke Дуже дякую. Це справді одне з найскладніших питань щодо дзвінка в Ajax, і за допомогою вас це вирішено :) Цікаво, чи можливо це також з Html.BeginFormі Ajax.BeginFormзамість <form>? Якщо так, то які зміни слід застосувати?
Джек

2
Так, можна Html.BeginForm()включити файли із звичайною нормальною подачею. Вибачте, я трохи загубився. До якого питання це стосувалося?

2
@LuisGouveia, Ні, це не з Ajax.BeginForm(). У будь-якому випадку Ajaxметоди застаріли (вони навіть не включені в останню версію MVC) і використання $.ajax()(або його похідних, таких як $.get()і $.load()т.д., надає вам набагато більшу гнучкість.

2
@LuisGouveia, так, це ще один варіант, але чому б просто не використати FormDataвідповідно до відповіді? (або це вам потрібно для старих браузерів, які цього не підтримують?)

2
@MSH, він завантажить кілька файлів (параметр просто повинен бути, IEnumerable<HttpPostedFileBase>якщо у вас був<input type="file" multiple="multiple" ... />

21

Якщо ви хочете надіслати дані форми за допомогою Ajax, це спосіб надсилання

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) {
    }
})

На стороні сервера отримайте файли, використовуючи Request.Files
Minh Nguyen

0

З огляду на те, якщо ви використовуєте ajax,

$('#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) {

            },
        });
    });

На стороні контролера,

 [HttpPost]
 public ActionResult ActionName(ModelName modelObj)
 {
 //Some code here
 }
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.