使用在局部视图节在MVC 4.0(Use Sections in Partial Views in

2019-09-22 10:53发布

我想包括脚本在我的部分观点时,我有,我需要在特定元素初始化jQuery UI的情况下。 这真的与局部,而不是包含页面或布局所属。

据说有一个办法做到这一点在MVC 4,但我似乎无法找到它的任何信息。

Answer 1:

我也有过类似的问题。 希望这可以帮助。 我们希望有一个包含显示一些数据,另一个部分,当我们点击我们页面的链接应该动态地改变公共首部的图。 (类似于标签的东西),因为我们不想多次重新加载标题部分,我们决定有一个容器视图和将要使用的动态加载的局部视图的占位符DIV当我们点击一​​个AJAX链接。 然而,得到了加载到占位部分观点有很多JavaScript代码,我们可以不包括使用由不同的部分意见认为成一个单一的JavaScript文件中的所有代码,并从容器视图是指它有一些冲突的功能。 引入命名空间来解决这个问题还没有很有效的方法,因为所有仍然被不必要地加载JavaScript逻辑。 做了一些谷歌搜索使我认识到,在一个局部视图有一个脚本部分没有去上班。 我试着用@RenderSection(“partialScripts”,必需: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。 请注意,我使用了一些数据 - 属性作为我们MVC应用程序在IIS服务器上运行访问我预先安装dynamicScriptsDivusing脚本路径和我们没有想硬编码他们。

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

(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"/>


Answer 2:

这不是在ASP.NET MVC 3成为可能( 参见这篇文章的第二个评论 )。 部分可以仅在(主)视图,而不是在部分的人使用。

我按照MVC 4版,但在Visual Studio中一个简短的测试也失败了MVC 4,除非你呈现段内的整个部分观点我目前无法找到任何资源。

不过我不建议做这样的事情。 我一直在经历着与例如甜甜圈缓存部分景色过去缓存问题。 缓存部分视图导致代码没有被执行而造成的JavaScript代码尚未呈现该neccessary。 因此,我建议把你需要的局部视图本身或(什么甚至会更好)思考一个明确的设计的局部视图一切,把所有的JavaScript代码在一个精缩是整个页面加载一次JavaScript文件(然后在浏览器的缓存中)。



文章来源: Use Sections in Partial Views in MVC 4.0