Question

我已经成功使用jQuery.ajax渲染了部分视图，我的代码是：

HTML

<div id="product-pop-up" style="display: none; width: 700px;">
    <div class="product-page product-pop-up">
        <div class="row" id="modalBody">

        </div>
    </div>
</div>

jQuery

$(".button-first-view").click(function () {
    var productId = $(this).data("id");

    $.ajax({
        url: "/Product/FastViewProduct",
        data: {
            "productId": productId
        },
        contentType: "application/html; charset=utf-8",
        type: "GET",
        cache: !0,
        datatype: "html",
        success: function (t) {
            $("#modalBody").html(t);
        },
        error: function () {
            $("#modalBody").html("some things wrong");
        }
    });
});

还有我的控制器

public async Task<ActionResult> FastViewProduct(int productId)
{
    var quickView = await _objProductDal.GetProductForQuickView(productId);

    if (quickView.ProductName == null)
    {
        ViewBag.ErrorMessage = "Something wrong, No product Found";
    }

    return PartialView("_FastViewProductPartial", quickView);
}

上面的代码可以成功返回html和css，但是我失去了JavaScript效果。如果我使用HTML.RenderAction()，则可以返回具有JavaScript效果的部分视图。但就我而言，我不能使用HTML.RenderAction。我该如何解决这个问题？

Answer 1

当您返回模态整个html作为部分视图时，您将需要在模态div元素上调用from django.urls import path from hello.views import myView urlpatterns = [ path('admin/', admin.site.urls), path('sayHello/',myView), path('', sayHello), ]来显示它：

modal("show")

我通常采用的方法是将模态放在父视图上，即主视图而不是局部视图：

success: function (t) {
                    $("#modalBody").html(t);
                    $("#product-pop-up").modal("show");
                },

在ajax调用成功中，将部分视图中的html作为弹出式正文的内容推送并调用<div class="modal fade" id="modal-id" role="dialog" aria-labelledby="" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="la la-remove"></span> </button> </div> <div class="modal-body" id="modal-body-id"> </div> </div> </div> </div>：

.modal("show")

或者我们可以在按钮上放置以下属性，在这种情况下，弹出窗口应该已经在页面上了，这意味着它应该已经在主视图上了：

 success: function (t) {
                    $("#modal-body-id").html(t);
                    $("#modal-id").modal("show");
                },

使用Ajax渲染部分视图的问题

1 个答案: