6

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

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

4

2 回答 2

6

我也有类似的问题。希望这可以帮助。我们希望有一个视图，其中包含一个显示一些数据的通用标题部分和另一个在我们单击页面中的链接时应该动态更改的部分。（类似于选项卡）由于我们不想多次重新加载标题部分，我们决定有一个容器视图和一个占位符 div，当我们单击 ajax 链接时，它将用于动态加载部分视图. 但是，加载到占位符中的局部视图有很多 javascript 代码，我们无法将不同局部视图使用的所有代码包含到单个 javascript 文件中并从容器视图中引用它，因为存在一些冲突的函数. 引入命名空间来解决这个问题也不是 这是一种非常有效的方法，因为所有 javascript 逻辑仍然会被不必要地加载。做一些谷歌搜索让我意识到在局部视图中拥有一个脚本部分是行不通的。我尝试使用 @RenderSection("partialScripts", required: false) 在我的视图中定义一个部分，但没有成功，因为 RenderSection 仅适用于布局视图。以下是我为克服这个问题而采取的方法。在布局视图中定义的脚本部分可以包含任何有效的标记。所以我决定有一个 div 来帮助我在容器视图的脚本部分中动态加载脚本。操作链接的 OnSuccess 事件处理程序用于动态附加脚本。这是我的容器视图的代码。做一些谷歌搜索让我意识到在局部视图中拥有一个脚本部分是行不通的。我尝试使用 @RenderSection("partialScripts", required: false) 在我的视图中定义一个部分，但没有成功，因为 RenderSection 仅适用于布局视图。以下是我为克服这个问题而采取的方法。在布局视图中定义的脚本部分可以包含任何有效的标记。所以我决定有一个 div 来帮助我在容器视图的脚本部分中动态加载脚本。操作链接的 OnSuccess 事件处理程序用于动态附加脚本。这是我的容器视图的代码。做一些谷歌搜索让我意识到在局部视图中拥有一个脚本部分是行不通的。我尝试使用 @RenderSection("partialScripts", required: false) 在我的视图中定义一个部分，但没有成功，因为 RenderSection 仅适用于布局视图。以下是我为克服这个问题而采取的方法。在布局视图中定义的脚本部分可以包含任何有效的标记。所以我决定有一个 div 来帮助我在容器视图的脚本部分中动态加载脚本。操作链接的 OnSuccess 事件处理程序用于动态附加脚本。这是我的容器视图的代码。false) 不成功，因为 RenderSection 仅适用于布局视图。以下是我为克服这个问题而采取的方法。在布局视图中定义的脚本部分可以包含任何有效的标记。所以我决定有一个 div 来帮助我在容器视图的脚本部分中动态加载脚本。操作链接的 OnSuccess 事件处理程序用于动态附加脚本。这是我的容器视图的代码。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"/>
于 2013-08-25T11:56:25.723 回答
1

这在 ASP.NET MVC 3中是不可能的（请参阅本文中的第二条评论）。部分只能用于（主）视图，不能用于部分视图。

根据 MVC 版本 4，我目前无法找到任何资源，但 Visual Studio 中的简短测试对于 MVC 4 也失败，除非您在该部分内呈现整个部分视图。

尽管如此，我不建议这样做。例如，我过去一直在使用甜甜圈缓存部分视图遇到缓存问题。缓存部分视图会导致代码未执行，并导致未呈现必要的 JavaScript 代码。因此，我建议将部分视图所需的所有内容放在部分视图本身中，或者（甚至更好）考虑一个清晰的设计并将所有 javascript 代码放在一个缩小的 javascript 文件中，该文件为整个页面加载一次（然后被缓存在浏览器的缓存中）。

于 2012-11-19T20:06:16.640 回答