Using jQuery AJAX to POST multiple variables to an ASP .NET MVC Controller

Question

I have a controller to which I want to POST 2 items via AJAX: a complex object (my entire viewmodel), and an integer (the id of a particular row). This particular project is in VB .Net, but if someone can answer this in C#, that would be fine (I know both languages fairly well). Either language would work.

I can POST the viewmodel to the controller without any problem. Once I try to include the integer, the controller can no longer route the request. I know that it is probably an issue of how I am formatting the data that I POST, but I haven't been able to figure out exactly what I need to do.

My controller action looks like:

<HttpPost>
Public Function UpdateFromDate(viewModel As RetirementBenefitEstimateViewModel, estimateId) As ActionResult
    If viewModel IsNot Nothing AndAlso viewModel.Estimate IsNot Nothing AndAlso viewModel.Estimate.RetirementBenefitsEstimates IsNot Nothing Then

      For Each item In viewModel.Estimate.RetirementBenefitsEstimates.Where(Function(est) est.EstimateId = estimateId)
        ' this is where I update the affected row
        item.UpdateFromDate(viewModel.DateOfBirth, viewModel.EmploymentStartDate, viewModel.PersonId)
      Next item
    End If

    ' Get the previous ViewModel from session
    PerformSessionAction(Of RetirementBenefitEstimateViewModel)(SessionConstants.RetirementEstimate, currentEstimate, SessionAction.GetVar)
    ' update it's .Estimate property
    currentEstimate.Estimate = viewModel.Estimate
    ' save the updated ViewModel to session
    PerformSessionAction(Of RetirementBenefitEstimateViewModel)(SessionConstants.RetirementEstimate, currentEstimate, SessionAction.SetVar)
    ' finished!
    Return New HttpStatusCodeResult(HttpStatusCode.OK)
End Function

The jquery AJAX call in my view looks like:

$.ajax({
        type: "POST",
        url: '@Url.Action("UpdateFromDate")',
        data: { viewModel : model, estimateId : 3 }
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        cache: false,
        success: function (msg) {
          //alert(JSON.stringify(msg));
          return true;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          //alert(errorThrown);
          return false;
        }
      });

How can I POST my viewmodel and the integer (hard-coded to 3 in this example)?

You need your model's value to present in the DOM. Once they are you need to use javascript or jQuery to get the values and send them as data in your post. — Maess, Jun 10 '13 at 14:44
I'd HIGHLY recommend installing and using Fiddler to trace the AJAX calls. It is an invaluable tool for seeing exactly what is going back and forth from your client to the MVC app. — Scottie, Jun 10 '13 at 14:51

score 8 · Accepted Answer · answered Jun 10 '13 at 14:54

Scottie's post got me on the right track. I was tempted to mark it as the answer, but it had one tiny problem. The integer would POST correctly, but the viewmodel started showing up as null in the controller. All that was needed to fix this was a simple JSON.parse call.

My AJAX call ends up looking like:

var params = {
    viewModel: JSON.parse(model),
    estimateId: 3
};

$.ajax({
    url: '@Url.Action("UpdateFromDate")',
    type: "POST",
    dataType: 'json',
    data: JSON.stringify(params),
    async: false,
    cache: false,
    traditional: true,
    contentType: 'application/json',
    success: function  (msg) {
      //alert(JSON.stringify(msg));
      return true;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      //alert(errorThrown);
      return false;
    }
  });

score 4 · Answer 2 · answered Jun 10 '13 at 14:46

Try this:

var params = {
    viewModel: model,
    estimateId: 3
};

$.ajax({
    url: '@Url.Action("UpdateFromDate")',
    type: "POST",
    dataType: 'json',
    data: JSON.stringify(params),
    async: false,
    cache: false,
    traditional: true,
    contentType: 'application/json',
    success: function  (msg) {
      //alert(JSON.stringify(msg));
      return true;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      //alert(errorThrown);
      return false;
    }
  });

Using jQuery AJAX to POST multiple variables to an ASP .NET MVC Controller

2 Answers2