javascript - 无法显示带有 asp.net mvc url.action 链接的 Bootstrap 对话框

Question

在能够显示带有 url 操作链接的模态对话框方面，我显然遗漏了一些东西。

我知道如何通过 jQuery 单击事件显示 Bootstrap 对话框，但我希望做的是:

我有一个索引页面，上面有一个 url.action 链接。当用户单击链接时，我链接到适当的 Controller 操作方法(编辑)，没有任何问题(在调试期间看到)，希望显示 Bootstrap 模式弹出对话框。但是，没有模式对话框弹出。

如果我在操作链接上包含数据目标，该链接甚至都不起作用。如果我删除它，它会到达 View ，但不会弹出模式对话框，因为链接上没有任何内容说明数据目标是什么。我希望我在模式弹出窗口目标的链接上的语法不正确。我希望如果我为对话框包含适当的 Bootstrap 属性，它就会弹出。

我真的需要一些帮助，我将不胜感激。

这是我的索引页面上的链接(包含数据目标)。再次注意，如果我从下面的代码片段中排除“data-toggle”和“data-target”，我会进入 View ，但没有弹出对话框。

data-toggle="modal", data-target="#categoryEditModal"

<a href="@Url.Action("Edit", "Category", new { area = "Categories", id = item.CategoryID }) data-toggle="modal", data-target="#categoryEditModal"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</a>

这是我的目标 View 。我可以在调试时验证模型中填充了 Model.CategoryID 和 Model.CategoryDe​​scription。

<div class="modal" id="categoryEditModal" tabindex="-1" role="dialog" aria-labelledby="categoryModal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="categoryModal-label">Category Description</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="form-group">
                            @Html.LabelFor(model => model.CategoryDescription, htmlAttributes: new { @class = "control-label required col-md-2 col-sm-2 col-xs-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.CategoryDescription, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.CategoryDescription, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="btnSaveCategory">Save</button>
                </div>
            </div>
        </div>
    </div>

在Index页面编辑代码，弹出对话框

<a href="@Url.Action("Edit", "Category", new { area="Categories", id = item.CategoryID })"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</a>

Answer 1

在你看来有

<a href="@Url.Action("Edit", "Category", new { area = "Categories", id = item.CategoryID }) data-toggle="modal", data-target="#categoryEditModal" data-modal=""><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit</a>


<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

添加 jquery:

$(function () {

    $.ajaxSetup({ cache: false });

    $("a[data-modal]").on("click", function (e) {

        $('#myModalContent').load(this.href, function () {


            $('#myModal').modal({
                /*backdrop: 'static',*/
                keyboard: true
            }, 'show');

        });

        return false;
    });
});

然后在您的 Controller 中返回局部 View :

    Return PartialView("partialviewname")