2

我在 Helpers.cshtml 文件中有很多 HTML 助手，但是一些助手 (html) 需要一些 jquery 操作，那么我如何在 helpers.cshtml 中调用 jquery，这可能吗？

我知道我们可以将 js 文件保留在标题或特定页面中，但我不想那样做，我只想在加载特定帮助程序的页面上使用 jquery 或 javascript。

有人对此有想法吗？我的场景是，我有列表框控件，可以从助手正确加载，但我需要将自定义主题应用于列表框。

再清楚一点

//in index.cshtml
@Helpers.testListBox("mylist" "1,2,3,4,5,6,7")


//in Helpers.cshtml
@helper testListBox(string listName, string listData){

    //...... HTML code .........

    //Javascript here?

}
4

3 回答 3

5

对于 Web 表单，当在页面上使用某些服务器控件时，框架可以自动包含 Javascript（一次）；ASP.Net MVC 没有这样的工具。听起来这就是你所缺少的。

这样做的方法是在客户端上。查看http://requirejs.org/上的 RequireJS 。这是一个用于管理 Javascript 依赖项的客户端库。这与 Web 窗体所做的一样，但更好，而且做得更多。您的主布局将具有如下脚本标记：

<script src="/Scripts/require.js" type="text/javascript" data-main="/Scripts/main"></script>

这可能是您在每个页面上包含的唯一脚本标记。其他所有内容只能在 RequireJS 需要时动态加载。确实，您在每个页面上都加载了它，但它比 jQuery 小，并且它赢得了它的位置，因为它为您做了很多。

使用您的示例，假设您有以下标记：

@Helpers.testListBox("mylist" "1,2,3,4,5,6,7")

它呈现 HTML 并需要 jQuery 脚本。你会渲染这个：

// HTML for list box here

<script type="text/javascript>
require(['jquery'], function($) {
  // Do your jQuery coding here:
  $("myList").doSomething().whatever();
});
</script>

该require函数将加载 jQuery，除非它已经被加载，然后执行你的代码。确实，每次使用 HTML 帮助器时，您的 jQuery 片段都会重复一次，但这没什么大不了的；该代码应该很短。

RequireJS 有效地管理依赖；您可以拥有模块 A 和依赖于 A 的模块 B 以及依赖于 B 的模块 C。当您的客户端代码请求模块 C 时，A 和 B 将与 C 一起以正确的顺序加载，并且仅加载一次每个。此外，除了 require.js 的初始加载外，脚本是异步加载的，因此您的页面渲染不会因脚本加载而延迟。

当需要在 Web 服务器上部署您的站点时，有一个工具可以检查 Javascript 文件之间的依赖关系，并将它们组合成一个或少量文件，然后将它们最小化。您的任何标记都无需更改。在开发过程中，您可以使用许多小的模块化 Javascript 文件以便于调试，并且在部署时，它们会被组合并最小化以提高效率。

这比 Web 表单框架所做的要好得多，而且完全是客户端，在我看来，这是它所属的地方。

于 2012-02-08T17:36:58.690 回答
0

您可以<script>在助手正文中放置一个标签。

于 2012-02-08T15:28:33.507 回答
0

以局部视图为例：

@model Member.CurrentMemberModel
@{

    var title = "Test View";
}

        <script type="text/javascript">
            // Javascript goes in here, you can even add properties using "@" symbol
            $(document).ready(function () {
                //Do Jquery stuff here
            });
        </script>

@if (currentMember != null)
{
     <div>Hello Member</div>
}
else
{
    <div>You are not logged in</div>
}
于 2012-02-08T15:40:42.720 回答