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

Question

I have successfully rendered partial view using jQuery.ajax my code is:

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");
        }
    });
});

And my controller

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);
}

The above code can successfully return html and css, but I lost my javascript effect. If I use HTML.RenderAction() this can return partial view with javascript effect. But in my case I cannot use HTML.RenderAction . How can I solve this problem?

Answer 1

As you are returning modal whole html as partial view, you will need to call the modal("show") on the modal div element to show it:

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

The approach i normally do is put the modal on the parent view ie the main view not partial view :

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

and in ajax call success push the html from partial view as content of popup body and call .modal("show") :

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

or we can put the following attributes on the button, in that case the popup should be on the page already which means it should be already on the main view:

<button type="button" class="btn btn-primary" 
        data-toggle="modal" data-target="#modal-body-id">