Question

案例1 ：点击Delete 1按钮时会弹出Bootstrap的模态对话框，当您点击该弹出窗口的Delete按钮时，jquery正如预期的那样，正确在Chrome浏览器的控制台窗口中写下Test: id1。

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

注意：两种情况下jqueries之间的区别在于Case 2我Case 1 <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>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm">  <div class="modal-content"> <div class="modal-header btn-warning" style="font-weight:bold;color:white;"> <button type="button" class="close" data-dismiss="modal">×</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> } <div id="DeleteBtnParentID"> @Html.Partial("TestPartial") </div>必须。

案例1 ：以下作品。

查看（所有这些都没有局部视图）

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

案例2 ：当通过部分视图呈现上述html时，以下操作无效：

主视图：

Microsoft Internet Controls

部分视图 [TestPartial.cshtml]：

Microsoft HTML Object Library

Answer 1

问题是你在PartialView中使用@section，它永远不会按设计工作。

解决方法：改变

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

有关详细信息，请查看以下问题： Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine

确认删除模式/对话框在部分视图

1 个答案: