确认删除模式/对话框在部分视图中使用时不起作用 [英] Confirm Delete Modal/Dialog Does not work when using within Partial View

问题描述

案例1 :当单击Delete 1按钮时，会弹出Bootstrap的模态对话框，并且当您单击该弹出窗口的Delete按钮时，如预期的那样，下面的jquery代码， 正确正确地将Test: id1写入Chrome浏览器的控制台窗口.

Case 1: When clicking on the Delete 1 button the Bootstrap's modal dialog pops up and when you click on the Delete button of that popup, jquery code below, as expected, correctly writes Test: id1 in Chrome browser's console window.

案例2 :但是，当您使用部分视图呈现相同的html时，下面的case 2中显示的jquery代码不会向Chrome浏览器的控制台窗口写入任何内容.我认为这可能与Case 2主视图中的id = DeleteBtnParentID有关.

Case 2: But when you use a partial view to render the same html, the jquery code, shown in case 2 below, does not write anything to Chrome browser's console window. I think it may have something to do with the id = DeleteBtnParentID in the main View of Case 2.

注意:jqueries在两种情况下的区别在于，在Case 2中，我使用的是

NOTE: Difference between the jqueries in two cases is that in Case 2 I'm using Event Delegation while in Case 1 I did not have to.

1. 案例1 :以下作品.

1. Case 1: Following works.

查看(全部显示，无局部查看)

View (all by itself without partial view)

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id3">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script>
        $(document).ready(function () {

            $('#DeleteBtnID').on('click', function (event) {
                console.log('Test: ' + $(this).attr('value'));
            });

            $('#myModal').on('show.bs.modal', function (e) {
                var btnValue = $(e.relatedTarget).attr('value');
                $('#DeleteBtnID').attr('value', btnValue);
            })
        });
    </script>
}

1. 案例2 :当通过部分视图呈现上述html时，以下操作不起作用:

1. Case 2: Following dos NOT work when the above html is rendered via a Partial View:

主视图:

<div id="DeleteBtnParentID">
    @Html.Partial("TestPartial")
</div>

部分视图 [TestPartial.cshtml]:

Partial View [TestPartial.cshtml]:

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="id3">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script>
        $(document).ready(function () {

            $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
                console.log('Test: ' + $(this).attr('value'));
            });

            $('#myModal').on('show.bs.modal', function (e) {
                var btnValue = $(e.relatedTarget).attr('value');
                $('#DeleteBtnID').attr('value', btnValue);
            })
        });
    </script>
}

推荐答案

问题是您在PartialView中使用了@section，这在设计上是行不通的.

The problem is that you are using @section inside PartialView which will never work by design.

解决: 更改为

@section Scripts{
<script>
    $(document).ready(function () {

        $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
            console.log('Test: ' + $(this).attr('value'));
        });

        $('#myModal').on('show.bs.modal', function (e) {
            var btnValue = $(e.relatedTarget).attr('value');
            $('#DeleteBtnID').attr('value', btnValue);
        })
    });
</script>
}

到

<script>
    $(document).ready(function () {

        $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
            console.log('Test: ' + $(this).attr('value'));
        });

        $('#myModal').on('show.bs.modal', function (e) {
            var btnValue = $(e.relatedTarget).attr('value');
            $('#DeleteBtnID').attr('value', btnValue);
        })
    });
</script>

有关更多信息，您可以检查以下问题: 将内容注入特定带有Razor View Engine的部分视图ASP.NET MVC 3中的各个部分

For more information you can check this question: Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine

这篇关于确认删除模式/对话框在部分视图中使用时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！