Question

我有一个可重用的组件实现为MVC3 PartialView。该组件包括jquery-ui小部件，它们需要运行javascript初始化代码。以下是一个简化示例：

==== MySimplifiedPartialView.cshtml ====

<div id="myTabs">
    <ul>
        <li><a href="#myTabs-tab1">Tab 1</a></li>
        <li><a href="#myTabs-tab2">Tab 2</a></li>
        <li><a href="#myTabs-tab3">Tab 3</a></li>
        <li><a href="#myTabs-tab4">Tab 4</a></li>
    </ul>
    <div id="myTabs-tab1">
       ...content
    </div>
    <div id="myTabs-tab2">
       ... content
    </div>
    ... etc ...
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myTabs").tabs();
    });
</script>

当正常将此PartialView加载到页面中时，将运行$(document).ready中的初始化代码并正确初始化窗口小部件（在本例中为jquery-ui选项卡）。

但是我也希望能够动态地将这个PartialView加载到DOM中，例如作为AJAX请求的结果。在这种情况下，确保初始化代码运行的常用方法是什么？在ASP.NET WebForms应用程序中，我将使用UpdatePanel，并通过处理load事件来实现此目的，例如：

Sys.Application.add_load(function () {
    $("#myTabs").tabs();
});

MVC3应用程序中的等价物是什么？

Answer 1

你有几个选择。最简单的方法通常是在部分视图中包含脚本：

<div id="#partial_view">Here is content in my partial view</div>
<script type="text/javascript">
    (function($) {
        $('#partial_view #myTabs').tabs();
    } (jQuery));
</script>

tsegay also shows that you can do it during your ajax success event

作为第二个选项的变体，因为您担心封装，所以要不显眼地初始化javascript行为。例如：

<div data-tabs="true">Here is content in my partial view</div>

然后，您可以将初始化封装到一个公共对象中，如下所示：

<script type="text/javascript">
    (function($) {
        $.myApp = {
            obtruders: {}
        };

        // apply obtrusive behaviors
        $.myApp.obtrude = function (selector, obtruders) {
            var obtruder;
            obtruders = obtruders || $.myApp.obtruders;
            for (obtruder in obtruders) { // execute every registered obtruder
                if (obtruders.hasOwnProperty(obtruder)) { // skip any inherited members

                    // apply an unobtrusive behavior
                    if (typeof obtruders[obtruder] === 'function') {
                        obtruders[obtruder].apply(this,
                            Array.prototype.slice.call(arguments, 0, 1) || document);
                    }

                    // apply all unobtrusive behaviors in set
                    if (typeof obtruders[obtruder] === 'object') {
                        $.myApp.obtrude(selector, obtruders[obtruder]);
                    }
                }
            }
        };

        // apply tabs behavior
        $.extend($.myApp.obtruders, {
            tabs: function (selector) {
                $(selector).find('[data-tabs=true]').tabs();
            }
        });

        $(function() {
            // initialize unobtrusive behaviors
            $.myApp.obtrude(document);
        );

    } (jQuery));
</script>

上面的代码中有一些初始设置，但最终你可以在ajax成功事件中执行此操作：

success: function(html) {
    $('#partial_placeholder').html(html);
    $.myApp.obtrude($('#partial_placeholder'));
}

视图不需要知道它必须在局部视图中的任何内容上调用.tabs（），只是部分具有一些不显眼的UX行为。您可以使用不显眼的日期选择器或其他需要初始化的东西来做同样的事情。您需要的只是$ .myApp对象中的另一个$ .extend部分：

// apply datepickers
$.extend($.myApp.obtruders, {
    datepickers: function(selector) {
        $(selector).find('[data-datepicker=true]').datepicker();
    }
});

这样做的另一个好处是您不需要在普通（非部分）视图上进行任何初始化。 $（function（）{..}）;在上面的大脚本结束时，当脚本首次加载到浏览器中时，通过调用$ myApp.obtrude（document）来为您处理。

Answer 2

一个选项是你可以在ajax调用结束后加载jquery-ui标签

如果您使用jquery进行ajax调用

$.get('..',{},function(){
$("#myTabs").tabs(); //this will load the jquery-ui tabs
});

如何初始化可以在MVC3应用程序中动态加载的jquery ui小部件

2 个答案: