JavaScript 不能在 PartialView 上运行

Question

我正在使用 MVC4、C# 和 Razor 来制作一个简单的 Web 应用程序。

在我的 Controller 中，我有一个方法返回向用户显示的部分 View ，在本例中是模式弹出窗口:

public ActionResult GetPackageDetails(int id)
{ 
    return PartialView("_EditPackageModal", new ModalEditPackage());
} 

部分 View 是一个模态弹出窗口，按预测显示，但不运行任何 javascript:

@model SuperApp.Model.ModalEditPackage

<div class="modal fade bs-example-modal-lg" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Edit Package @Model.packageName</h4>
            </div>
            <div class="modal-body">

                <div>
                    <label class="control-label">Package Name: </label>
                    <input type="text" class="form-control" id="package-name" placeholder="@Model.packageName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

这是我希望在部分 View 上运行的 JavaScript 代码:

<script>
    $("input").click(function () {
        alert("hello world!");
    });
</script>

读完这个问题后:

• Don't run javascript function in PartialView

我意识到我必须将脚本包含在部分 View 中。总结一下:

1. 分部 View 无法运行我项目中的 JS 代码。
2. 分部 View 仅运行使用 <script> 在分部 View 中直接指定的 JS 代码。标签

现在，在这个例子中这很好，但在现实世界中，我有几个在部分 View 上工作的脚本，而且它们相当大。此外，客户端已经下载了它们，因为它们正在其他 View 中使用，而且我不知道如何告诉部分 View 脚本所在的位置，因为我使用的是 bundle 。

有没有办法解决这个问题，而无需将脚本直接破坏到部分 View 中？

Answer 1

为所有模态框或 html block 指定唯一的名称。让你的js代码像这样:

$(document).on('click', '#yourSpecifiedDomElement input','click',function(){
    alert("hello world!");
});

将所有 javascript 代码放置到 bundle 中包含的指定 js 文件中。