ajax - Call a controller method from a view in MVC -

i new mvc framework , here stucked updation method, can me?

mycode in view :

       <table>         <% if (model == null || model.count <= 0)         {         %>         <tr>         <td >      no records found !!.please search.      </td>      </tr>     <% }      else      {      foreach (var item in model)      { %>       <tr>      <td>id</td>      <td><%: item.id %></td>      <tr>      <td > system : </td>     <td >                                                                              <input id="txtsystemname" value=' <%: item.system %>' type="text"style="height: 20px; width: 120px;" />      </td>      <td >taskname :</td>     <td><input id="txttaskname" value='<%: item.taskname %>' class="textboxstyle" type="text"     style="height: 20px; width: 340px;" /><td/>     <tr>      <tr>     <td><input id="submit1" name="btnsave" type="submit" value="save" class="buttonstyle"      style="width: 100px; height: 20px" /></td>     </tr> <% } } %> 

the above code , here records in view , above code doesnt contain property have pasted 3 fields , wen update names in input field , wen clicked button in table want update record values want know how call controller method , and pass parameters method.

can me this. in advance.

here's suggest you. start view model represent table row:

public class myviewmodel {     public int id { get; set; }     [required]     public string systemname { get; set; }     public string taskname { get; set; } } 

then controller contain actions listing models , updating single row:

public class homecontroller : controller {     public actionresult index()     {         // have hardcoded data here in order return list         // of models => in case fetch         // data source         var model = enumerable.range(1, 7).select(x => new myviewmodel         {             id = x,             systemname = "system " + x,             taskname = "task " + x         });         return view(model);     }      [httppost]     public actionresult update(myviewmodel model)     {         // action responsible updating view model         if (modelstate.isvalid)         {             // model valid             // todo: update using repository             return json(new { success = true });         }         // there error => redisplay view user can fix         return partialview("_myviewmodel", model);     } } 

then let's move on main view (~/views/home/index.aspx):

<%@ page      language="c#"      masterpagefile="~/views/shared/site.master"      inherits="system.web.mvc.viewpage<ienumerable<appname.models.myviewmodel>>"  %>  ...  <table>     <thead>         <tr>             <th>id</th>             <th>system name</th>             <th>task name</th>             <th></th>         </tr>     </thead>     <tbody>         <% if (model == null || model.count() < 1) { %>             <tr>                         <td colspan="4">                     no records found !! please search.                 </td>             </tr>         <% } else { %>             <% foreach (var item in model) { %>                 <%= html.partial("_myviewmodel", item) %>             <% } %>         <% } %>     </tbody> </table> 

then define partial view model (~/views/home/_myviewmodel.ascx):

<%@ control      language="c#"      inherits="system.web.mvc.viewusercontrol<appname.models.myviewmodel>"  %> <tr>     <% using (html.beginform("update", "home", formmethod.post, new { @class = "updateform" })) { %>         <td>             <%= html.displayfor(x => x.id) %>             <%= html.hiddenfor(x => x.id) %>         </td>         <td>             <%= html.editorfor(x => x.systemname) %>             <%= html.validationmessagefor(x => x.systemname) %>         </td>         <td>             <%= html.editorfor(x => x.taskname) %>             <%= html.validationmessagefor(x => x.taskname) %>         </td>         <td>             <input type="submit" value="update" />         </td>     <% } %> </tr> 

and last part ajaxify forms. done unobtrusively in separate javascript file using jquery:

$(function() {     $('.updateform').submit(function () {         var form = $(this);         $.ajax({             url: this.action,             type: this.method,             data: $(this).serialize(),             success: function (result) {                 if (!result.success) {                     form.closest('tr').replacewith(result);                 } else {                     alert('record updated');                 }             }         });         return false;     }); });