asp.net - Not able to update the comment module on the mvc view using ajax call without refreshing the page -

this check & mate situation me... using mvc 3. trying make post , comment module on single view. below code view , controller. able post , comments on load once add new comment through ajax call saved correct table in db not understanding how update on view without refreshing page...

//model public class postviewmodel {    public bool? isactive     { get; set; }     public string postdescription     { get; set; }     ...      public list<postcommentmodel> objpostcommentinfo { get; set; } }  //post controller   dbentities1 db = new dbentities1();      public actionresult index(int id)     {          int id = convert.toint32(id);         postviewmodel objpostviewmodel = new postviewmodel();         list<postviewmodel> lstobjpostviewmodel = new list<postviewmodel>();          postcommentmodel objpostcommentmodel;         list<postcommentmodel> lstobjpostcommentmodel = new list<postcommentmodel>();          var objpost = (from x in db.postinfoes                          x.postid  == id                         select x).tolist();          var objpostcomment = (from y in db.postcommentinfoes                                  y.postid  == id                                orderby y.commentid  descending                                select y).tolist();          foreach  (var x in objpost)         {              objpostviewmodel.postid = x.postid;             objpostviewmodel.isactive = x.isactive;             objpostviewmodel.posttitle = x.posttitle;             objpostviewmodel.postdescription = x.postdescription;             lstobjpostviewmodel.add(objpostviewmodel);         }          foreach (var y in objpostcomment)         {             objpostcommentmodel = new postcommentmodel();             objpostcommentmodel.postid  = y.postid;             objpostcommentmodel.isactive  = y.isactive;             objpostcommentmodel.commentbody = y.commentbody;             lstobjpostcommentmodel.add(objpostcommentmodel);         }         objpostviewmodel.objpostcommentinfo = lstobjpostcommentmodel;         return view(lstobjpostviewmodel);     }    //view   @model ienumerable<mvcprojectmodels.postviewmodel>  <table border="1">  @foreach (var item in model)  {         <tr>         <td>             <text>created by:</text>             @html.displayfor(modelitem => item.postdescription)         </td>         <td rowspan="2">             @html.displayfor(modelitem => item.postdescription)         </td>     </tr>     .....   }  </table>  <table>  <tr>     <td>         <textarea cols="10" rows="5" id="txtcomment"></textarea>     </td>   </tr>   <tr>     <td>         <input id="btnpostcomment" type="button" value="post comment" />     </td>  </tr>  </table>  <table border="1">  @foreach (var item1 in model)  {     foreach (var item2 in item1.objpostcommentinfo)     {         <tr>         <td colspan="2">             @html.displayfor(modelitem => item2.commentbody)         </td>     </tr>     }   }  </table> 

//ajax call update comment (the comments gets saves database not finding anyway update on ui or view)

       <script type="text/javascript">         $("#btnpostcomment").click(function () {        var commentbody = $("#txtcomment").val();        postcomment(commentbody);        });        function postcomment(commentbody) {        $.ajax({        url: "/post/postcomment", // controller method calls store procedure insert new comment in database.           type: 'post',           data: {               comment: commentbody,               id: 6           },           success: function (result) {            },           error: function () {               alert("error");           }         });         }         </script> 

please let me know if doing major designing mistakes in above module. new mvc trying reading books , articles not sure if correct way of achieving such results. thanks

you need name table easier reference:

<table border="1" id="postlist"> 

on view writing name of user <text>created by:</text> don't see in model. assuming saved in session or can retrieve in controller can like:

public actionresult postcomment(yourmodel input){     // went     // session or database     var username = "the creator";     return json(new { success = true, username}); }  

on success of ajax call:

success: function (result) {     if (result.success) {         $("#postlist").append('<tr><td><text>created by:</text>' +             result.username + '</td><td rowspan="2">' +             commentbody + '</td>');     </tr>     } } 

it cool though if instead of concatenating tr string read template , insert necessary values. or can use other tools knockout binding on client side. question guess.