Javascript 确认在局部视图中使用时删除模式/对话框不起作用

案例1：当单击

Delete 1

按钮时，引导程序的模式对话框弹出，当您单击该弹出窗口的

Delete

按钮时，

jquery

下面的代码，如预期的那样，正确地在Chrome浏览器的控制台窗口中写入

Test:id1

案例2：但当您使用局部视图呈现相同的html时，下面的

case2

中显示的

jquery

代码不会向Chrome浏览器的控制台窗口写入任何内容。我认为这可能与案例2的主视图中的

id=DeleteBtnParentID

有关

注意：两种情况下的

jquerys

之间的区别在于，在

情况2中

我正在使用，而在

情况1中

我不必这样做

案例1：以下作品

视图（无需局部视图，全部单独查看）

Delete1
删除2
删除3
&时代；
删除警告
你确定吗

删除
取消
@节脚本{
$（文档）.ready（函数（）{
$（'#DeleteBtnID'）。在（'click'，函数（事件）{
console.log（'Test:'+$（this.attr（'value'））；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var btnValue=$（e.relatedTarget）.attr（'value'）；
$（'#DeleteBtnID'）.attr（'value'，btnValue）；
})
});
}

案例2：通过局部视图呈现上述html时，以下dos不起作用：

主视图：

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

@Html.Partial（“TestPartial”）

局部视图[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>
}

Delete1
删除2
删除3
&时代；
删除警告
你确定吗

删除
取消
@节脚本{
$（文档）.ready（函数（）{
$（'DeleteBtnParentID'）。在（'click'，'DeleteBtnID'，函数上（事件）{
console.log（'Test:'+$（this.attr（'value'））；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var btnValue=$（e.relatedTarget）.attr（'value'）；
$（'#DeleteBtnID'）.attr（'value'，btnValue）；
})
});
}

问题是您在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>
}

@节脚本{
$（文档）.ready（函数（）{
$（'DeleteBtnParentID'）。在（'click'，'DeleteBtnID'，函数上（事件）{
console.log（'Test:'+$（this.attr（'value'））；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var btnValue=$（e.relatedTarget）.attr（'value'）；
$（'#DeleteBtnID'）.attr（'value'，btnValue）；
})
});
}

到

$（文档）.ready（函数（）{
$（'DeleteBtnParentID'）。在（'click'，'DeleteBtnID'，函数上（事件）{
console.log（'Test:'+$（this.attr（'value'））；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var btnValue=$（e.relatedTarget）.attr（'value'）；
$（'#DeleteBtnID'）.attr（'value'，btnValue）；
})
});

有关更多信息，请检查此问题：

---

问题是您在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>
}

@节脚本{
$（文档）.ready（函数（）{
$（'DeleteBtnParentID'）。在（'click'，'DeleteBtnID'，函数上（事件）{
console.log（'Test:'+$（this.attr（'value'））；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var btnValue=$（e.relatedTarget）.attr（'value'）；
$（'#DeleteBtnID'）.attr（'value'，btnValue）；
})
});
}

到

$（文档）.ready（函数（）{
$（'DeleteBtnParentID'）。在（'click'，'DeleteBtnID'，函数上（事件）{
console.log（'Test:'+$（this.attr（'value'））；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var btnValue=$（e.relatedTarget）.attr（'value'）；
$（'#DeleteBtnID'）.attr（'value'，btnValue）；
})
});

有关更多信息，请检查此问题：

---

我不清楚您建议的更改。在ASP.NETMVC中，为了在单个视图中使用

javascript

代码，必须有

@sectionscripts{…}

。这就是为什么他们有

@RenderSection（“脚本”，必需：false）

内部布局视图：

\u layout.cshtml

是的，我知道。你可以在视图中完成，但不能在局部视图中完成，这就是问题所在。或者，您可以将脚本放在partialViewB中，但如果我正确理解您的建议，它会建议我从

@section Scripts{…}

中删除jquery代码，这样就可以了。但是从您提供的链接中阅读解决方案时，您似乎希望建议将整个脚本从部分视图移动到主视图。你能把你的建议改写成我认为你真正想要的吗？我会把你的建议标记为答案。是的，我的建议是，你可以只添加你的脚本，而不是在你的部分中添加@section脚本，当你把脚本放在主视图中时，它可以正常工作。下面是一个示例，例如：我已经测试过，通过添加不带

@section

的脚本，Chrome的控制台窗口中会出现以下错误：

未捕获引用错误：$未定义

。我也注意到，这是因为

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