基于ASP.NET MVC的JQueryUI控件开发(1)

看了一些别人写的ASP.NET MVC控件，决定自己写一个基于JqueryUI的ASP.NET MVC控件集出来，

1.下载JQueryUI 1.8

2.创建MVC工程和类库工程,并将JQueryUI的JS和CSS引入MVC工程，如下图:


001.png (大小:17.9 K 下载次数:0)



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


002.png (大小:8.7 K 下载次数:0)



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就可以拖拽了!

待续....

代码已发布到http://jqueryuimvc.codeplex.com/