如何将数据库中的数据打印到模式弹出框？答案

【问题标题】：How to print data from database onto model popup box?如何将数据库中的数据打印到模式弹出框？
【发布时间】：2019-08-08 21:38:15
【问题描述】：

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

索引视图：

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

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

    <!-- 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 的列表属性，用于在索引视图中循环浏览我的书籍 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>

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

【问题讨论】：

标签： javascript c# jquery ajax

【解决方案1】：

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

【讨论】：