4

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();
});

しかし、私はこの例を検討してきましたが、クリック登録コードを部分ビューにインラインで配置しているだけであることに気付きました。

これは一般的に安全なパターンですか？スクリプトを実行する前に、部分ビューのDOMの読み込みが完了したことを確認するにはどうすればよいですか？

4

2 に答える 2

4

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>
于 2013-02-12T19:20:47.550 に答える
0 
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>
于 2018-09-28T09:47:57.510 に答える