Question

我在电子商务网站上工作。我现在要做的就是当用户点击＆＃34; Open Modal＆＃34;链接，将打开一个模态对话框并显示产品详细信息。

当我第一次点击ActionLink时，它将调用Product控制器中的QuickView操作方法并显示产品的详细信息。但是，当我单击ActionLink获取另一个产品时，它不会调用QuickView操作方法。此外，模态对话框的内容仍显示以前产品的信息。基本上，问题是只在我第一次点击ActionLink时才调用action方法。当我再次单击ActionLink时，不再调用action方法。当我右键单击页面并检查元素时，我可以看到正确生成模态操作链接。我很困惑。请帮忙。

主要观点：

<div id="product">
    @foreach (var product in Model.Products)
    {
        @Html.Partial("ProductSummary", product)
    }
</div>

// The normal bootstrap modal with out any content in the modal-content div. Note that the id matches the data_target from the link
<div id="modal-container" class="modal fade product_view" tabindex="-1" 
   role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

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

@section scripts {
    // The normal bootstrap behavior is to only grab the content for the 
    // modal once, if you need to pull in different partial views then the data on 
    // the modal will have to be cleared.
<script type="text/javascript">
    $(function () {
        $('#modal-container').on('hidden.bs.modal', function () {
            $(this).removeData('bs.modal');
            $('#modal-container .modal-content').empty();
        });
    });

    // callback from form modal
    function success() {
        alert("Success!");
    }
</script>

产品摘要：

    <div class="caption">
        <h4 class="pull-right">@Model.Price.ToString("c")</h4>
        <h4>
            @Ajax.ActionLink(Model.Name, "ProductDetail", new { productId = Model.ProductID, returnUrl = Request.Url.PathAndQuery }, 
                new AjaxOptions { UpdateTargetId = "content", InsertionMode = InsertionMode.Replace })
        </h4>
    </div>
    <div class="space-ten"></div>
    <div class="btn-ground text-center">
        <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("AddToCart", "Cart", new { ProductId = Model.ProductID})'">
            <i class="fa fa-shopping-cart"></i> Add To Cart
        </button>

        <div>
            // Create a link that calls the controller method that returns the partial view
            @Html.ActionLink("Open Modal", "QuickView", "Product", new { ProductId = Model.ProductID }, new
            {
                // Needed to link to the html of the modal
                data_target = "#modal-container",
                // Tells the bootstrap javascript to do its thing
                data_toggle = "modal"
            })
        </div>
    </div>
    <div class="space-ten"></div>
</div>

快速浏览：

<div class="modal-header">
    <a href="#" data-dismiss="modal" class="class pull-right"><span 
class="glyphicon glyphicon-remove"></span></a>
    <h3 class="modal-title">@Model.Name</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-6 product_img">
            <img 
src="http://img.bbystatic.com/BestBuy_US/images/products/5613/5613060_sd.jpg" 
class="img-responsive">
    </div>
    <div class="col-md-6 product_content">
        <h3 class="cost"><span class="glyphicon glyphicon-usd"></span> @Model.Price </h3>
        <div class="space-ten"></div>
        <div class="btn-ground">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button>
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span> Add To Wishlist</button>
        </div>
    </div>
</div>

产品控制器中的操作方法：

    public ActionResult QuickView(int productId)
    {
        Product prod = repository.Products
            .FirstOrDefault(p => p.ProductID == productId);

        return PartialView(prod);
    }

image of the inspect element

Answer 1

在操作链接尝试调用服务器之前，请确保模式内容为空。

你有javascript代码，似乎它会在模态被隐藏时清除模态内容。当你第一次点击动作链接后，模态是否仍然有内容？

修改

尝试添加onclick函数，在单击操作链接时清空模式内容。因此，通过更改以下代码来添加ActionLink调用中的onclick属性：

改变这个：

$('#modal-container').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); $('#modal-container .modal-content').empty(); });

为：

var emptyModalContent = function() { $('#modal-container').removeData('bs.modal').find('.modal-content').empty(); }; $('#modal-container').on('hidden.bs.modal', function () { emptyModalContent(); });

并将onclick属性添加到操作链接：

@Html.ActionLink("Open Modal", "QuickView", "Product", new { ProductId = Model.ProductID }, new { // Needed to link to the html of the modal data_target = "#modal-container", // Tells the bootstrap javascript to do its thing data_toggle = "modal", onclick = "emptyModalContent()" })

Answer 2

谢谢所有给我建议的人。为了解决这个问题，我需要结合@Anthony McGrath，@ ecKO和@Kumar_Vikas提供的解决方案。

以下是解决方案：

@Anthony McGrath提到：

从以下位置更改脚本：

$('#modal-container').on('hidden.bs.modal', function () {
    $(this).removeData('bs.modal');
    $('#modal-container .modal-content').empty();
});

为：

var emptyModalContent = function() {
    $('#modal-container').removeData('bs.modal').find('.modal-
content').empty();
};

$('#modal-container').on('hidden.bs.modal', function () {
    emptyModalContent();
});

之后，请关注@ecKO和@ Kumar_Vikas＆＃39;想法并将调用action方法的动作链接从@ Html.ActionLink更改为@ Ajax.ActionLink。

Asp.Net MVC 5 ActionLink仅在我点击它时第一次调用Action方法

2 个答案: