Bdtjtk

I am sending formdata data to an MVC controller, but when I send the request sometimes the formdata is converted into querystring or missing some values.

When I debug my code in Chrome the request is sent to the server but sometimes it will not include cityid and image in the request.

This is my jQuery add function:

   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



        });

    }

My controller:

 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);

    }

And finally, the view markup:

<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>

When I send the request to the server, the request is converted into query string instead of formdata object. When I debug and send the request it appears to be missing some data. I have inspected all the values are attached to formdata.

I have few suggestions: First is that you may want use more generic approach, so you add peopleView.cshtml (where you put your form) and peopleController.cs and peopleViewModel.cs (where you encapsulate your data, now you have People class). Then you just have and it should do the magic. However I not sure about file input part. So as I understood if you using FormData() your controller must take each value as parameter. So either you put each or your values to separate parameter like

public JsonResult insertemployee(string name, string lastname, HttpPostedFileBase 

imageuploaded, etc...)

or you encapsulate on javascript side all people related data into people object:

    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);

By the way you have 'name' and 'lastname' params, rename 'name' to 'firstname' to be more consistent.

Additional:

So my best guess about long get string is that after calling post with some error it tries to return and fill form with get method. That is why after submitting you get back to form and url have all values. You should have controller with two methods/actions (they may have same name but have different method attributes [HttpGet] and [HttpPost]). In post action in case of error you should return View() with your posted model as parameter. I suggest you to look at some MVC tutorials to get better understanding and study good patterns and naming conventions.

Maybe this help you:

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

});

To adding file use this construction:

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

and set mimetype to:

mimeType: "multipart/form-data",

This will help you with missing files.