Как отобразить всплывающее окно на веб-странице после нажатия кнопки MVC

Question

Мне нужно отобразить всплывающее окно, которое будет отображать описание продукта после нажатия кнопки, но оно не отображается.

<button onclick="@Html.Partial("ProductDetails")">Details</button>

Учитывая, что у меня есть другая страница с именем ProductDetails

Answer 1

Вам нужно будет использовать некоторые AJAX для заполнения всплывающего окна частичного представления. Вот подход к разработке, который я рекомендую. Он использует jQuery и Bootstrap.

РЕДАКТИРОВАТЬ: я обновил код для передачи productId к контроллеру. Также добавлены индексный метод и страница для ясности.

Создайте метод в вашем контроллере, который будет возвращать частичное представление (при условии, что ваше представление называется «ProductDetails»).

public ActionResult Index()
{
    var products = _yourDatabase.Products;
    var model = products.Select(p => new new ProductDetailsViewModel
    {
      ProductID = productDetailsData.ID,
      //...fill in the rest of the properties
    }).ToList();
    return View(model);
}
public ActionResult ProductDetails(int productId)
{
  var productDetailsData = _yourDatabase.Products.SingleOrDefault(p => p.ID == productId);
  //you will need to create this class
  var model = new ProductDetailsViewModel
  {
    ProductID = productDetailsData.ID,
    //...fill in the rest of the properties
  };
  return PartialView(model)
}

В вашем частичное представление «ProductDetails», создать макет для вашего продукта всплывающие детали. Я только что добавил ProductID для начинающих.

@model ProductDetailsViewModel
<p>ProductID: @Model.ProductID</p>

Теперь нажатие кнопки и индексная страница должны выглядеть следующим образом. Также добавьте всплывающее окно и создайте javascript для загрузки частичного представления.

@model List<ProductDetailsViewModel>
@foreach(var item in Model)
{
<button onclick="GetProductDetailsPartial(@item.ID)">Details</button>
}

<div id="modal_product_details" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Product Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="div_product_details"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
function GetProductDetailsPartial(productId){
   $.get('YOUR_CONTROLLER/ProductDetails', { productId: productId } function(data){
      $('#div_product_details').html(data)
      $('#modal_product_details').modal('show')
   })
}
</script>

Надеюсь, это поможет вам. Пожалуйста, дайте мне знать, если вам нужно выполнить эту работу для нескольких продуктов, что можно сделать, передав ProductID на javascript затем на контроллер.