Изучаю asp, никак не могу найти правильный путь для реализации такой фичи:
На странице есть несколько div с данными и при нажатии на кнопку нужно передать в них актуальные данные(а для них создать сложную html разметку) без перезагрузки страницы.
Пример:
На странице есть корзина, она отображает количество товаров в ней их общую цену, и в раскрывающемся списке 3 последних товара. Разметка корзины расположена на _Layout.cshtml . корзина(html код) должна заполнится при загрузке странице и если нажата кнопка "добавить продукт". И без перезагрузки страницы.
Проблема: цена, количество и список, это все разные блоки(нельзя просто вернуть весь их общий html ), и прежде чем вставить в них данные их нужно найти на странице. Я пробовал сделать так:
- Создал отдельную js функцию, вызывал ее где нужно, а в ней ajax получал данные и формировал html .
function SmallCartUpdate() {
$.ajax({
type: "GET",
url: "Carts/SmallCart",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function(result) {
$("#SmallCartCount").text(result.count);
$("#SmallCartPrice").text(result.price);
var productList = '';
$.each(result.lastAdded, function(index, item) {
productList += '<li > <a href="#">' + item.Product.Title + '</a></li >';
})
$("#SmallCartList").html(productList);
},
});
}
Но так не удобно создавать html для списка, я хочу сделать более сложную структуру. И нет доступа к Razor.
- Вызывать метод контролера и вернуть PartialView и уже в нем найти блоки и вставлять в них данные.
@ {
var productList = ViewData.Eval("lastAdded") as List < ShopStore.Models.Cart > ;
}
@foreach(var item in @productList) {
<li > < a href = "#" > [email protected] + < /a></li >
}
<script type = "text/javascript" >
$("#SmallCartCount").text(ViewData.Eval("count"));
$("#SmallCartPrice").text(ViewData.Eval("price"));
</script>
Тут js не работает, к тому же не ясно как мне поместить foreach который формирует список в $("#SmallCartList").text());
Вопрос: как реализуется данный функционал?
Спасибо!