Question

我在索引视图中有从数据库中检索到的书。每个按钮下方都有一个按钮。单击它们时，将弹出一个模式框，上面印有相应的图书详细信息（图书img，名称，说明，价格等）。

索引视图：

       <!-- 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类型的list属性在Index视图中循环浏览我的书 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">&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传递给“ Details”操作，检索到相应的书并将其带到视图。但是，似乎在ajax运行之前弹出模式框，因此不会打印数据。我在哪里犯错？如何将书籍详细信息正确传递到模式框？

Answer 1

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

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

1 个答案: