Home > DeveloperSection > Forums > Using jQuery AJAX to POST multiple variables to an ASP .NET MVC Controller
lois waisbrooker
lois waisbrooker

Total Post:70

Points:494
Posted on    June-11-2013 7:57 AM

 VB.Net VB.Net 
Ratings:


 1 Reply(s)
 3266  View(s)
Rate this:
Hi Developers, 

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?

Thanks in advance.


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-12-2013 7:41 AM

Hi Lois,

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

I hope it helpful for you. 


Don't want to miss updates? Please click the below button!

Follow MindStick