How can I reload only part of the page

My page, which is for an online store, contains two parts. The first part is a list of products.

@model WebUI.Models.CakesListViewModel
@foreach (var p in Model.Cakes) {
    Html.RenderPartial("CakesList", p);
}

      

Each product is displayed as a partial view. CakesList.cshtml

@model Domain.Entities.Cake
<div>
    @if (Model.ImageData != null) {
        <div style="float:left;margin-right:20px">
            <img width="75" height="75" src="@Url.Action("GetImage", "Cake", new { Model.Id })" />
        </div>
    }
    <b>@Model.Name<br />
    @Model.Price</b><br />
    @Model.Description
    @using (Html.BeginForm("AddToCart", "Cart"))
    {
        @Html.HiddenFor(x => x.Id) 
        @Html.TextBox("quantity", "", new { style = "width: 20px; text-align: center" })
        <input type="image" src="../Images/basket.jpg" /> 
    }
</div>

      

The whole page reloads after clicking the cart image button, but I only need to reload the second part of the page. How should I do it. The second part is the sum of the ordered works.

@model Domain.Entities.Cart
@{
    Layout = null;
    string str = String.Format("{0}", Model.ComputeTotalValue());
}
<div id="cart">
    @Html.ActionLink(str, "Index", "Cart")
</div>

      

Which comes from _Layout.cshtml

</head>
<body>
    <div id="header">
        @{Html.RenderAction("Summary", "Cart");}
        <div class="title">Cakes</div>
    </div>
    <div id="categories">
        @{ Html.RenderAction("Menu", "MenuItems"); }
    </div>
    <div id="content">
       @RenderBody()
    </div>
</body>
</html>

      

+3


source to share


2 answers


<h2>About</h2>
<p>
    Put content here.
</p>

@Ajax.ActionLink("Link Text", "ActionThatWillReturnContent", new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "ContainerThatIWillUpdate"
    })

<div id="ContainerThatIWillUpdate"></div>

      

This will call ActionThatWillReturnContent and insert the content inside the ContainerThatIWillUpdate.

An alternative is to use jQuery.ajax which is much nicer but requires a bit of reading / replaying.

Update 1:

You are sending an AJAX request to your action method called AddToCart. This method does some processing and then returns the full view:



return RedirectToAction("OnlineShop", "Cake");

      

What you want to do is return a partial view that will be placed inside "mydiv" which is your update target id.

Your action method needs to be changed to return a PartialView and not an ActionResult:

public PartialViewResult AddToCart(Cart cart, int id, int quantity = 1)
{
     // Inside this action method, you don't want to return a redirect to action, 
     // you want to return partial view

     return PartialView(); // This has three constructors, so you'll need to do a bit of digging.
}

      

0


source


// CakeController

namespace WebUI.Controllers
{
    public class CakeController : Controller
    {
        public int PageSize = 4;
        private ICakeRepository repository;
        public CakeController(ICakeRepository cakeRepository)
        {
            repository = cakeRepository;
        }
        public FileContentResult GetImage(int id)
        {
            Cake prod = repository.Cakes.FirstOrDefault(p => p.Id == id);
            if (prod != null)
                return File(prod.ImageData, prod.ImageMimeType);
            else
                return null;
        }
        public ActionResult OnlineShop(string regions, int page = 1)
        {
            CakesListViewModel viewModel = new CakesListViewModel
            {
                Cakes = repository.Cakes
                .Where(p => regions == null || p.Name.Trim() == regions),
                PagingInfo = new PagingInfo
                {
                    CurrentPage = page,
                    ItemsPerPage = PageSize,
                    TotalItems = 1
                },
                CurrentCategory = "category"
            };
            return View("OnlineShop", viewModel);
        }
    }
}

      

//OnlineShop.cshtml

@model WebUI.Models.CakesListViewModel
@{
    ViewBag.Title = "Cakes";
}
@foreach (var p in Model.Cakes) {
    Html.RenderPartial("CakesList", p);
}

      

//CakesList.cshtml



@model Domain.Entities.Cake
@if (Model.ImageData != null) {
<div style="float:left;margin-right:20px">
    <img width="75" height="75" src="@Url.Action("GetImage", "Cake", new { Model.Id })" />
</div>
}
<b>@Model.Name<br />
@Model.Price</b><br />
@Model.Description
@using (Ajax.BeginForm("AddToCart", "Cart", new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "mydiv" }))
{
@Html.HiddenFor(x => x.Id) 
@Html.TextBox("quantity", "", new { style = "width: 20px; text-align: center" })
<input type="image" src="../Images/basket.jpg" /> 
}

      

// CartController

namespace WebUI.Controllers
{
    public class CartController : Controller
    {
        private ICakeRepository repository;
        private IOrderProcessor orderProcessor;
        public CartController(ICakeRepository repo, IOrderProcessor proc)
        {
            repository = repo;
            orderProcessor = proc;
        }
        public ActionResult AddToCart(Cart cart, int id, int quantity = 1)
        {
            Cake cake = repository.Cakes.FirstOrDefault(p => p.Id == id);
            if (cake != null)
                cart.AddItem(cake, quantity);
            return RedirectToAction("OnlineShop", "Cake");
        }
        public ActionResult RemoveFromCart(Cart cart, int id) 
        {
            Cake cake = repository.Cakes.FirstOrDefault(p => p.Id == id);
            if (cake != null)
                cart.RemoveLine(cake);
            return RedirectToAction("Index", "Cart");
        }
        public ViewResult Index(Cart cart, string returnUrl)
        {
            return View(new CartIndexViewModel
            {
                Cart = cart,
                ReturnUrl = returnUrl
            });
        }
        public ViewResult Summary(Cart cart)
        {
            return View(cart);
        }
    }
}

      

//Summary.cshtml

@model Domain.Entities.Cart
@{
    Layout = null;
    string str = String.Format("{0}", Model.ComputeTotalValue());
}
<div id="cart"> 
    <p>
    <img src="../Images/basket.jpg" />
    <div id="mydiv">@Html.ActionLink(str, "Index")</div>
    </p>
</div>

      

0


source







All Articles