不能用一个asp.net mvc的url.action链接显示引导对话框 [英] Cannot display bootstrap dialog with an asp.net mvc url.action link

问题描述

我显然失去了一些东西在能够显示与URL跳转链接一个模态对话框。

我知道如何显示来自一个jQuery单击事件引导对话，但我希望做的是以下内容：

我有就可以了url.action链接索引页。当用户点击该链接时，我链接到相应的控制器的操作方法（编辑），没有任何问题在显示模式引导弹出对话框的希望（在调试过程中看到）。然而，没有模态对话框弹出。

如果我包括动作链路上的数据目标，链接甚至不工作。如果我删除它，它就会以查看，但没有模式对话框弹出，因为没有什么，说数据的目标是什么的链接。我希望我有语法的链接模式弹出的目标不正确的。我希望，如果我包括对话的正确引导属性，它会弹出。

我真的在这里可以使用一些帮助，将是非常美联社preciated。

下面是我的索引页面上的链接（与数据目标包括在内）。再次需要注意的是，如果我的排除从下面的code片段数据切换和数据目标，我可以查看，但否对话框弹出。

 数据切换=模式，数据目标=＃categoryEditModal＆LT; A HREF =@ Url.Action（编辑，类别，新{面积=类别，ID = item.CategoryID}）数据切换=模式，数据目标=＃categoryEditModal ＆GT;＆LT;跨度类=glyphicon glyphicon编辑ARIA隐藏=真＆GT;＆LT; / SPAN＆gt;编辑＆LT; / A＆GT;
 

下面是我的目的地查看。我可以确认，虽然调试，Model.CategoryID和Model.CategoryDe​​scription示范填充。

 ＆LT; D​​IV CLASS =莫代尔ID =categoryEditModal的tabindex = -  1角色=对话框中的咏叹调-labelledby =categoryModal标签ARIA隐藏=真正的＆GT;
        ＆LT; D​​IV CLASS =模式-对话框＆GT;
            ＆LT; D​​IV CLASS =模式内容＆GT;
                ＆LT; D​​IV CLASS =模头＆GT;
                    ＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
                    ＆LT; H4类=模式标题ID =categoryModal标签＆GT;分类描述＆LT; / H4＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =模体＆GT;
                    ＆LT; D​​IV CLASS =表单组＆GT;
                        @ Html.ValidationSummary（真，新{@class =TEXT-危险}）
                        ＆LT; D​​IV CLASS =表单组＆GT;
                            @ Html.LabelFor（型号=＆GT; model.CategoryDe​​scription，htmlAttributes：新{@class =控制标签要求COL-MD-2 COL-SM-2 COL-XS-2}）
                            ＆LT; D​​IV CLASS =COL-MD-10＆GT;
                                @ Html.EditorFor（型号=＆GT; model.CategoryDe​​scription，新{htmlAttributes = {新@class =表格控}}）
                                @ Html.ValidationMessageFor（型号=＆GT; model.CategoryDe​​scription，新{@class =TEXT-危险}）
                            ＆LT; / DIV＆GT;
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =模式躯＆GT;
                    ＆LT;按钮式=按钮级=BTN BTN-默认的数据驳回=模式＆GT;关闭＆LT; /按钮＆GT;
                    ＆LT;按钮式=提交级=BTN BTN-主要ID =btnSaveCategory＆GT;保存＆LT; /按钮＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

索引页code编辑弹出对话框

 ＆LT; A HREF =@ Url.Action（编辑，类别，新{面积=类别，ID = item.CategoryID}）＆GT;＆LT ;跨度类=glyphicon glyphicon编辑ARIA隐藏=真＆GT;＆LT; / SPAN＆gt;编辑＆LT; / A＆GT;
 

解决方案

在你看来有

 ＆LT; A HREF =@ Url.Action（编辑，类别，新{面积=类别，ID = item.CategoryID}）数据切换= 模式，数据目标=＃categoryEditModal数据模式=＆GT;＆LT;跨度类=glyphicon glyphicon编辑ARIA隐藏=真＆GT;＆LT; / SPAN＆gt;编辑＆LT; / A＆GT;
＆LT; D​​IV ID ='myModal'类='模态渐显'＆GT;
    ＆LT; D​​IV CLASS =模式-对话框＆GT;
        ＆LT; D​​IV CLASS =模式内容＆GT;
            ＆LT; D​​IV ID ='myModalContent'＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

添加jQuery的：

  $（函数（）{    $ .ajaxSetup（{缓存：假}）;    $（一个[数据模式]）。在（点击，功能（E）{        $（'＃myModalContent'）。负载（this.href，函数（）{
            $（'＃myModal'）。模态（{
                / *背景：静态，* /
                键盘：真
            }， '显示'）;        }）;        返回false;
    }）;
}）;
 

和在你的控制器返回局部视图：

 返回PartialView（partialviewname）
 

I'm obviously missing something in being able to display a modal dialog with a url action link.

I know how to display a bootstrap dialog from a jQuery click event, but what I was hoping to do was the following:

I have an Index page with a url.action link on it. When the user clicks on the link, I link to the appropriate controller action method (Edit) with no problems (seen during debugging) in the hope of displaying the bootstrap modal popup dialog. However, no modal dialog pops up.

If I include a data-target on the action link, the link doesn't even work. If I remove it, it gets to the View, but no modal dialog pops up because there is nothing on the link that says what the data target is. I'm hoping I have the syntax incorrect on the link for the target of the modal popup. I'm hoping that if I include the proper bootstrap attributes for the dialog, it will pop up.

I really could use some help here and would be much appreciated.

Here is the link on my Index page (with the data target included). Note again that if I exclude the "data-toggle" and "data-target" from the below code snippet, I get to the View, but no dialog pops up.

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>

Here is my destination View. I can verify that while debugging, the Model.CategoryID and Model.CategoryDescription are populated in the Model.

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

Code edit on Index page to bring up the dialog box

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

解决方案

In your view have

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

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

And in your controller return the partial view:

    Return PartialView("partialviewname")

这篇关于不能用一个asp.net mvc的url.action链接显示引导对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！