Как я могу перезагрузить только часть страницы - PullRequest
Новая
       1

Как я могу перезагрузить только часть страницы

3 голосов
/ 28 марта 2012

Моя страница, которая для интернет-магазина, состоит из двух частей. Первая часть - список продуктов. 

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

Ответы [ 2 ]

0 голосов
/ 29 марта 2012

// 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 голосов
/ 28 марта 2012 
<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», который является вашим идентификатором цели обновления.

Ваш метод действия необходимо изменить, чтобы он возвращал 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.
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...