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
– Maess, Commented Jun 10, 2013 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
– Scottie, Commented Jun 10, 2013 at 14:51

Douglas Barbin · Accepted Answer · 2013-06-10 14:54:58Z

8

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

answered Jun 10, 2013 at 14:54

Douglas Barbin

3,6152 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scottie · Accepted Answer · 2013-06-10 14:46:34Z

4

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

answered Jun 10, 2013 at 14:46

Scottie

11.4k21 gold badges75 silver badges116 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related