How to send a model in jQuery ajax post request to MVC controller method

Question

In doing an auto-refresh using the following code  I assumed that when I do a post  the model will automatically sent to the controller     ajax       url    lt   Url Action  ModelPage    gt        type   POST         data              success  function result               div updatePane   html result               complete  function            form   onsubmit   preventDefault  function                        Every time there is a post  I need to increment the value attribute in the model   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

User · Answer

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

User · Answer

In ajax call mention-   data MakeModel      use the below function to bind data to model  function MakeModel          var MyModel            MyModel value       input element id   val   or your value       return JSON stringify MyModel       Attach  HttpPost  attribute to your controller action  on POST this data will get available

User · Answer

This can be done by building a javascript object to match your mvc model  The names of the javascript properties have to match exactly to the mvc model or else the autobind won t happen on the post  Once you have your model on the server side you can then manipulate it and store the data to the database   I am achieving this either by a double click event on a grid row or click event on a button of some sort    model TestProject Models TestModel   lt script gt   function testButton Click      var javaModel      ModelId    Model TestId     CreatedDate    Model CreatedDate ToShortDateString       TestDescription    Model TestDescription       Here I am using a Kendo editor and I want to bind the text value to my javascript     object  This may be different for you depending on what controls you use    TestStatus       StatusTextBox    0  value     TestType    Model TestType           Now I did for some reason have some trouble passing the ENUM id of a Kendo ComboBox        selected value  This puzzled me due to the conversion to Json object in the Ajax call       By parsing the Type to an int this worked     javaModel TestType   parseInt javaModel TestType        ajax           This is where you want to post to        url   Url Action  TestModelUpdate   TestController            async true        type  POST         contentType   application json         dataType  json         data  JSON stringify javaModel           lt  script gt      This is your controller action on the server  and it will autobind your values    to the newTestModel on post    HttpPost  public ActionResult TestModelUpdate TestModel newTestModel     TestModel UpdateTestModel newTestModel    return   do some return action

User · Answer

you can create a variable and send to ajax   var m      Value    Model Value      ajax       url    lt   Url Action  ModelPage    gt        type   POST       data   m      success  function result               div updatePane   html result               complete  function            form   onsubmit   preventDefault  function                        All of model s field must bo ceated in m

User · Answer

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    lt script type  javascript  gt    var model    lt    Model ToJson     gt   lt  script gt    You can then pass the model variable into your   ajax call

User · Answer

The simple answer  in MVC 3 onwards  maybe even 2  is you don t have to do anything special   As long as your JSON parameters match the model  MVC is smart enough to construct a new object from the parameters you give it  The parameters that aren t there are just defaulted   For example  the Javascript   var values           Name    Chris        Color    Green       post   Url Action  Update    values function data           do stuff        The model   public class UserModel        public string Name   get set         public string Color   get set         public IEnumerable lt string gt  Contacts   get set        The controller   public ActionResult Update UserModel model            do something with the model       return Json new   success   true

User · Answer

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

[asp.net-mvc] How to send a model in jQuery $.ajax() post request to MVC controller method

Examples related to asp.net-mvc

Examples related to jquery

Examples related to asp.net-ajax