时间戳

首页 > 解决方案 > 如何将数据库中的数据打印到模型弹出框？

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

问题描述

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

索引视图：

       <!-- 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 运行操作之前会弹出模式框，因此不会打印数据。我在哪里犯错？如何正确地将书籍详细信息传递到模态框？

标签： javascriptc#jqueryajax

解决方案

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

推荐阅读