Send data to controller using Ajax - MVC 3 razor

Question

I have a set of PartialView that are dynamicaly changed in a page. A PartialView loads the next and so on using ajax. One of them have a form of like 20 inputs, currently I'm just sending one input but how can I send the rest of them? I have this in this partialview:

var shipping= $("input[name='shipping']:checked").val()
    $.ajax(
      {
          url: '/Home/Payment',
          type: "POST",
          data: { 'shipping': shipping},
          success: function (data) {
              $("#cart").html(data);

          }
      });

And this in the controller:

public ActionResult Payment(string shipping)
    {
        **do stuff*
        return PartialView("NextPartialView");
    }

The controller recieves every input of the form but as I said before there are 20 of them. Is there a way to keep the code clean and readable using another technique to send the data?

I'm new in MVC and razor

Thanks

Community · Accepted Answer · 2017-05-23 12:27:45Z

1

Use JSON model binding. This post can help you get the picture.

In short, create javascript object with property names matching model. Send it to controller and it will be bound. Also, note that numbers are better to be sent as strings (look at this).

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Nov 12, 2012 at 1:47

nrodic

3,0213 gold badges36 silver badges39 bronze badges

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

Comments

Shyju · Accepted Answer · 2012-11-12 02:03:29Z

Have your Items in a Form and serialize the form and send to the action method.

@model YourSomeViewModel
@using(Html.Beginform())
{
  FirstName :   @Html.TextBoxFor(x=>x.FirstName)
  LastName:   @Html.TextBoxFor(x=>x.LastName)
  Location :   @Html.TextBoxFor(x=>x.Location)
  Is Available to hire @Html.CheckBoxFor(x=x.IsAvailable)
  <input type="submit" id="btnSubmit" />
}

Now in your script

$(function(){
  $("#btnSubmit").click(function(e){
    $.post("@Url.Action("Save","YourControllerName")", 
                          $(this).closest("form").serialize(), function(data){
            //do something with the response
    });    
  });  
});

Now your action method parameter will be your view model class. Mvc Model binding will map the posted (serialized) form data to an instance of your view model class.

[HttpPost]
public ActionResult Save(YourSomeViewModel model)
{
   //check model properties now

  //saved and respond /redirect
}

Collectives™ on Stack Overflow

Send data to controller using Ajax - MVC 3 razor

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related