Question

我的在线购物页面包含两部分。第一部分是产品清单。

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

每件商品都显示为部分视图。 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>

点击篮子图像按钮后，所有页面都重新加载，但我只需要重新加载页面的第二部分。我该怎么做。第二部分是订购产品的总和。

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

这是从_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>

Answer 1

<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>

这将调用“ActionThatWillReturnContent”并在“ContainerThatIWillUpdate”中插入内容。

替代方法是使用jQuery.ajax，它更好，但需要一点阅读/玩。

更新1：

您向名为AddToCart的操作方法发送AJAX请求。此方法执行一些处理，然后返回完整视图：

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

您想要做的是返回部分视图，该部分视图将放置在“mydiv”内，这是您的更新目标ID。

需要修改您的操作方法以返回PartialView，而不是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.
}

Answer 2

// 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>

我怎样才能重新加载页面的一部分

2 个答案: