2

Изучаю asp, никак не могу найти правильный путь для реализации такой фичи:

На странице есть несколько div с данными и при нажатии на кнопку нужно передать в них актуальные данные(а для них создать сложную html разметку) без перезагрузки страницы.


Пример:

На странице есть корзина, она отображает количество товаров в ней их общую цену, и в раскрывающемся списке 3 последних товара. Разметка корзины расположена на _Layout.cshtml . корзина(html код) должна заполнится при загрузке странице и если нажата кнопка "добавить продукт". И без перезагрузки страницы.

Проблема: цена, количество и список, это все разные блоки(нельзя просто вернуть весь их общий html ), и прежде чем вставить в них данные их нужно найти на странице. Я пробовал сделать так:

  1. Создал отдельную 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.

  1. Вызывать метод контролера и вернуть 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());

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

Спасибо!

1 ответ 1

3

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

@{
  var productList = ViewData.Eval("lastAdded") as List<ShopStore.Models.Cart>; 
}

@foreach(var item in @productList) { 
  <li > < a href = "#" > [email protected] + < /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());
  }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.