应该如何处理 ajax 加载的局部视图中的 javascript？答案

【问题标题】：How should javascript in an ajax loaded partial view be handled?应该如何处理 ajax 加载的局部视图中的 javascript？
【发布时间】：2013-01-28 03:03:52
【问题描述】：

在 ASP.NET MVC 中，在通过 Ajax 加载的局部视图上运行 Javascript 的首选模式是什么？

例如，假设您需要在局部视图中连接一些点击事件。

当然，在分部视图中放置这样的内容是行不通的，因为在分部视图加载 Ajax 后不会触发文档就绪事件。

<script type="text/javascript">
    $(function() {
        $("a.foo").click(function() {
            foo();
            return false;
        });
    });
</script>

我想这样的事情可能会奏效，但它安全吗？

<script type="text/javascript">
    $("a.foo").click(function() {
        foo();
        return false;
    });
</script>

我一直使用的模式是在加载部分后从我的父视图运行任何 Javascript，如下所示：

$.get(url, function(html) {
    $("#partialDiv").html(html);

    // Now that the partial has loaded...
    RegisterClicks();
});

但我一直在研究 this 示例，并注意到他们只是将点击注册代码内嵌在局部视图中。

这是一种普遍安全的模式吗？如何确保在我的脚本运行之前部分视图的 DOM 已完成加载？

【问题讨论】：

这是个好问题。希望这篇文章对stackoverflow.com/questions/3619484/…和hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS有帮助
要么我做你的第二个例子，没有问题，但我避免它，因为如果部分重复，那么 javascript 会不必要地重复并且也不会被缩小。相反，我将 javascript 放在外部 *.js 文件中，并且父页面必须包含它（因此，如果父页面通过捆绑/缩小框架包含它会被缩小）。我希望 Partials 有某种 OnLoadJavascript 或受支持的部分，但不幸的是他们没有。
我们真的需要这个：aspnet.uservoice.com/forums/41201-asp-net-mvc/suggestions/…
@AaronLS，如果我可以问，作为风格问题，你会为每个部分有一个单独的 js 文件吗？还是一个包含所有部分代码的 js 文件？
@Eric 通常每个部分一个，但有时我有一个像“_AccountManager.cshtml”这样的部分页面，它反过来使用一些其他的子 ajax 部分，比如“_AccountTypeSelector.cshtml”作为交互部分页。由于这组部分总是在 _AccountManager.cshtml 下一起使用，我将有一个 AccountManager.js 来保存那些密切相关的部分的所有 JavaScript 代码。

标签： javascript asp.net-mvc partial-views asp.net-mvc-partialview

【解决方案1】：

jQuery .on() 函数应该可以解决问题，不是吗？它应该适用于动态添加的内容。

将其作为完整内容的一部分提供

<script type="text/javascript">
    $(function() {
        $("#partialContent").on("click", "a.foo", function() {
            foo();
            return false;
        });
    });
</script>

<div id="partialContent">
   <a href="#" class="foo">Link 1</a>
   <a href="#" class="foo">Link 2</a>
   <!-- More dynamic content -->
</div>

【讨论】：

你确定 JQuery.on() 将使渲染的 javascript 可执行吗？
是的，只要父页面上存在#partialContent，那么任何动态a.foo 都会被连接起来。由于此代码特定于部分，我将其移动到它自己的 js 文件中，父页面仍将包含该脚本，但这样它就可以在任何利用该部分的父页面上被缩小、外部化和重用查看。
@Eric，元素会存在。我创建了一个非常简单的fiddle 来证明它是有效的。
正如@AaronLS 提到的，将 javascript 代码放入它自己的 .js 文件中，该文件可以包含在需要以相同方式连接链接的任何其他视图中，以及所描述的其他附加好处。希望这对您有所帮助，如果您愿意，请将其标记为答案。
@Eric 必须存在的元素是.on左侧选择的项目，右侧的“a.foo”选择器可以动态创建。基本上正在发生的事情是您将一个事件连接到#partialContent，上面写着“注意从a.foo 冒出的事件”。对于可能有数千个元素的场景（例如表中的td），它也更有效，因为您无需连接数千个td（这将创建数千个事件处理程序），而是连接到单个父元素并让事件冒泡。

【解决方案2】：

Scripts are not loaded on Partial view via partial view loaded by ajax in Asp.net MVc 

 <div class="modal fade" id="myEditCourseModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title text-center">Update Data</h4>
                    </div>
                    <div class="modal-body" id="CourseEditPreview">
                        @Html.Action("CourseUpdatePartial", "AdminCourse")
                    </div>
                </div>
            </div>
        </div>

<script type="text/javascript">

    function OpenCourseEdit(currentId) {
        $.ajax({
            type: "Get",
            url: '@Url.Action("CourseUpdatePartial", "AdminCourse")',
            cache: false,
            Async: true,
            contentType: 'application/html;charset=utf-8',
            dataType: "html",
            data: { CourseID: currentId },
            success: function (data) {
                var content = $('#CourseEditPreview').html(data);
                eval(content);
                $('#myEditCourseModal').modal('show');
            },
            error: function (error) {
                $("#LoadingPanel").css("display", "block");
                $('#CourseEditPreview').html("");
            }
        })
    }
</script>

【讨论】：

如果您要发布答案，请尝试解释为什么您的解决方案有效或更好