一起谈.NET技术,ASP.NET MVC 2中使用jQuery UI控件详解-阿里云开发者社区

开发者社区> 狼人2007> 正文

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

简介:   问:我想给我的ASP.NET MVC输入表单添加一个日期选择控件,但模型-视图-控制器(MVC)并没有提供这样的辅助方法,我该如何添加控件?   答:和ASP.NET Web表单不一样,MVC架构没有提供可以在设计面板中拖放的有状态的服务端控件,相反,MVC鼓励使用简单的HTML布局元素和基于数据的标签作为页面布局的要素,功能和最终的布局用客户端JavaScript和CSS样式表控制。
+关注继续查看

  问:我想给我的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不会允许你在文本框中输入一个无效的日期。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较
原文:C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较 使用Task,await,async,异步执行事件(event),不阻塞UI线程和不跨线程执行UI更新   使用Task,await,async 的异步模式 去执行事件(event) 解决不阻塞UI线程和不夸跨线程执行UI更新报错的最佳实践,附加几种其他方式比较 由于是Winform代码和其他原因,本文章只做代码截图演示,不做界面UI展示,当然所有代码都会在截图展示。
3150 0
MVC数据验证使用小结
原文:MVC数据验证使用小结 描述:MVC数据验证使用小结 内容:display,Required,stringLength,Remote,compare,RegularExpression 本人最近在公司用mvc做了一个修改密码的功能,使用的是mvc数据验证,现将使用心得分享给大家 首先,我们先分析一下,如果要实现密码修改功能,我们需要做哪些工作。
727 0
在ASP.Net2.0中使用UrlRewritingNet实现链接重写
很多时候我们需要链接转向(Url Rewriting),例如二级域名转向、文章访问链接等场合。让我们看两个例子:1 你现在看到的当前作者的博客园的域名:http://heekui.cnblogs.com 实际上是 http://www.cnblogs.com/heekui 的一种链接重写(Url Rewriting)。
732 0
在 ASP.NET 页面中使用 TreeView 控件
一、            下载源码 http://www.asp.net/IEWebControls/IEWebControls.exe   二、            安装及编译 1、执行安装文件后,在安装目录找到 “build.bat”文件,用记事本将其打开。
926 0
Asp.net MVC 使用Autofac的简单使用 IOC
Ioc(Inversion of Control)或者叫依赖注入DI(Dependency Injection) 如果一个接口有两个实现类,但是在实现过程中,用到了这两个具体的实现类。 如果采用IOC,则只能是注册一个接口类型,那么如何确保IOC在合适的时候传入不同类的实例?这是我突然间想到的一个问题,希望园友们可以帮忙解答一下!     所谓IOC(控制反转)或者说是依赖注入,就是将你设计好的类交给系统去控制,而不是在你的类内部控制,控制权发生了变化,就称为控制反转。
912 0
Asp.net Mvc Framework 十一 (自定义Helper在MVC中的使用)
Monorail中的Helper是绑定在Controller上的 形如: [Helper(typeof(ChHelper))]abstract public class BaseBlockController : SmartDispatcherController{} 但本身Helper是使用在View中的,所以 Monorail这种定义方式 略微违背了分离之道 那么Asp.
678 0
一起谈.NET技术,分享在MVC3.0中使用jQuery DataTable 插件
  前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下,推荐该插件的原因。
765 0
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.6 修改了几个小bug,使用演示。
     由于项目里面还在使用vs2003,还没有使用新的分页控件,所以对新的分页控件的测试还很不到位,遗留了不少的bug,感谢网友试用提出宝贵意见。由于项目正在收尾中,时间也不是太充裕,所以使用说明也不够详细。
767 0
下拉框控件dhtmlXCombo在ASP.NET中的使用详解
原文:http://blog.csdn.net/asengine11/article/details/6455267    在ASP.NET项目中经常会用到下拉框控件,但是ASP.NET提供的DropDownList控件不能修改样式,经常会与网站整体风格格格不入。
947 0
+关注
狼人2007
个人对技术的追求:代码少而精捍;思路清晰美观;可扩展好维护;技术驱动商业; 人生格言:只要你有信念,有追求,并且坚持,那你一定比随波逐流,行得远行得正...
3528
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载