我怎樣才能重新加載頁面的一部分

我的網頁，網上購物，包含兩部分。第一部分是產品清單。我怎樣才能重新加載頁面的一部分

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

來源

2012-03-28 Mery Gardner

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

您發送一個Ajax請求你叫AddToCart操作方法。這個方法做了一些處理，然後返回一個全視圖：

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

來源

2012-03-28 10:05:27

謝謝回答。請在第二個答案中找到我的更改。請幫忙。 – 2012-03-28 19:09:10

感謝您的支持和幫助。它工作出色。 :) – 2012-03-29 18:26:32

歡迎:) – 2012-03-29 18:29:48

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

來源

2012-03-29 09:37:14

我怎樣才能重新加載頁面的一部分

回答

相關問題