在ASP.NET MVC 3 HTML佣工Javascsript行动 [英] HTML helpers in ASP.NET MVC 3 with Javascsript action

问题描述

我在Helpers.cshtml文件很多的HTML帮助，但一些帮手（HTML）需要一些jQuery的动作，让我怎么可以叫里面helpers.cshtml jQuery的，这可能吗？

我知道我们能够保持在页眉或特定页面的js文件，但我不想做这样的，我想只有那些加载特定的帮手在页面上使用jQuery或JavaScript。

人有这样的想法？
我的情况是，我有列表框控件，即正确地从助手加载，但我需要自定义主题应用到列表框中。

多一点清晰

  //在index.cshtml 
 @ Helpers.testListBox（MYLIST1,2,3， 4,5,6,7）
 
 
 //在Helpers.cshtml 
 @helper testListBox（字符串LISTNAME，字符串的ListData）{
 
 // ...... HTML代码......... 
 
 //此处的JavaScript？ 
 
} 
  

解决方案

随着Web表格，框架可以自动包含Javascript（不止一次），当某个服务器对照页面上使用; ASP.Net MVC有没有这样的设施。这听起来像这是你错过了什么。

要做到这一点是在客户端的方式。看看在 http://requirejs.org/ RequireJS。这是用于管理的Javascript依赖客户端库。这做什么Web窗体所做的，不过还好，它也更多。你的主人布局将有一个这样的脚本标签：

 <脚本的src =/脚本/ require.js类型= 文/ JavaScript的数据主要=/脚本/主>< / SCRIPT> 
  

这可以是的只有的脚本标签包括你在每一页上。其他一切可以根据需要通过RequireJS动态加载只。您加载此每一页上，但它比jQuery的小，因为它没有这么多，你是实至名归这是真的。

使用你的榜样，让我们​​说你有这样的标记：

  @ Helpers.testListBox（MYLIST，1,2,3,4,5,6， 7）
  

和它呈现HTML和jQuery的需要脚本。你会呈现这样的：

  // HTML的列表框中这里
 
<脚本类型= 。文/ JavaScript的> 
要求（['jQuery的']，功能（$）{
 //做你的jQuery的编码在这里：
 $（myList上）DoSomething的（）什么（ ）; 
}）; 
< / SCRIPT> 
  

的

要求函数将加载jQuery的，除非它已经被加载，然后执行你的代码。这是真的，你的jQuery代码段每次使用的HTML帮手重复一次，但是这不是一个大不了;代码应该是短期

RequireJS有效管理的依赖，你可以有模块A，以及依赖于b模块b这dependes上A和C模块当客户端代码请求模块C，A和B将用C一起加载，并以正确的顺序，只有一次各个此外，除了require.js的初始加载，脚本异步加载的，所以你的网页渲染不被脚本加载延迟。

当它的时间到Web服务器上部署你的网站，有一个工具，将检查JavaScript文件之间的依赖关系，并结合他们到一个或少量文件，然后最小化他们。您的标记都没有做任何改动。虽然在发展，你可以有很多的小型化，模块化JavaScript文件，方便调试工作，当你部署，它们被组合和最小化的效率。

这是多少比Web窗体框架做了什么，以及完全的客户端，这在我看来是属于它的地方更好。

I have many HTML helper in Helpers.cshtml file, but some of the helper (html) need some jquery action, so how do i can call jquery inside helpers.cshtml, is that possible?

i know we can keep the js file in header or particular page, but i do not want to do like that, i want to use jquery or javascript only on the page which loaded particular helper.

anyone have idea on this? My scenario is, i have list box control, that is properly loading from helper, but i need to apply custom theme to the list box.

Little more 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?

}

解决方案

With Web Forms, the framework could automatically include Javascript (once) when certain server controls were used on a page; ASP.Net MVC has no such facility. It sounds like this is what you're missing.

The way to do it is on the client. Look at RequireJS at http://requirejs.org/. This is a client-side library for managing Javascript dependencies. This does what Web Forms did, but better, and it does more. Your master layout will have a script tag like this:

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

This can be the only script tag you include on every page. Everything else can be dynamically loaded only as needed by RequireJS. It's true that you load this on every page, but it's smaller than jQuery, and it earns its place because it does so much for you.

Using your example, let's say you have this markup:

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

and it renders HTML and needs jQuery scripting. You would render this:

// HTML for list box here

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

The require function will load jQuery, unless it has already been loaded, and then execute your code. It's true that your jQuery snippet is repeated once per use of the HTML helper, but that's not a big deal; that code should be short.

RequireJS manages dependencies effectively; you can have module A, and module B which dependes on A, and module C which depends on B. When your client code asks for module C, A and B will be loaded along with C, and in the correct order, and only once each. Furthermore, except for the initial load of require.js, scripts are loaded asynchronously, so your page rendering is not delayed by script loading.

When it's time to deploy your site on the web server, there's a tool that will examine the dependencies among the Javascript files and combine them into one or a small number of files, and then minimize them. None of your markup has to change at all. While in development, you can work with lots of small, modular Javascript files for easy debugging, and when you deploy, they are combined and minimized for efficiency.

This is much better than what the web forms framework did, and entirely client-side, which in my opinion is where it belongs.

这篇关于在ASP.NET MVC 3 HTML佣工Javascsript行动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！