How to refresh/reload partial view from inside main view in MVC

Question

I am displaying a partial view (shopping cart) inside my main (pricing view) view using RenderAction

<% Html.RenderAction("Cart", "ShoppingCart"); %>

As user adds items to cart on the main view I have to update the partial view to display newely added items. Here is the code for my partail view:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Trl.ViewModels.Cart>" %>
<% foreach (var _hotel in Model.Hotels)
   { %>
   Hotel Name: <%: _hotel.Name %> <br/>
   Price: <%: _hotel.TotalPrice %>
<% } %>

"Trl.ViewModels.Cart" object used in above user control will contain newely added items as I am using ASP.NET Session State to persist Cart. How to refresh/reload this partial view from my main view so it can display newely added items?

Answer 1

ok, i've got a clear(er) idea of whats required.

I'm assuming that the main content area is updated via ajax. If this is the case, then my approach would be to make the update via ajax and in the controller action, return partialview that contains the sidebar cart. For this to work, you'd need a named id for the div that contained the cart in order to target that as an update site.

without further ado, a quick code demo of what i mean:

controller:

public ActionResult Create(Cart item)
{
    if (ModelState.IsValid)
    {
        // or could be added to session["cart"] etc..
        _repository.Add(item);
        var cartItems = _repository.Find(x => x.cartID = item.cartID);
        return PartialView("CartMini", cartItems);
    }
    return new EmptyResult();
}

main view (in your right hand column - this would be where your partial view was originally defined):

<div id="miniCart"></div>

in another part of the page (semi psuedo-code):

<script type="text/javascript">
     function updateCart() {
         var tdata = $(frm).serialize(); 
         // or your data in the format that will be used ??
         $.ajax({
           type: "POST",
           data: tdata,
           url : '<%= Url.Action("Create", "Cart") %>',
           dataType: "json",
           success: function (result) { success(result); }  
        });
      }); 

    function success(result){
        $("#miniCart").html(result);
    }
</script>

and that really is the bare bones of what's needed. sorry for the rush on this, had started a while ago and phone went, now have to head off :). will add further if not clear later.