Блог

У меня есть книги, извлеченные из базы данных в индексном представлении. У каждого из них есть кнопка ниже. При нажатии на них должно появиться модальное окно с соответствующими сведениями о книге (изображение книги, название, описание, цена и т.д.), напечатанными на нем.

Индексный просмотр:

        <!-- language: lang-html -->
        @model AuthorTest.Models.HomeModel 


<!--razor codes where book properties are called-->
        @foreach(var book in Model.Bestsales) 
    {
        <a class="first__img" href="single-product.html"><img src="~/Uploads/img/@(book.Id   " .jpg ")"</a>
        <h4>product.html">@book.Name</a></h4>
        <ul class="prize d-flex">
           <li>@book.Price</li>
        </ul>
        <!--modal-box pop-up button-->
        <a data-toggle="modal" title="Quick View" data-id="@book.Id" class="modal-open" href="#productmodal"><i class="bi bi-search"></i></a> 
    }
  

Я пытаюсь передать идентификатор книги с помощью ajax

 <!-- language: lang-js-->
 @section scripts{
    <script> 
        $(".modal-open").click(function () {
            var id = $(this).data("id");
            $.ajax({
                type: "POST",
                url: "/Home/Details/"   id
            });
        });
    </script>
    }
  

в действие «Подробности», которое извлекает связанную книгу и возвращает ее в представление, где размещается содержимое модального поля.

     <!-- language: lang-cs-->
     [HttpPost]
            public ActionResult Details(int id)
            {
                HomeModel model = new HomeModel();
                var book = db.Books.Where(b => b.Id == id).Include(b => b.Author).SingleOrDefault();
                if (book == null)
                {
                    HttpNotFound();
                }

                book.DisplayNumber  ;
                db.SaveChanges();
                model.bookDetails = book;
                return view( model);
           }
  

Это класс HomeModel, который я использую для хранения двух моделей 1) свойство list типа Book для перебора моих книг в индексном представлении
2) свойство типа книги для вызова связанных с моделью данных книги в представлении «Подробности»:

 <!-- language: lang-cs-->
public class HomeModel
{
    public List<Book> BestSales { get; set; }
    public Book bookDetails { get; set; }
}
  

представление, в котором размещается содержимое модального окна:

 <-- language: lang-html-->
@model AuthorTest.Models.HomeModel

   div id="quickview-wrapper">
    <!-- Modal -->

    <div class="modal fade" id="productmodal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal__container" role="document">
            <div class="modal-content">
                <div class="modal-header modal__header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="modal-product">
                        <!-- Start product images -->
                        <div class="product-images">
                            <div class="main-image images">
                                <img alt="big images" src="~/Uploads/img/@(Model.bookDetails.Id   ".jpg")">
                            </div>
                        </div>
                        <!-- end product images -->
                        <div class="product-info">
                            <h1>@Model.bookDetails.Name</h1>
                            <div class="rating__and__review">

                            </div>
                            <div class="price-box-3">
                                <div class="s-price-box">
                                    <span class="new-price">@Model.bookDetails.Price</span>
                                    <span class="old-price">$34.00</span>
                                </div>
                            </div>
                            <div class="quick-desc">
                                @Model.bookDetails.Description
                            </div>
                            <div class="addtocart-btn">
                                <a href="#">Add to cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
  

Когда я нажимаю кнопку модального открытия, идентификатор передается действию «Подробности», извлекается соответствующая книга и выводит меня на просмотр. Но похоже, что модальное окно появляется перед выполнением ajax action, и поэтому данные не печатаются. Где я допускаю ошибку? Как правильно передать сведения о книге в модальное окно?

Вызов Ajax является асинхронным, поэтому вы должны усвоить следующее: когда вы работаете несинхронным способом, вы должны управлять асинхронными вызовами с обратными вызовами. jQuery предлагает различные типы обратного вызова для метода $.ajax(), такие как «успех», «ошибка» …. снова и снова. Например, если вызов ajax приводит к исключению сервера, результатом HTTP будет 500, и вы можете управлять им в обратном вызове «ошибка», подписавшись на обратный вызов вашим пользовательским методом, который будет вызван jQuery. С другой стороны, обратный вызов с успехом должен быть подписан методом, который принимает параметры, где будет ответ сервера (в данном случае, ответ html). Итак, если результат будет успешным (код состояния HTTP 200), у вас будет HTML в этом параметре, и вы можете использовать его для добавления в вашем модальном (всегда с помощью методов jQuery … или даже в простом javascript, если вам больше нравится) Взгляните на подписки на обратные вызовы:http://api.jquery.com/jquery.ajax / в разделе «Очереди функций обратного вызова». Вы обнаружите, что я дал вам только реальное базовое объяснение, и вам предстоит узнать гораздо больше!