ASP.NET MVC 3中带有Javascript操作的HTML助手

本文关键字：操作 Javascript HTML 助手 NET MVC ASP | 更新日期: 2023-09-27 18:23:52

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

我知道我们可以将js文件保存在header或特定页面中，但我不想这样做，我只想在加载特定helper的页面上使用jquery或javascript。

有人知道吗？我的场景是，我有一个列表框控件，它从helper正确加载，但我需要将自定义主题应用到列表框。

Clarity 多一点

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

ASP.NET MVC 3中带有Javascript操作的HTML助手

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

这样做的方法是在客户端上。查看RequireJShttp://requirejs.org/.这是一个用于管理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，模块B依赖于A，模块C依赖于B。当你的客户端代码要求模块C时，A和B将与C一起加载，并按正确的顺序加载，并且每个只加载一次。此外，除了require.js的初始加载外，脚本都是异步加载的，因此页面呈现不会因脚本加载而延迟。

当需要在web服务器上部署您的网站时，有一个工具可以检查Javascript文件之间的依赖关系，并将它们组合成一个或少量文件，然后将它们最小化。您的任何标记都不必更改。在开发过程中，您可以使用许多小型、模块化的Javascript文件来轻松调试，并且在部署时，为了提高效率，可以将它们组合在一起并最小化。

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

您可以在助手体中放置<script>标记。

以部分视图为例：

@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>
}
相关文章：