在MVC 4.0中使用部分视图中的节

Question

当我遇到需要在特定元素上初始化jQuery ui的情况时,我想在部分视图中包含脚本.它确实属于部分而不是包含页面或布局.

据说有一种方法可以在MVC 4中完成,但我似乎无法找到任何信息.

Answer 1

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

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

来自控制器类的代码

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

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

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

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.请注意我正在访问我以前附加到dynamicScriptsDivusing的脚本路径使用一些数据属性,因为我们的MVC应用程序在IIS服务器中运行,我们不想对它们进行硬编码.

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

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

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

最后是我的部分观点之一的代码.

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