一起谈.NET技术,ASP.NET MVC 2中使用jQuery UI控件详解

  问:我想给我的ASP.NET MVC输入表单添加一个日期选择控件,但模型-视图-控制器(MVC)并没有提供这样的辅助方法,我该如何添加控件?

  答:和ASP.NET Web表单不一样,MVC架构没有提供可以在设计面板中拖放的有状态的服务端控件,相反,MVC鼓励使用简单的HTML布局元素和基于数据的标签作为页面布局的要素,功能和最终的布局用客户端JavaScript和CSS样式表控制。

  MVC提供了一套基于HtmlHelper的扩展方法渲染大部分HTML标签,对于更复杂的功能,你需要自己编写HTML/JavaScript代码,购买第三方MVC控件包或使用开源的JavaScript库,目前最流行的开源JavaScript库是jQuery,当你在Visual Studio 2010中创建新的MVC 2项目时,实际上已经包括了jQuery核心库。

  jQuery架构一直遵循“不唐突JavaScript(Unobtrusive JavaScript)”的原则,它将HTML标签和添加客户端行为的JavaScript脚本分离开来,使用这个技术,开发人员可以使用简单的<div>,<span>和<table>标签及class属性创建页面布局,使用没有连接JavaScript事件的HTML列表,锚和基于表单的标签收集和显示数据,最终的页面将会很干净,在任何浏览器中都能显示,并且更适合搜索引擎机器人抓取。开发人员在文档对象模型(DOM)中给选中的控件添加jQuery脚本,并添加属性、事件和额外的标签,这个脚本创建具体的外观,对UI行为进行响应,执行动画和管理远程调用。

  jQuery库细分为核心库和其它插件库,包括一套UI小部件,核心库提供选择、设定样式、DOM操作和Ajax功能,jQuery库可以通过创建插件的形式进行扩展,jQuery UI是一套插件,它包括许多高级行为,如对话框、拖放和调整大小、主题部件,如自动完成,侧边栏,标签和日期选择器。

  jQuery UI插件

  如果要使用UI库,必须先从jQuery UI网站下载它,在网站主页你可以生成一个自定义版本下载,在准备好下载前,请注意选择你要使用的组件(默认选中了所有组件),组件版本(通常应该选择最新版本)和一个预配置的主题,然后下载并解压.zip文件,在解压后的文件夹下,你应该会看到多个文件夹,包括CSS和JS文件夹。

  将你下载的自定义主题添加到项目中,从CSS目录下将style文件夹复制到MVC项目的Content文件夹下,从js文件夹下将自定义jQuery UI脚本库复制到项目的Script文件夹下。我下载了最新的1.8.4版本,如果你想使用Web部署包部署你的项目,一定要添加style文件夹和JavaScript文件到你的Visual Studio项目中,否则你会发现程序在本地环境中可以运行,但到了生产环境就会失败。

  ASP.NET MVC架构由模型、视图和控制器组成,模型简单说就是使用DataAnnotation属性装饰过的数据类,所有URL都转换成调用控制器上的公共方法,控制器操作传递给它的数据,并创建视图需要的数据,视图的主要任务是渲染控制器创建的数据,视图和ASP.NET页面有点类似,但它后面没有代码,视图可以是强类型,这意味着它们期望建立一个数据对象控件传递给它们进行渲染,这个对象在整个视图中可以通过一个强类型模型变量访问,为了渲染基于表单的控件,如文本框和单选按钮变得更容易,视图使用了一套HtmlHelper方法,通过一个叫做Html的变量访问。

  这些扩展方法通常基于Model类和字段上的DataAnnotation属性访问模型的模型数据和元数据。将下面的脚本添加到视图页面的Master页面(默认是Site.Master),用你下载的jQuery UI库替换<your style here>,我这里使用“微软”风格。


<link href="<%=Url.Content("~/Content/<your style here>
/jquery-ui-1.8.4.custom.css")%>" rel="stylesheet" type="text/
css" />
<script type="text/javascript" src="<%=Url.Content("~/Scripts/
jquery-1.4.1.min.js")%>" ></script>
<script type="text/javascript" src="<%=Url.Content("~/Scripts/
jquery-ui-1.8.4.custom.min.js")%>" >

  确保jQuery核心库(这里是jquery-1.4.1.min.js)的script标签出现在jQuery UI库的标签前,否则当你运行程序时,你会收到一个类似于“jQuery未定义”的脚本错误。
  为了给视图页面增加日历控件,首先使用HtmlHelper TextBox扩展方法给视图添加一个TextBox:


1. <%= Html.TextBox("TestDatePicker"
2. , Model.TestDatePicker.ToString("d"),
3. new { @class = "myDatePickerClass" })%>

  所有获得代表一个C#类实例的Model变量的强类型视图页面通过控制器传递给视图,在这个例子中,Model指的是包含一个DateTime字符(TestDatePicker)的类,注意TextBox使用ToString()方法为TestDate-Picker字段设置了一个初始格式化的值,这是必需的,因为jQuery DatePicker控件只有当你在日历控件中选择了一个日期后才会应用它的dateFormat选项。

  接下来,向你的Master页面添加下面的jQuery脚本,myDatePickerClass类必须和添加到TextBox的类匹配。


1. <script type="text/javascript">
2. $(document).ready(
3. function () {
4. $(".myDatePickerClass ").datepicker({
5. buttonImage: '<%=Url.Content("~/Content/
6. images/calendar.gif")%>',
7. dateFormat: 'm/d/yy',
8. showOn: 'button',
9. buttonImageOnly: true
10. })
11. }
12. );
13. </script>

  打开页面,当你点击文本框右侧的日历图标时,将会看到一个如图1所示的日历控件,选择一个日期填充到文本框中,你也可以修改文本框中的日期,弹出的日历控件会做出相应的变化,注意jQuery不会允许你在文本框中输入一个无效的日期。

时间: 2024-12-10 02:37:28

一起谈.NET技术,ASP.NET MVC 2中使用jQuery UI控件详解的相关文章

ASP.NET MVC 2中使用jQuery UI控件详解

问:我想给我的ASP.NET MVC输入表单添加一个日期选择控件,但模型-视图-控制器(MVC)并没有提供这样的辅助方法,我该如何添加控件? 答:和ASP.NET Web表单不一样,MVC架构没有提供可以在设计面板中拖放的有状态的服务端控件,相反,MVC鼓励使用简单的HTML布局元素和基于数据的标签作为页面布局的要素,功能和最终的布局用客户端JavaScript和CSS样式表控制. MVC提供了一套基于HtmlHelper的扩展方法渲染大部分HTML标签,对于更复杂的功能,你需要自己编写HTML

在ASP.NET MVC 4中使用Kendo UI Grid

Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu .Grid .Combox等...), 底层以Html5 + jQuery 来打造,并且兼容于各大浏览器,包含IE7.IE8.相关介绍可以参考AJAX式数据清单的新选择-Kendo UI Grid. 以下内容参考台湾的黑老大的文章:在ASP.NET MVC 4中使用Kendo UI Grid 建立一个ASP.NET MVC 4专案 使用NuGet安装KendoUIWeb及

转:ASP.NET验证控件详解

asp.net|控件|详解 ASP.NET验证控件详解 ASP.NET是微软推出的下一代WEB开发工具,其强大的功能立即吸引了一大批WEB开发者投入它的靡下.现在,我们来看看ASP.NET的验证控件,感受ASP.NET的强大功能同时方便我们现在的WEB开发. WEB开发者特别是ASP开发者,一直对数据验证比较恼火,当你好不容易写出数据提交程序的主体以后,还不得不花大把时间去验证用户的每一个输入是否合法.如果开发者熟悉JavaScript或者VBScript,可以用这些脚本语言轻松实现验证,但是又

ASP.NET 2.0中的DataSource系列控件

asp.net|控件 ASP.NET 2.0中,在其中的数据连接方面做了很大的改进,新加入的datasource系列控件,使得在数据库的连接方面更加容易,很多都可以通过向导式的设置来完成SQL语句的编写和数据库连接.ASP.NET 2.0中的DataSource系列控件总共有6种,分别是: Sqldatasource控件----用于连接sql数据库的数据源控件 Accessdatasource控件----用于连接access数据库的数据源控件 ObjectDataSource控件----用于连接

抢先试用ASP.NET 2.0中的新型安全控件

asp.net|安全|控件 一. 引言 与ASP.NET 2.0一同上市的有几个新的安全控件-它们位于工具的Login选项卡中(见图1)-这些控件大大简化了Web开发人员的工作.通过使用这些新的安全控件,现在你可以执行例如用户登录.注册.口令改变等的任务:而且,为此做出的努力仅是拖放相应的控件到你的Web表单上去.在本文中,我将向你展示怎样使用这些新控件来实现用户认证. 首先,让我们探索一下LoginView.LoginStatus和LoginName三个控件的使用.首先,让我们使用Visual

体验ASP.NET 2.0 中的数据访问控件

asp.net|访问|控件|数据 简介 数据访问一直是开发 Web 应用程序的一个关键问题.几乎每个商业应用程序都需要数据驱动的 Web 页面.由于数据访问如此普遍,开发人员不断地为简单的数据库任务重新生成复杂的代码就显得毫无意义了.开发人员需要从格式各异的不同数据源中快速访问数据.幸运的是,ASP.NET 2.0 中新增的数据访问控件和 ADO.NET 2.0 解决了这一问题. 对于传统的 ASP 和 ASP.NET 1.1 应用程序而言,开发人员不得不创建代码访问和更新数据库,将检索到的数据

在ASP.NET 2.0中使用webpart系列控件

在现在的网站设计中,更强调的是用户的个性化设置,让用户可以自由的设 置符合自己喜好的页面成为网站开发人员的头号难题,不过现在看来这个难题微 软帮我们解决了.在asp.net 2.0中新增加了一系列webpart控件,可以让用户很 方便地对网页的各区域布局进行调整.在一些web应用程序中,如果用户想自定 义页面布局,比如一个新闻发布系统,想让左,中,右三栏的位置进行调换的话 ,就可以使用webpart控件. 下面,我们来看下asp.net 2.0中webpart系列控件的一些基本用法. 首先,在v

asp.net 电话 手机 中英 数字验证控件

asp教程.net 电话 手机 中英 数字验证控件 1 对手机号码的验证:^1[0-9]d{9}$,之前使用的是:/^0{0,1}(13[4-9]|15[7-9]|15[0-2])[0-9]{8}$/, 编辑部在使用的时提出问题:怎么189的号不能添加啊,我一看,正则表达式没有189的号,然后跑去找一个资历老一点的同事,他给我的正则是:d{11},我一看这个验证不对啊!只能保证输入的是11位数字,格式什么的就没限制了,然后自己改了下,现在还没出现什么问题 2 只输入中文或英文:[u4e00-u9

asp.net 向UpdatePaneel中动态添加DropDownList控件代码

asp教程.net 向updatepaneel中动态添加dropdownlist控件代码 //aspx文件中添加如上代码,showchildlist函数如下:   protected void showchildlist(object sender, eventargs e)   {   dropdownlist ddl_now = (dropdownlist)sender;   string sql = "select part_id,part_name from tb_parts where