javascript - 如何将数据库中的数据打印到模态弹出框中？

Question

我在索引 View 中从数据库中检索了书籍。每一个下面都有一个按钮。当您单击它们时，应该会弹出一个模态框，上面印有相应的书籍详细信息(书籍 img、名称标题、描述、价格等)。

索引 View :

       <!-- 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 传递图书 ID

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

进入检索相关书籍并将其返回到放置模态框内容的 View 的“详细信息”操作。

    <!-- 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 类型的列表属性在索引 View 中循环遍历我的书2)Book类型的属性，在“Details” View 中调用模型相关的书籍数据:

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

放置模态框内容的 View :

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

当我点击模式打开按钮时，id 被传递到“详细信息”操作，相应的书被检索并带我到 View 。但似乎在 ajax 运行操作之前会弹出模式框，因此不会打印数据。我在哪里犯错？如何正确地将书籍详细信息传递到模态框中？

Answer 1

Ajax 调用是异步的，因此您必须牢记:当您以非同步方式工作时，您应该使用回调来管理异步调用。 jQuery 为 $.ajax() 方法提供不同类型的回调，例如“成功”、“错误”......等等。例如，如果 ajax 调用导致服务器异常，则 HTTP 结果将为 500，您可以在“错误”回调中管理它，使用 jQuery 将引发的自定义方法订阅回调。另一方面，必须通过接受参数的方法订阅成功回调，其中将是服务器响应(在本例中为 html 响应)。因此，如果结果成功(HTTP 状态代码 200)，您将在该参数中拥有 HTML，并且您可以使用它附加到您的模态中(始终使用 jQuery 方法......或者如果您愿意，甚至可以使用简单的 javascript更多的)查看回调订阅:http://api.jquery.com/jquery.ajax/在“回调函数队列”部分。你会发现我只给了你一个真正的基本解释，还有很多东西需要学习!