Объект Formdata преобразуется в строку запроса в ASP.NET MVC

Question

Я отправляю данные формы данных на контроллер MVC, но когда я отправляю запрос, иногда данные формы преобразуются в строку запроса или пропускают некоторые значения.

Когда я отлаживаю свой код в Chrome, запрос отправляется на сервер, но иногда он не включает cityid и изображение в запросе.

Это моя функция добавления jQuery:

   function add()
    {

        var formdata = new FormData(); 
        var imagefile = $('#imageuploaded')[0].files[0];

        formdata.append('name', $('#name').val());
        formdata.append('lastname', $('#lastname').val());
        formdata.append('address', $('#address').val());
        formdata.append('imageuploaded', imagefile);

        for (var i = 0; i < formvalues.cityid.length; i++)
        {
            formdata.append('cityid['+i+']', formvalues.cityid[i]);

        }

        $.ajax({

            url: "/Practice/insertemployee",
            type: "Post",
            contentType: false,
            processData: false,
            data: formdata,
            success: onsccessinsert,
            error:onerrorinsert

        });
    }

Мой контроллер:

 public JsonResult insertemployee(People people,HttpPostedFileBase 
imageuploaded)
    {
         var name= imageuploaded.FileName;
         var folderpath = Server.MapPath(@"\Images\");
        string guid = new Guid().ToString();
        var fullpath = folderpath +guid+ name;
        people.fullimagepath = fullpath;
        people.shortimagepath=@"\Images\"+guid+name;
        imageuploaded.SaveAs(fullpath);
        return Json(PracticedbcontexController.insertintodb(people), JsonRequestBehavior.AllowGet);
    }

И, наконец, разметка представления:

<form id="peopleform"   enctype="multipart/form-data" >
<div class="form-group">
        <input type="hidden" id="id" />
        <label>name</label>
        <input type="text" class="form-control" id="name" name="name" />
    </div>
    <div class="form-group">
        <label>lastname</label>
        <input type="text" class="form-control" id="lastname" name="lastname" />
    </div>
    <div class="form-group">
        <label>address</label>
        <input type="text" class="form-control" id="address" name="address" />
    </div>
    <select id="listofcities"  onchange="citiesselected()">
        <option value="1">karachi</option>
        <option value="2">hyderabad</option>
        <option value="3">larkana</option>
    </select>
    <div class="form-group">
        <input type="file" id="imageuploaded" name="imageuploaded" class="form-control" />
    </div>
    <ul id="cityid"></ul>
    <button id="submitform" class="btn btn-primary" onclick="add()">submit</button>
</form>

Когда я отправляю запрос на сервер, запрос преобразуется в строку запроса вместо объекта formdata. Когда я отлаживаю и отправляю запрос, кажется, что отсутствуют некоторые данные. Я проверил все значения, прикрепленные к formdata.

Answer 1

У меня есть несколько предложений: во-первых, вы можете захотеть использовать более общий подход, поэтому вы добавляете peopleView.cshtml (где вы помещаете свою форму) и peopleController.cs и peopleViewModel.cs (где вы инкапсулируете свои данные, теперь у вас естьЛюди классные).Тогда у вас просто есть, и это должно творить чудеса.Однако я не уверен в части ввода файла.Итак, как я понял, если вы используете FormData (), ваш контроллер должен принимать каждое значение в качестве параметра.Таким образом, либо вы помещаете каждое или ваши значения в отдельный параметр, например

public JsonResult insertemployee(string name, string lastname, HttpPostedFileBase 
imageuploaded, etc...)

, либо инкапсулируете на стороне javascript все данные, связанные с людьми, в объект people:

    var formdata = new FormData(); 
    var imagefile = $('#imageuploaded')[0].files[0];

    var people = {
       'name' = $('#name').val(),
       'lastname' = $('#lastname').val()
    };

    formdata.append('people', people);
    formdata.append('imageuploaded', imagefile);

Кстати, у вас есть 'Параметры name и lastname, переименуйте name в firstname для большей согласованности.

Дополнительно:

Так что мое лучшее предположение о длинной строке get заключается в том, что после вызова post с некоторой ошибкой он пытается вернуться и заполнить форму методом get.Вот почему после отправки вы вернетесь к форме, и у URL будут все значения.У вас должен быть контроллер с двумя методами / действиями (они могут иметь одинаковые имена, но иметь разные атрибуты методов [HttpGet] и [HttpPost]).При публикации действий в случае ошибки вы должны вернуть View () с вашей опубликованной моделью в качестве параметра.Я предлагаю вам взглянуть на некоторые учебные пособия по MVC, чтобы лучше понять и изучить хорошие шаблоны и соглашения об именах.

Answer 2

Может быть, это поможет вам:

var url = "/Practice/insertemployee";

var imagefile = $('#imageuploaded')[0].files[0];
var name = $('#name').val();
var lastname = $('#lastname').val();
var address = $('#address').val();

var formdata = new FormData();
formdata.append('name', name);
formdata.append('lastname', lastname);
formdata.append('address', address);
formdata.append('imageuploaded', imagefile, imagefile.name);

for (var i = 0; i < formvalues.cityid.length; i++)
{
    formdata.append('cityid['+i+']', formvalues.cityid[i]);
}

$.ajax({
    url: url,
    type: "POST",
    data: formData,
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success: onsccessinsert,
    error: onerrorinsert
});

Для добавления файла используйте эту конструкцию:

formdata.append('imageuploaded', imagefile, imagefile.name);

и установите mimetype в:

mimeType: "multipart/form-data",

Это поможетвы с отсутствующими файлами.