asp.net - 在 MVC 4.0 中的部分 View 中使用节

Question

当我需要在特定元素上初始化 jQuery ui 时，我想在部分 View 中包含脚本。它确实属于部分，而不是包含页面或布局。

据说 MVC 4 中有一种方法可以做到这一点，但我似乎找不到任何相关信息。

Answer 1

我也遇到了类似的问题。希望这可以帮助。 我们希望有一个 View ，其中包含一个显示一些数据的公共(public)标题部分，以及当我们单击页面中的链接时应动态更改的另一个部分。 (类似于选项卡的东西) 由于我们不想多次重新加载标题部分，因此我们决定使用一个容器 View 和一个占位符 div，用于在单击 ajax 链接时动态加载部分 View 。 但是，加载到占位符中的部分 View 包含大量 javascript 代码，我们无法将不同部分 View 使用的所有代码包含到单个 javascript 文件中并从容器 View 中引用它，因为存在一些冲突的函数。 引入命名空间来解决该问题也不是非常有效的方法，因为所有 JavaScript 逻辑仍然会被不必要地加载。 做了一些谷歌搜索让我意识到在部分 View 中包含脚本部分是行不通的。我尝试使用 @RenderSection("partialScripts", required: false) 在 View 中定义一个部分，但未成功，因为 RenderSection 仅适用于布局 View 。 以下是我为解决这个问题而采取的方法。 布局 View 中定义的脚本部分可以包含任何有效的标记。所以我决定有一个 div 来帮助我在容器 View 的脚本部分动态加载脚本。操作链接的 OnSuccess 事件处理程序用于动态附加脚本。 这是我的容器 View 的代码。

<ul>
    <li>
        @Ajax.ActionLink("Partial One", "PartialOne", ajaxOptions: new AjaxOptions
                     {
                         HttpMethod = "Get",
                         InsertionMode = InsertionMode.Replace,
                         UpdateTargetId = "container",
                         OnSuccess = "loadScriptsDynamically('PartialOne')"
                     })
    </li>
    <li>
        @Ajax.ActionLink("Partial Two", "PartialTwo", ajaxOptions: new AjaxOptions
                     {
                         HttpMethod = "Get",
                         InsertionMode = InsertionMode.Replace,
                         UpdateTargetId = "container",
                         OnSuccess = "loadScriptsDynamically('PartialTwo')"
                     })
    </li>
</ul>

<div id="container">
</div>

@section scripts
{
    <script src="@Url.Content("~/Scripts/app/Container.js")"></script>
    <div id="dynamicScripts"
         data-partial-one="@Url.Content("~/Scripts/App/PartialOne.js")"
         data-partial-two="@Url.Content("~/Scripts/App/PartialTwo.js")">
    </div>
}

Controller 类的代码

    public PartialViewResult PartialOne()
    {
        return PartialView("_PartialOne");
    }

    public PartialViewResult PartialTwo()
    {
        return PartialView("_PartialTwo");
    }

Container.js 文件包含将为不同部分 View 动态加载必要脚本的逻辑。

function loadScriptsDynamically(name) {
    var script = document.createElement('script');
    var dynamicScriptsDiv = document.getElementById('dynamicScripts');
    var dynamicScriptDivJQuery = $('#dynamicScripts');
    dynamicScriptDivJQuery.empty();
    if (name === 'PartialOne') {
        script.src = dynamicScriptDivJQuery.data('partial-one');
        dynamicScriptsDiv.appendChild(script);
    } else if (name === 'PartialTwo'){
        script.src = dynamicScriptDivJQuery.data('partial-two');
        dynamicScriptsDiv.appendChild(script);
    }
}

由于某些限制，我们无法使用 jQuery 将脚本元素附加到 div。但是我们可以使用一些老式的 javascript 代码来创建脚本元素并将其附加到dynamicScriptsDiv。请注意，当我们的 MVC 应用程序在 IIS 服务器中运行时，我正在使用一些数据属性来访问之前附加到dynamicScriptsDiv 的脚本路径，并且我们不想对它们进行硬编码。

动态加载脚本后附加到事件是我们的下一个挑战。通过使用立即调用函数，我能够注册所有事件绑定(bind)代码以及我必须使用以下代码执行的任何初始化逻辑。

(function initPartialOne() {
    $('#myButton').click(function() {
        setLabelText();
    });
})();

function setLabelText() {
    $('#myLabel').text('One was clicked');
}

最后是我的部分 View 之一的代码。

<label id="myLabel">[Message]</label>
<input type="button" id="myButton" value="Click me partial one"/>