jquery - How to post data using json from html table to controller in ASP.NET MVC -

i have view contains salesmain , salesub details

@using (html.beginform()) { <table > <tr> <td> <label id="lblbuyername" style="color: white">buyername</label> </td> <td> <input type="text" name="txtbuyername" id="buyername" style="width: 250px;"/> </td>  </tr> <tr> <td> <label id="lbldate">date</label> </td> <td> <input type="text" name="txtdate" id="tdate" style="width: 100px; height: 15px;" /> </td>  </tr>  </table>  <div style="background-color: lightsteelblue; min-height: 125px; min-width: 50px; border-bottom: activeborder; padding-right: 500px;"> <table id="datatable" border="3" style="padding-left: 49px; margin-left: 10px;"> <tr> <td> select </td> <td> region </td> <td> quantity </td> <td> rate </td> <td> amount </td> <td> tax percentage </td> <td> tax amount </td>   </tr> <tr> <td><input type="checkbox" name="chk"/></td> <td> @html.dropdownlist("country", new selectlist(viewbag.listofdisciplines, "value", "text", model)) </td> <td> <input type="text" name="quantity" id="quantity"/> </td> <td> <input type="text" name="rate" id="rate" /> </td> <td> <input type="text" name="amount" id="amount" style="width: 100px; color: green" readonly="true"/> </td> <td> <input type="text" name="taxper" id="taxper" style="width: 100px; color: green" readonly="true"/> </td> <td> <input type="text" name="taxamt" id="taxamt" style="width: 100px; color: green" readonly="true"/> </td> </tr> </table> <input type="button" value="add row" onclick=" addrow('datatable') " style="border-left-width: 1px; margin-left: 10px;"/> <input type="button" value="delete row" onclick=" deleterow('datatable') " /> <br /> <div style="font: italic small-caps bold 20px georgia, garamond, serif;"> <table > <tr> <td style="margin-left: 1px; padding-left: 1px;">grand_total:</td> <td><input type="text" readonly="true" name="grand_total" id="grand_total" style="width: 100px; color: green"/></td> <td>all_tax:</td><td> <input type="text" readonly="true" name="all_totaltax" id="all_totaltax" style="width: 100px; color: green" /></td> <td>all_total:</td><td> <input type="text" name="all_total" readonly="true" id="all_total" style="width: 100px; color: green" /></td> </tr> </table> </div> </div> <div> <input type="submit" id="btnsaveall" value="save record" style="border-left-width: 1px; margin-left: 10px;"/> </div> } 

and ajax function

<script language="javascript" type="text/javascript">           $(document).ready(function () {                     $(function () {                         $("#tdate ").datepicker();                     });                      $("#btnsaveall").click(function () {                          $.ajax({                             type: "post",                             url: "sales/showtable",                             success: function (response) {                                 alert('document saved.');                             }                         });                     });                 });     </script> 

and controller action method is:

[httppost] public actionresult showtable() {     return view(); } 

txtbuyername, txtdate, grand_total, all_total, all_totaltax columns belong salesmain class.

country, quantity, rate, amount, taxper, taxamt columns belong salessubs class

i want post data controller using jquery json. should jquery ajax function , controller method code be?

thank in advance...

you start writing view model represent data want submit (you might need adjust data types of various properties depending on specific requirements):

public class salesviewmodel {     public string country { get; set; }     public int quantity { get; set; }     public decimal rate { get; set; }     public int amount { get; set; }     public decimal taxper { get; set; }     public decimal taxamt { get; set; } }  public class myviewmodel {     public string buyername { get; set; }     public datetime date { get; set; }     public decimal alltotal { get; set; }     public decimal alltotaltax { get; set; }     public salesviewmodel[] sales { get; set; } } 

and then:

<script type="text/javascript">     $(function () {         $('#tdate').datepicker();          $('form').submit(function () {             var sales = [];             $('#datatable tr').each(function() {                 sales.push({                     country: $('td select', this).val(),                     quantity: $('td input[name="quantity"]', this).val(),                     rate: $('td input[name="rate"]', this).val(),                     amount: $('td input[name="amount"]', this).val(),                     taxper: $('td input[name="taxper"]', this).val(),                     taxamt: $('td input[name="taxamt"]', this).val(),                 });             });             var model = {                  buyername: $('#buyername').val(),                 date: $('#tdate').val(),                 alltotal: $('#all_total').val(),                 alltotaltax: $('#all_totaltax').val(),                 sales: sales             };             $.ajax({                 url: this.action,                 type: this.method,                 contenttype: 'application/json',                 data: model,                 success: function (response) {                     alert('document saved.');                 }             });              return false;         });     }); </script> 

and controller action take view model argument:

[httppost] public actionresult showtable(myviewmodel model) {     ... } 

this being said html pretty broken. have duplicate ids not allowed. further improvement step use view model model view , generate input fields typed helpers such html.editorfor instead of hardcoding them did. allow simplify ajax call because no longer need mapping between name of input fields , property names of view model. default model binder able bind them convention:

<script type="text/javascript">     $(function () {         $('#tdate').datepicker();          $('form').submit(function () {             $.ajax({                 url: this.action,                 type: this.method,                 data: $(this).serialize(),                 success: function (response) {                     alert('document saved.');                 }             });              return false;         });     }); </script>