javascript - Cannot display bootstrap dialog with an asp.net mvc url.action link - Stack Overflow

admin管理员组

文章数量:1400424

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>

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>

• javascript
• jquery
• asp
• asp-mvc
• twitter-bootstrap

Share Improve this question Follow edited Jan 25, 2015 at 1:32 sagesky36 asked Jan 23, 2015 at 1:35 sagesky36sagesky36 4,6922121 gold badges8787 silver badges134134 bronze badges 1

• Use jquery to return a partial view and open the modal. – RickJames Commented Jan 23, 2015 at 2:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptCannot display bootstrap dialog with an aspnet mvc urlaction linkStack Overflow