ajax - MVC3 reloading part of page with data razor -

i have table data base , 3 buttons delete, create , update return partialviews.

i want update part of page data after clicking submit button in corresponding dialog (delete, update, ...).

what easiest way achive this?

this i've got add, delete same.

<div id="delete-dialog" title="delete product"></div>    <script type="text/javascript" > $(".deletelink").button();      var deletelinkobj;     // delete link     $('.deletelink').click(function () {         deletelinkobj = $(this);         var name = $(this).parent().parent().find('td :first').html();         $('#delete-dialog').html('<p>do want delete ' + name + ' ?</p>');         //for future use         $('#delete-dialog').dialog('open');         return false; // prevents default behaviour     });      $('#delete-dialog').dialog({         dialogclass: "confirmbox",         autoopen: false, width: 400, resizable: false, modal: true, //dialog options         buttons: {             "continue": function () {                 $.post(deletelinkobj[0].href, function (data) { //post action                     if (data == '<%= boolean.truestring %>') {                         deletelinkobj.closest("tr").hide('fast'); //hide row                     }                     else {                     }                 });                 $(this).dialog("close");             },             "cancel": function () {                 $(this).dialog("close");             }         }     }); </script> 

and after dialog close want reload of part of page.

the data looks

<table>     <tr>         <th>        name       </th>         <th>        date </th>         <th>             </th>     </tr>   @foreach (var m in this.model) {     <tr>     <td>      <div class="productname">@html.displayfor(model => m.name)</div>     </td>     <td>      @convert.todatetime(m.adddate).toshortdatestring()     </td>     <td>       <div class="productprice">@string.format("{0:c}", m.price)</div>     </td>      <td>       <div class="categoryname">@html.displayfor(model => m.categoryname)</div>      </td>     <td>     @html.actionlink("edit", "edit", new { id = m.id }, new { @class = "editlink" })      @html.actionlink("delete", "delete", new { id = m.id }, new { @class = "deletelink" })      </td>     </tr> } </table> 

i'm not sure if im doing tried put action after click button nut sure if right changed index partial view

 buttons: {             "continue": function () {                 $.post(deletelinkobj[0].href, function (data) { //post action                     if (data == '<%= boolean.truestring %>') {                         deletelinkobj.closest("tr").hide('fast'); //hide row                     }                     else {                     }                 });                 $.ajax.actionlink("index",                  "index",   // <-- actionmethod                 "shop",  // <-- controller name.                 new { }, // <-- route arguments.                 null  // <-- htmlarguments .. none. y                 )                 $(this).dialog("close");             },             "cancel": function () {                 $(this).dialog("close");             }         } 

i suggest use asp.net mvc actionlink helper in .cshtml file, , not jquery:

[...] <script type="text/javascript"> function openpopup() {     // set options needed.     $("#yourpopupdialogid").dialog("open"); } </script> [...] @ajax.actionlink(      "delete",      "delete",      "controller",      new { somevalue = 123 },     new ajaxoptions     {         // set options needed         httpmethod = "get",         updatetargetid = "yourpopupdialogid",         onsuccess = "openpopup()"     } ) [...] <div id="yourpopupdialogid" style="display: none;"></div> 

now in controller methods want use popups should return partialviews:

public actionresult delete(int id) {     recorddeletemodel model = yourrepository.getmodel( id );     return partialview( model ); }