javascript - Refreshing ViewModel and view after AJAX call -

i'm trying create table child rows (always 1 child per row) acting details section. in details section users able see log history, , have ability input specific log. upon inputting new log , clicking on "add" button, log history should update , show newly added event.

i have following ajax call used add log , should refresh details section, triggered after clicking on "add" button mentioned above:

 $('#addlog').click(function () {         formdata = {             logtype: logtype.value, // parameter add new log             logcomments: logcomments.value, // parameter add new log             agent: agent.value // parameter add new log         }         $.ajax({             url: '@url.action("addlog", "agentuser")',             type: 'post',             contenttype: 'application/json',             datatype: 'json',             data: json.stringify(formdata),             cache: false,             success: function (data) {                 // here should refresh the details section                 // , clear logtype , logcommands inputs             }         });     }); 

in controller:

[httppost] public actionresult addlog(string logtype, string logcomments, string agent, agentuservalidatephoneindexviewmodel vm) {     dodbstuff();      // here need update view model , view without having     // refresh page, shows added event.      return view(vm); } 

my viewmodel:

public class agentuservalidatephoneindexviewmodel {     public ienumerable<agentuserwithoutvalidphone> agentuserwithoutvalidphonelist { get; set; } } 

my model:

public class agentuserwithoutvalidphone {     private string phone;     private datetime creationdate;     public string agent { get; set; }     public string phone     {                 {             return phone;         }         set         {             phone = phonenumberutil.getinstance().parse("+" + value, string.empty).nationalnumber.tostring();         }     }     public datetime creationdate     {                 {             return creationdate;         }         set         {             creationdate = value;             timespan timespan = (datetime.now) - creationdate;             timegoneby = (timespan.days != 0 ? timespan.days + "d " : string.empty) + timespan.hours + "h";         }     }     public string timegoneby { get; set; }     public datetime lastlogeventdate { get; set; }     public logeventtypephone lastlogevent { get; set; }     public ienumerable<agentuserslog> eventlist { get; set; } } 

my view:

@foreach (var agentuser in model.agentuserwithoutvalidphonelist)     {         <tr data-toggle="collapse" data-target="#details" class="accordion-toggle">             <td>                 <button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-collapse-down"></span></button>             </td>             <td>                 @agentuser.agent             </td>             <td>                 @agentuser.phone             </td>             <td>                 @agentuser.creationdate             </td>             <td>                 @agentuser.timegoneby             </td>             <td>                 @agentuser.lastlogeventdate             </td>             <td>                 @agentuser.lastlogevent.getdescription()             </td>         </tr>         <tr>             <td colspan="12" class="hiddenrow" id="">                 <div class="accordian-body collapse" id="details">                     <table class="table table-striped">                         <thead>                             <tr>                                 <input type="hidden" id="agent" value='@agentuser.agent'>                                 <td>                                     @html.dropdownlist("logeventtypephone", enumhelper.getselectlist(typeof(enums.logeventtypephone)), "select log event",                                     new                                     {                                         id = "logtype",                                         @class = "form-control"                                     })                                 </td>                                 <td colspan="2">                                     <input type="text" class="form-control" placeholder="comments" id="logcomments">                                 </td>                                 <td>                                     <a href="#" class="btn btn-default btn-sm" id="addlog">                                         <i class="glyphicon glyphicon-plus"></i>                                     </a>                                 </td>                             </tr>                             <tr>                                 <th>event date</th>                                 <th>event type</th>                                 <th>comments</th>                                 <th>user</th>                             </tr>                         </thead>                         <tbody>                             @foreach (var e in agentuser.eventlist)                             {                                 <tr>                                     <td>@e.date</td>                                     <td>@(((enums.logeventtypephone)e.subtype).getdescription())</td>                                     <td>@e.comments</td>                                     <td>@e.aspnetusers.username</td>                                 </tr>                             }                         </tbody>                     </table>                 </div>             </td>         </tr>     } 

how pass viewmodel controller action, parameters? right it's empty time action. need pass action, interact db, update viewmodel, return view , have updated current viewmodel.

i've never done i'm trying here , i'm confused it. not sure if it's possible, or maybe should use several viewmodels.

there no need pass view model controller , again (it unnecessarily degrade performance). if wanting add new row based on values post controller method, create anonymous object (or new instance of agentuserslog) containing values shown in new row, return json , update dom adding new <tr> element.

there few other issues code including fact creating invalid html (duplicate id attributes) in foreach loops. remove id attributes , use class names instead in conjunction relative selectors (the code have shown ever handle .click() event of first link id="addlog"). view code should be

@foreach (var agentuser in model.agentuserwithoutvalidphonelist) {     <tr data-toggle="collapse" data-target=".details" class="accordion-toggle">         ....     </tr>     <tr>         <td colspan="12" class="hiddenrow">             <div class="accordian-body collapse details"> // use class name                 <table class="table table-striped">                     <thead>                         <tr>                             <td>                                 <input type="hidden" class="agent" value='@agentuser.agent'> // must inside td element                                 @html.dropdownlist("logeventtypephone", enumhelper.getselectlist(typeof(enums.logeventtypephone)), "select log event", new                                 {                                     id = "", // remove id                                     @class = "form-control logtype" // add class name                                 })                             </td>                             <td colspan="2">                                 <input type="text" class="form-control logcomments" placeholder="comments"> // use class name                             </td>                             <td>                                 <a href="#" class="btn btn-default btn-sm addlog"> // use class name                                     <i class="glyphicon glyphicon-plus"></i>                                 </a>                             </td>                         </tr>                         <tr>                             ....                         </tr>                     </thead>                     <tbody>                         @foreach (var e in agentuser.eventlist)                         {                             ....                         }                     </tbody>                 </table>             </div>         </td>     </tr> } 

and script becomes

var url = '@url.action("addlog", "agentuser")'; $('.addlog').click(function () {     var table = $(this).closest('table');     var logtype = table.find('.logtype').val();     var logcomments = table.find('.logcomments').val();     var agent = table.find('.agent').val();     $.post(url, { logtype: logtype, logcomments: logcomments, agent: agent }, function(data) {         var row = $('<tr></tr>');         row.append($('<td></td>').text(data.date));         .... // add other cells data.subtype, data.comments , data.username         table.children('tbody').append(row);     }); }); 

then in controller

[httppost] public jsonresult addlog(string logtype, string logcomments, string agent) {     dodbstuff();     // build data return     var data = new     {       date = .... ,       subtype = .... ,       comments = ..... ,       username = ....     };     return json(data); }