asp mvc обновить элементы на странице

239

24 июня 2017, 09:51

Изучаю 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 = "#" > +@item.Product.Title + < /a></li > 
  } 
 
<script type = "text/javascript" > 
  $("#SmallCartCount").text(ViewData.Eval("count")); 
  $("#SmallCartPrice").text(ViewData.Eval("price")); 
</script>

Тут js не работает, к тому же не ясно как мне поместить foreach который формирует список в $("#SmallCartList").text());

Вопрос: как реализуется данный функционал?

Спасибо!

Answer 1

Частичное представление:

@{
  var productList = ViewData.Eval("lastAdded") as List<ShopStore.Models.Cart>; 
}
@foreach(var item in @productList) { 
  <li > < a href = "#" > +@item.Product.Title + < /a></li >
}
<input type="hidden" class="SmallCartCount" value="@ViewData.Eval("count")" />
<input type="hidden" class="SmallCartPrice" value="@ViewData.Eval("price")" />

Javascript:

$.ajax({
  type: "GET",
  url: "Carts/SmallCart",
  dataType: "html",
  success: function(result) {
    $("#SmallCartList").html(result);
    $("#SmallCartCount").text($("#SmallCartList .SmallCartCount").val());
    $("#SmallCartPrice").text($("#SmallCartList .SmallCartPrice").val());
  }
});