看了一些别人写的ASP.NET MVC控件，决定自己写一个基于JqueryUI的ASP.NET MVC控件集出来，
1.下载JQueryUI 1.8
2.创建MVC工程和类库工程,并将JQueryUI的JS和CSS引入MVC工程，如下图:

3.修改Site.Master文件，引入JQueryUI的相关JS和CSS

4. 编写扩展程序，这里主要用的是扩展方法
在JQuery中有一个很重要的方法就是初始化处理,一般形式为
<script>
$(function(){
//初始化处理
});
</script>
要实现这种自动代码我参照Html.BeginForm的例子
<% using (Html.BeginForm()) { %>

<% } %>
在页面中就会有<form> </form>标记。
编写一个HtmlScript类:
namespace Hahaman.Mvc.UI
{
public class HtmlScript: IDisposable
{
private HtmlHelper hh;
private bool init;
public HtmlScript(HtmlHelper hh): this(hh, false)
{
}
public HtmlScript(HtmlHelper hh,bool init)
{
this.hh = hh;
this.init = init;
var html = "<script>";
hh.ViewContext.Writer.WriteLine(html);
if (init)
html = "$(function();
hh.ViewContext.Writer.WriteLine(html);
}

#region IDisposable 成员
public void Dispose()
{
if (init)
{
hh.ViewContext.Writer.WriteLine();");
}
hh.ViewContext.Writer.WriteLine("</script>");
}
#endregion
}
}
构造参数有两个，一个是HtmlHelper，另一个是否要进行初始化。
编写一个扩展类:
namespace Hahaman.Mvc.UI
{
public static class JQueryUIExt
{
public static HtmlScript BeginScript(this HtmlHelper hh,bool init)
{
return new HtmlScript(hh, init);
}
public static void EndScript(this HtmlHelper hh,bool init)
{
if (init)
{
hh.ViewContext.Writer.WriteLine("});");
}
hh.ViewContext.Writer.WriteLine("</script>");
}
}
}

增加两个方法，一个是BeginScript，另一个是EndScript.
使用方法:
页面导入命名空间：
<%@ Import Namespace="Hahaman.Mvc.UI" %>
代码:
<%using (Html.BeginScript(true)) { %>
<%}%>
客户端就会生成:
<script>
$(function(){
});
</script>

也可以:
<%using (Html.BeginScript()) { %>
<%}%>
客户端就会生成:
<script>
</script>

下来就是写扩展方法了:
先写两个试一下:
public static void Draggable(this HtmlHelper hh, string id)
{
hh.ViewContext.Writer.WriteLine( "$(\""+id+"\").draggable();");
}
public static void Draggable(this HtmlHelper hh, string id,string config)
{
hh.ViewContext.Writer.WriteLine("$(\"" + id + "\").draggable(+config+);");
}
完成拖拽功能，使用方法:
<div class="div1" style="border:solid 1px;width:200px;height:200px;background-color:green">
haha
</div>
<%using (Html.BeginScript(true))
{ %>
<%Html.Draggable(".div1","opacity: 0.3");%>
<%}%>

这样div1就可以拖拽了!