推荐一个用C#代码生成JavsScript的简单程序集
2011-03-18 19:38
791 查看
写在前面的（废）话：仅为发牢骚之用，同志们基本可以无视，哈哈~！
我是一个设计师，而不是一个程序员。请让我拖控件（对于ASP.NET），也可以让我写点C#代码，但别让我写JavaScript。
原先做页面设计，需要关注如布局、色彩搭配等常规设计问题，但最近接手的活都是要求高质量的体验效果。对于网页，除了Flash、银光之类的嵌入插件实现特效之外，就只有JavaScript了。
但是很无奈的是，我写代码的技术实在是不怎样。如果说写C#代码还能够勉勉强强凑合上几句像样的，最起码写起来有个智能感知，每个方法需要传入什么参数也能看得明白。可是万恶的JS可就不一样了，在VS下基本无感知效果（2010有点改善，但还是不够！），无类型检查，全靠硬性记忆，调试起来那也是得费劲九牛二虎之力。
但是有些人就是不太安分，总想要打破常规，于是就有了本文的诞生~当当当当~！
PS：对于技术性文章，仅供大家参考，要是文中哪里措辞不当，请原谅一位身为设计师的我的无知，不要吹毛求疵了。
这是一堆经编译后的.NET程序集，可以引入任何.NET项目之中。但它编译后不会生成MSIL，生成的只有万恶的JS。说白了就是：用C#代码编写JavaScript。听起来是不是有些荒谬？
这玩意称之为：“SharpKit”，其下载地址为：http://code.google.com/p/sharpkit/，目前的最新版本是V4。
下面就开始做一个小例子试验一下吧：
首先安装，安装过程中请关闭Visual Studio，不然你看不到它添加的新项目模板。还有安装完毕后它会让你选择版本，一个是免费版，一个是专业版，我也不知道这俩版本有什么区别，反正我选的免费版。
如果前面没什么问题的话，打开VS应该能够看到其新增的项目模板，如图：
在“已安装的模板项下”，就会多出来一项名为“SharpKit”的项目类型，就选择这个好了。
在引用的程序集下可以看到多出了些必须的类库，如图：
就这三个,简单介绍下：SharpKit.Html4就是一些代表了HTML DOM的基本对象。
SharpKit.JavaScript封装了一些JS中常用的类型，但是都在C#原有基本数据类型的前面加上了JS前缀，以示区分。
SharpKit.jQuery表示jQuery的上下文，也是一些类，各种类。
好了，现在基本上心里面有个数了，反正是原来JS中有什么，它这里就有什么，只不过全换成了C#的类型和语法表示形式。
下面我们就试着做一个小例子，很简单的，但却很常见的：如入用户注册的时候，在其填写完用户名后，需要即使检测输入的用户名是不是已经预先存在了，嗯。。大致就是这样一个场景。
好了，新建一个页面，我也懒得起名了，VS自动创建为WebForm1.aspx...
首先在顶部引入命名空间：
然后打开页面编辑，拖一个文本框，在后面写一个span，用作提示信息的显示：
[/code]
需要注意的地方，我用了粗体字标出来了，就是在文本框输入的键盘抬起时触发，反正各位水平应该都比我强，我也不解释了。但请看最后两段粗体字标记：第一段是引入jquery的原库，SharpKit这个东西只是用来生成JS，但是你要调用jquery的方法还是需要原库的支持。第二段就要注意了，我们在这里预先引入一段不存在的脚本，位于站点根目录下res文件夹中的Test.js文件。现在是不存在，但我们可以让它运行时生成。。
好了，前台编辑完了，转入后置代码。
首先，我们需要写一个类，此类对应着前台res/Test.js文件，请看：
在该类头部我们需要添加特性JsType，这就表示在编译时不是生成MSIL，而是生成JS。同时，使用JsMode枚举来指定其作用域，Global表示全局，还有4,5个枚举选项，具体干嘛的以后再研究吧。还有一个重要的参数：FileName，此参数指定：运行时生成JS文件的位置，这正好对应了前台<script type="text/javascript" src="res/Test.js">，如果这俩路径不一致，将来前台调用时找不到JS脚本文件，一定会报错的。
然后我们就添加JS中的function，对应C#代码为一个方法，必须是静态的，但返回类型与参数列表不限，由于我们需要验证用户名，就定义一个字符串类型的参数。
首先：创建一个ajax设置，这和原jQuery的方法中的参数列表没什么两样，然后我们设置其属性就可以了。需要注意一点的是，所有回调属性的类型都是委托，示例中的success需要赋值为一个签名如下的委托：delegate void XXX(object,string,XmlHttpRequest)，总之这个委托需要三个参数，为了偷懒这里写成了lambda表达式的形式。最后使用jQuery类的静态方法ajax()，把刚才创建的AjaxSettings传入即可。
然后我们来创建一个一般处理程序，Handler1.ashx。
我是一个设计师，而不是一个程序员。请让我拖控件（对于ASP.NET），也可以让我写点C#代码，但别让我写JavaScript。
原先做页面设计，需要关注如布局、色彩搭配等常规设计问题，但最近接手的活都是要求高质量的体验效果。对于网页，除了Flash、银光之类的嵌入插件实现特效之外，就只有JavaScript了。
但是很无奈的是，我写代码的技术实在是不怎样。如果说写C#代码还能够勉勉强强凑合上几句像样的，最起码写起来有个智能感知，每个方法需要传入什么参数也能看得明白。可是万恶的JS可就不一样了，在VS下基本无感知效果（2010有点改善，但还是不够！），无类型检查，全靠硬性记忆，调试起来那也是得费劲九牛二虎之力。
但是有些人就是不太安分，总想要打破常规，于是就有了本文的诞生~当当当当~！
PS：对于技术性文章，仅供大家参考，要是文中哪里措辞不当，请原谅一位身为设计师的我的无知，不要吹毛求疵了。
这是一堆经编译后的.NET程序集，可以引入任何.NET项目之中。但它编译后不会生成MSIL，生成的只有万恶的JS。说白了就是：用C#代码编写JavaScript。听起来是不是有些荒谬？
这玩意称之为：“SharpKit”，其下载地址为：http://code.google.com/p/sharpkit/，目前的最新版本是V4。
下面就开始做一个小例子试验一下吧：
首先安装，安装过程中请关闭Visual Studio，不然你看不到它添加的新项目模板。还有安装完毕后它会让你选择版本，一个是免费版，一个是专业版，我也不知道这俩版本有什么区别，反正我选的免费版。
如果前面没什么问题的话，打开VS应该能够看到其新增的项目模板，如图：
在“已安装的模板项下”，就会多出来一项名为“SharpKit”的项目类型，就选择这个好了。
在引用的程序集下可以看到多出了些必须的类库，如图：
就这三个,简单介绍下：SharpKit.Html4就是一些代表了HTML DOM的基本对象。
SharpKit.JavaScript封装了一些JS中常用的类型，但是都在C#原有基本数据类型的前面加上了JS前缀，以示区分。
SharpKit.jQuery表示jQuery的上下文，也是一些类，各种类。
好了，现在基本上心里面有个数了，反正是原来JS中有什么，它这里就有什么，只不过全换成了C#的类型和语法表示形式。
下面我们就试着做一个小例子，很简单的，但却很常见的：如入用户注册的时候，在其填写完用户名后，需要即使检测输入的用户名是不是已经预先存在了，嗯。。大致就是这样一个场景。
好了，新建一个页面，我也懒得起名了，VS自动创建为WebForm1.aspx...
首先在顶部引入命名空间：
using SharpKit.JavaScript; using SharpKit.Html4; using SharpKit.jQuery;
然后打开页面编辑，拖一个文本框，在后面写一个span，用作提示信息的显示：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SharpKitWebApp1.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <h2>Ajax Testing</h2> Ajax无刷新验证用户名：<asp:TextBox ID="txtUser" runat="server" onkeyup="verify(this.value)"></asp:TextBox> <span id="msg" style="display:none" mce_style="display:none"></span> </div> </form> </body> <mce:script src="res/jquery-1.4.1-vsdoc.js" mce_src="res/jquery-1.4.1-vsdoc.js" type="text/javascript"></mce:script> <mce:script type="text/javascript" src="res/Test.js" mce_src="res/Test.js"></mce:script> </html>
[/code]
需要注意的地方，我用了粗体字标出来了，就是在文本框输入的键盘抬起时触发，反正各位水平应该都比我强，我也不解释了。但请看最后两段粗体字标记：第一段是引入jquery的原库，SharpKit这个东西只是用来生成JS，但是你要调用jquery的方法还是需要原库的支持。第二段就要注意了，我们在这里预先引入一段不存在的脚本，位于站点根目录下res文件夹中的Test.js文件。现在是不存在，但我们可以让它运行时生成。。
好了，前台编辑完了，转入后置代码。
首先，我们需要写一个类，此类对应着前台res/Test.js文件，请看：
[JsType(JsMode.Global, Filename = "res/Test.js")]
public class WebForm1Client : HtmlContext
{
static void verify(string name)
{
AjaxSettings setting = new AjaxSettings
{
data = "name="+name,
dataType = "String",
url = "Handler1.ashx",
timeout = 2000,
success = (obj,str, xmlReq) =>
{
HtmlSpan span = document.getElementById<HtmlSpan>("msg");
span.innerHTML = xmlReq.responseText;
span.style.display = "block";
}
};
jQuery.ajax(setting);
}
}在该类头部我们需要添加特性JsType，这就表示在编译时不是生成MSIL，而是生成JS。同时，使用JsMode枚举来指定其作用域，Global表示全局，还有4,5个枚举选项，具体干嘛的以后再研究吧。还有一个重要的参数：FileName，此参数指定：运行时生成JS文件的位置，这正好对应了前台<script type="text/javascript" src="res/Test.js">，如果这俩路径不一致，将来前台调用时找不到JS脚本文件，一定会报错的。
然后我们就添加JS中的function，对应C#代码为一个方法，必须是静态的，但返回类型与参数列表不限，由于我们需要验证用户名，就定义一个字符串类型的参数。
首先：创建一个ajax设置，这和原jQuery的方法中的参数列表没什么两样，然后我们设置其属性就可以了。需要注意一点的是，所有回调属性的类型都是委托，示例中的success需要赋值为一个签名如下的委托：delegate void XXX(object,string,XmlHttpRequest)，总之这个委托需要三个参数，为了偷懒这里写成了lambda表达式的形式。最后使用jQuery类的静态方法ajax()，把刚才创建的AjaxSettings传入即可。
然后我们来创建一个一般处理程序，Handler1.ashx。
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["name"];
if (string.IsNullOrEmpty(name))
{
context.Response.Write("请输入用户名");
}
else
{
if (name.Equals("admin"))
{
context.Response.Write("此用户不能被注册");
}
else
{
context.Response.Write("用户名可用");
}
}
}也懒得查数据库了，反正为空提示输入，不能输入admin，其他一律通过，就意思意思好了。
这里的Response就输出了字符串到回调方法的XmlHttpRequest中，最后使用该对象的responseText即可得到响应文本。
然后设置页面上id为"msg"的span的内容为响应文本，最后改变一下它的样式为可见。基本上这个例子就结束了。
运行效果图如下：
最后我们看一下生成的JS脚本到底长什么模样：
和原来用手写的一模一样，只是代码格式不太好看，管它呢。。只要编写和调试都比之前方便了很多~就先写到这里吧。
当然了，本文仅给那些像我一样JS菜鸟或者厌烦写JS的人准备的。如果你是JS高手，那么直接无视吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 收了100元辛苦费，写了一个最简单的C#ASP.NET的3层架构例子代码，源码是通过代码生成器生成的【写程序的效率神奇的高】
- C#一个简单的定时小程序实现代码
- C# 一个简单分词程序的思路和代码（一）
- 用C#代码生成一个简单的PDF文件
- ASPX验证码生成程序（C#代码一个页面实现）
- Beginning C# Objects从概念到代码——1.4 解析一个简单的C#程序
- 例题：计算运费。c#语言基础，比较简单。看代码输入格式和方法。同样方法可以做一个 出租车打车的程序
- 用C#代码生成一个简单的PDF文件
- ASPX验证码生成程序（C#代码一个页面实现）
- 格式转换------用C#代码生成一个简单的PDF文件
- C# 一个简单分词程序的思路和代码（四） 键树 查询记录
- C# 一个简单分词程序的思路和代码（七） 后记
- 用C#代码生成一个简单的PDF文件
- 用C#代码生成一个简单的PDF文件(转)
- C# 一个简单分词程序的思路和代码（五） 使用代码
- 简单代码实现C#中运行另外一个程序
- 用C#代码生成一个简单的PDF文件
- C# 一个简单分词程序的思路和代码（二） 键树
- 用C#代码生成一个简单的PDF文件
- 一个简单的AJAX实现，基于C#的ASP.Net，包括服务器端的程序代码