How to send a Model in jquery $.ajax () post request (asp.net MVC)

Question

In doing an autorefresh by putting the following code,i assumed that when i do a post the model will automatically sent to the controller ,

$.ajax({
                   url: '<%=Url.Action("ModelPage")%>',
                   type: "POST",
                   //data:  ??????
                   success: function(result) {
                       $("div#updatePane").html(result);
                   },

                   complete: function() {
                   $('form').onsubmit({ preventDefault: function() { } });

                   }
               });

in every post i need to increment the value attr in the model every time there is a post

        public ActionResult Modelpage(MyModel model)
    {

        model.value =  model.value+1;

            return PartialView("ModelPartialView", this.ViewData);
    }

but the model is not passed to the controller when the page is posted with jquery ajax() request , how can i send the model in the ajax request ??

Answer 1

I think you need to explicitly pass the data attribute. One way to do this is to use the data = $('#your-form-id').serialize();

This post may be helpful. Post with jquery and ajax

Have a look at the doc here.. Ajax serialize

Answer 2

I have an MVC page that submits JSON of selected values from a group of radio buttons.

I use:

var dataArray = $.makeArray($("input[type=radio]").serializeArray());

To make an array of their names and values. Then I convert it to JSON with:

var json = $.toJSON(dataArray)

and then post it with jQuery's ajax() to the MVC controller

$.ajax({
url: "/Rounding.aspx/Round/" + $("#OfferId").val(),
type: 'POST',
dataType: 'html',
data: json, 
contentType: 'application/json; charset=utf-8',
beforeSend: doSubmitBeforeSend,
complete: doSubmitComplete,
success: doSubmitSuccess});

Which sends the data across as native JSON data.

You can then capture the response stream and de-serialize it into the native C#/VB.net object and manipulate it in your controller.

To automate this process in a lovely, low maintenance way, I advise reading this entry that spells out most of native, automatic JSON de-serialization quite well.

Match your JSON object to match your model and the linked process below should automatically deserialize the data into your controller. It's works wonderfully for me.

Article on MVC JSON deserialization

Answer 3

If you need to send the FULL model to the controller, you first need the model to be available to your javascript code.

In our app, we do this with an extension method:

public static class JsonExtensions
{
    public static string ToJson(this Object obj)
    {
        return new JavaScriptSerializer().Serialize(obj);
    }
}

On the view, we use it to render the model:

<script type="javascript">
  var model = <%= Model.ToJson() %>
</script>

You can then pass the model variable into your $.ajax call.