Asp.net mvc 3 如何仅重新加载页面的一部分_Asp.net Mvc 3

Asp.net mvc 3 如何仅重新加载页面的一部分

asp.net-mvc-3

Asp.net mvc 3 如何仅重新加载页面的一部分,asp.net-mvc-3,Asp.net Mvc 3,我的网上购物页面包含两个部分。第一部分是产品清单 @model WebUI.Models.CakesListViewModel @foreach (var p in Model.Cakes) { Html.RenderPartial("CakesList", p); } @model Domain.Entities.Cart @{ Layout = null; string str = String.Format("{0}", Model.ComputeTotalVal

我的网上购物页面包含两个部分。第一部分是产品清单

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

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

每个产品都显示为局部视图。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.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" /> 
}

@model Domain.Entities.Cake
@如果（Model.ImageData！=null）{
}
@型号名称

@型号。价格

@型号.说明
@使用（Html.BeginForm（“AddToCart”、“Cart”））
{
@Html.HiddenFor（x=>x.Id）
@TextBox（“数量”，新{style=“宽度：20px；文本对齐：中心”}）
}

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

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

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

@model Domain.Entities.Cart
@{
布局=空；
string str=string.Format（“{0}”，Model.ComputeTotalValue（））；
}
@ActionLink（str，“Index”，“Cart”）

它出现在_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>


@{Html.RenderAction（“摘要”、“购物车”）；}
蛋糕
@{Html.RenderAction（“菜单”、“菜单项”）；}
@RenderBody（）

您要做的是返回一个局部视图，它将被放置在“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.
}

//结块控制器

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);
        }
    }
}

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);
        }
    }
}

//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
<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.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" /> 
}

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

@model Domain.Entities.Cart
@{
布局=空；
string str=string.Format（“{0}”，Model.ComputeTotalValue（））；
}

@Html.ActionLink（str，“索引”）