ページの一部のみをリロードするには

オンラインショップで使用するマイページには2つの部分が含まれています。最初の部分は製品のリストです。ページの一部のみをリロードするには

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

すべてのページには、バスケットの画像ボタンをクリックした後、リロードされますが、私は、ページの唯一の第二部をリロードする必要があります。私はどうすればそれをすることができます。 2番目の部分は注文商品の合計です。 _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>

から登場している

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

は、この "ActionThatWillReturnContent" を呼び出し、 "ContainerThatIWillUpdate" の内部にコンテンツを挿入します。

代わりに、jQuery.ajaxを使用することがあります。これはもっとうれしいですが、少し読んだり再生したりする必要があります。

アップデート1：

あなたはAddToCartと呼ばれるアクションメソッドにAJAX要求を送信します。この方法は、いくつかの処理を行い、その後、完全なビューを返します。

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

あなたが何をしたいのか、あなたの更新のターゲットIDである「mydiv」、の内部に配置されますパーシャルビューを戻しています。

あなたのアクションメソッドではなくのActionResultより、PartialViewを返すように変更する必要があります

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

感謝。 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

答えを0

@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

ページの一部のみをリロードするには

答えて

関連する問題