Как распечатать данные из базы данных на всплывающее окно модели?

Question

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

Просмотр индекса:

       <!-- 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> 
    }

Iпытаюсь передать идентификатор книги с помощью 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) свойство списка типа Book для циклического просмотра моих книг в представлении Index, 2) свойство типа Book для вызова связанных с моделью данных книги.в представлении «Подробности»:

<!-- 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">&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 запускает действие, и поэтому данные не печатаются.Где я могу ошибиться?Как правильно передать детали книги в модал-бокс?

Answer 1

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