MVC 4 Refresh a PartialView Only

Question

I am currently developing a website with CRUD functionality. I am using the below javascript code to display a message after the Add, Edit, or Delete has been completed successfully.

function addSuccess(data) {
    if (data.Success == true) {
        $('#addDialog').dialog('close');
        $('#commonMessage').html("Process Complete");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
    }
    else {
        $("#add-message").html(data.ErrorMessage);
        $("#add-message").show();
    }
}

However, I am rendering results on a partial view containing a webGrid. In this case, a tabular list of products are in this Partial View. After (let's say) an Edit Process has been completed, I want the edited field to reflect after the Edit Dialog has been closed. My problem is, I don't know how to refresh a partialview without affecting the whole page.

Can someone please point me to a good way to do this? Thank you very much!

---

EDIT:

Below is how I add items to my grid. Please note that this entire code is inside my PartialView. Thank you!

@{
    MyStore.Business.Manager.ProductsManager repository = new MyStore.Business.Manager.ProductsManager ();

    List<MyStore.Data.Products> ProductsList = repository.GetAllProducts(ViewData["StoreCode"].ToString());

    var grid = new WebGrid(ProductsList );

    grid.Pager(WebGridPagerModes.All);
            @grid.GetHtml(tableStyle: "webGrid",
                htmlAttributes: new { id = "DataTable" },
                headerStyle: "header",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("ProductCode", style: "width: 400px;"),
                    grid.Column("Name", style: "width: 400px"),
                    grid.Column("Price", style: "width: 100px;"),
                    grid.Column("", format: @<text>@Html.ActionLink("Edit", "_Edit", new { RecordID = item.RecordID }, new { @class = "editLink" })</text>, style: "width: 100px"),
                    grid.Column("", format: @<text>@Html.ActionLink("Delete", "_Delete", new { RecordID = item.RecordID }, new { @class = "editLink" })</text>, style: "width: 100px")
                                                 ));                                                      
    }            

Solution

Use jquery ajax to reload the content

if (data.Success == true) {
    $('#addDialog').dialog('close');
    $('#commonMessage').html("Process Complete")
                   .delay(400).slideDown(400).delay(3000).slideUp(400);

    $("#yourContainerDiv").load("Url.Action("GetProducts ","Items")")

}

Assuming yourContainerDiv is the Div /table where you have the markup of the Grid and Your GetProducts action method of Items controller returns the markup of the grid.

and if you are doing the Save/Update in a button click event, Make sure to stop the default form submit behaviour by using peventDefault method

$("#someButtonId").click(function(e){
  e.preventDefault();
  //Save data or whatever ...
}); 

EDIT: After seting the updated question.

Why are you mixing your UI (view) with the code. Keep it seperate.

Have an action to get the data and pass that to a strongly typed view

public ActionResult GetProducts()
{
   var repository = new MyStore.Business.Manager.ProductsManager ();
   var productList = repository.GetAllProducts(ViewData["StoreCode"].ToString());
   return View(productList);    
}

Now have a view(GetProducts.cshtml) which is strongly typed to Lost of Products class.

@model MyStore.Data.Products
@{
  Layout=null;
}
<table>
   @foreach(var item in Model)
   {
     <tr>
      <td>@item.ProductCode</td>
      <td>@item.Name</td>
      <td>@item.Price</td>
     </tr>
   }
</table>

Personally I keep my Entity/Model name as Singular like Customer /Product