Question

在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已完成加载？

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

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

如何处理ajax加载的局部视图中的javascript？

2 个答案: