Form data not getting in action method MVC and jquery ajax

Question

I am showing a report in my application. User have facility to filter the report. So they input filter data and click 'Go' button. On 'Go' click I use jQuery to pass the whole form to the controller action. I want to read data from database, based on values of controls in form collection and pass the data back to the form and need to reload the report with the new data.

I tried the following code.

.cshtml

<script type="text/javascript">

$(document).ready(function () {

   $('#action_button').click(function () {

       //$('#trialReportForm').attr("action", '@Url.Action("ReportFilter", "MyController")');     
      //$('#trialReportForm').submit();    
// While using above two commented lines instead of the below codes, I get the form collection correctly. BUt I cannot pass back the new data to the form. If this is the solution.. How can I pass the data back to form to reload the report?                         



       var formElements = $("#trialReportForm").serialize();

   //var data = { "parameter": $.toJSON(formElements) };

 var data = { "parameter": formElements };


$.ajax({
    url: @Url.Action(ReportFilter", "MyController"),
    type: 'POST',
    data: data,
    dataType: 'json',
    success: OnSuccess,
    error: OnFailure
});


    });


function OnSuccess(result)
{
alert(result);
}

function OnFailure(result)
{
alert(result);
}

});

controller.cs

[HttpPost]
    public JsonResult ReportFilter(string parameter)
    {
        return new DBConnect().GetFilterData(parameter);
     }

I tried below code too. But the parameter is empty

[HttpPost]
    public JsonResult ReportFilter(FormCollection parameter)
    {
        return new DBConnect().GetFilterData(parameter);
     }

I am getting the call in action method. But here the parameter is in some serialised form. But cannot deserialise it back. How can I deserialise it to form collection of some other form.? All I want is getting the value of input controls in the form.

I tried the below two codes for deserialise. but none of them is working fine. Only getting exception.

1: var serializer = new JavaScriptSerializer();
     var jsonObject = serializer.Deserialize<FormCollection>(parameter);


 2: var request = JsonConvert.DeserializeObject<FormCollection>(parameter);

Answer 1

try HTML:

Inserir o Ficheiro: Descrição: Local:

In JS:

function inserirficheiro() {

    var desc = $("#inserirficheirodescricao").val();
    var local = $("#inserirficheirolocal").val();

    var formData = new FormData();

    var file = document.getElementById("files").files[0];

    formData.append("FileUpload", file);
    formData.append("desc", desc);
    formData.append("local", local);
    formData.append("id","1");

    $.ajax({
        type: "POST",
        url: "@Url.Content("~/gestaoficheiros/NovoFicheiro/")", //+ "?desc=" + desc + "&local=" + local,
        data: formData,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function (data) {
            if (data.ok == true) {

            }
            else {

                return;
            }
        },
        error: function (error) {
            if (error.ok == undefined) {
                alert("Sessão Expirou");
                location.href = '@Url.Content("~")';
                return;
            }
            alert("!Erro, resposta do Servidor: " + error.responseText);
        }
    });

}

In MVC

    [HttpPost]
    public JsonResult NovoFicheiro(int id, string desc, string local, HttpPostedFileBase FileUpload)
    {
       // See de values....

        return Json(new  { ok = true, message = "", }, JsonRequestBehavior.AllowGet);
    }

Answer 2

The .serialize() method will serialize the form contents to application/x-www-form-urlencoded encoding. So this is exactly the same as if you never used jQuery and directly submited the form contents to the server.

So you should do exactly the same if you weren't using jQuery at all -> use the view model to which this form will be bound:

[HttpPost]
public JsonResult ReportFilter(MyViewModel model)
{
    ...
}

And assuming that $("#trialReportForm").serialize() returned the following:

foo=bar&baz=bazinga

Here's how the model might look like:

public class MyViewModel
{
    public string Foo { get; set; }
    public string Baz { get; set; }
}