모델 세트를 폼 데이터에 추가하여 MVC에서 얻는 방법

모델 세트를 폼 데이터에 추가하여 MVC에서 얻는 방법

전체 모델 개체를 폼 데이터를 통해 전달하고 컨트롤러에서 모델 유형으로 변환하려면 어떻게 해야 합니까?

다음은 내가 시도한 것이다!

JavaScript 부품:

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

AJAX를 통해 전달하면 문자열이 됩니다.이 값을 체크하면Request.Form["model"]결과는 같습니다.즉, 문자열과 값이 같은 값으로 수신됩니다."[object object]"

모델을 폼데이터에 통과시켜 컨트롤러로 수신할 수 있는 방법이 있습니까?

뷰가 모델을 기반으로 하고 내부에 컨트롤을 생성한 경우<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');

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

Pure Javascript를 사용하는 경우,

<form id="FileUploadForm">
   <input id="textInput" type="text" />
  <input id="fileInput" type="file" name="fileInput" multiple>
  <input type="submit" value="Upload file" />
</form>

JS

document.getElementById('FileUploadForm').onsubmit = function () {

var formdata = new FormData(); //FormData object

var fileInput = document.getElementById('fileInput');

//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
    //Appending each file to FormData object
    formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
//text value
formdata.append("textvalue",document.getElementById("textInput").value);

//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Home/UploadFiles');
xhr.send(formdata); // se
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        //on success alert response
        alert(xhr.responseText);
    }
  }
  return false;
}  

C# 컨트롤러에서는 다음과 같은 값을 얻을 수 있습니다.

[HttpPost]
public ActionResult UploadFiles(YourModelType model, HttpPostedFileBase fileInput)
{
      //save data in db
}

참조: MVC에서 jQuery Ajax 또는 Javascript를 사용한 파일 업로드

뷰 사이드에서는 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
 }

언급URL : https://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc