asp.net mvc 开发模式虽好，但是总感觉微软对视图view层面的支持不到位，例如连个像样的日期js控件都没有，无奈只能自己找资料研究扩展HtmlHelper来实现。本篇文章使用My97DatePicker日期控件来实现。
My97DatePicker 的下载地址：点击打开链接
创建asp.net mvc 项目
打开vs 点击创建asp.net mvc 网站创建一个DataPicker的网站项目，不选择单元测试
编写实体类
编写业务实体类，这里就编写个User类吧，也不实现与数据库的映射，注意引用命名空间using System.ComponentModel
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.ComponentModel;namespace DataPicker.Models{public class User{[DisplayName("姓名")]public string Name { get; set; }[DisplayName("年龄")]public UInt16 Age { get; set; }[DisplayName("生日")]public DateTime Birthday { get; set; }}}
扩展htmlHelper
在项目中建立My97DatePicker 文件夹将下载好的My97DatePicker js 包解压缩后引入项目中
在项目中建立一个WebExtend的文件夹用于存放将My97DatePicker日期控件扩展HtmlHelper类代码。
using System;using System.Collections.Generic;using System.Runtime.CompilerServices;using System.Linq.Expressions;namespace System.Web.Mvc{/// <summary>/// HtmlHelper for My97DatePicker/// </summary>public static class My97DatePicker{private static string defaultFormat = "yyyy-MM-dd";/// <summary>/// 使用特定的名称生成控件/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="name">控件名称</param>/// <returns>Html文本</returns>public static string Calendar(this HtmlHelper helper, string name){return Calendar(helper, name, defaultFormat);}/// <summary>/// 使用特定的名称生成控件/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="name">控件名称</param>/// <param name="format">显示格式</param>/// <returns>Html文本</returns>public static string Calendar(this HtmlHelper helper, string name, string format){return GenerateHtml(name, null, format);}/// <summary>/// 使用特定的名称和初始值生成控件/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="name">控件名称</param>/// <param name="date">要显示的日期时间</param>/// <returns>Html文本</returns>public static string Calendar(this HtmlHelper helper, string name, DateTime date){return Calendar(helper, name, date, defaultFormat);}/// <summary>/// 使用特定的名称和初始值生成控件/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="name">控件名称</param>/// <param name="date">要显示的日期时间</param>/// <param name="format">显示格式</param>/// <returns>Html文本</returns>public static string Calendar(this HtmlHelper helper, string name, DateTime date, string format){return GenerateHtml(name, date, format);}/// <summary>/// 通过lambda表达式生成控件/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>/// <returns>Html文本</returns>public static string CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression){return CalendarFor(helper, expression, defaultFormat);}/// <summary>/// 通过lambda表达式生成控件/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>/// <param name="format">显示格式</param>/// <returns>Html文本</returns>public static string CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format){string name = ExpressionHelper.GetExpressionText(expression);DateTime value;object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model;if (data != null && DateTime.TryParse(data.ToString(), out value)){return GenerateHtml(name, value, format);}else{return GenerateHtml(name, null, format);}}/// <summary>/// 通过lambda表达式获取要显示的日期时间/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>/// <param name="format">显示格式</param>/// <returns>Html文本</returns>public static string CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format){string name = ExpressionHelper.GetExpressionText(expression);DateTime value;object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model;if (data != null && DateTime.TryParse(data.ToString(), out value)){return value.ToString(format);}else{return string.Empty;}}/// <summary>/// 通过lambda表达式获取要显示的日期时间/// </summary>/// <param name="helper">HtmlHelper对象</param>/// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>/// <returns>Html文本</returns>public static string CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression){return CalendarDisplayFor(helper, expression, defaultFormat);}/// <summary>/// 生成输入框的Html/// </summary>/// <param name="name">calendar的名称</param>/// <param name="date">calendar的值</param>/// <returns>html文本</returns>private static string GenerateHtml(string name, DateTime? date, string format){if (date != null){return "<input type=\&;text\&; id=\&;"+name+"\&; onclick=\&;WdatePicker({el:'"+name+"'})\&; class=\&;Wdate\&; value=\&;" + date.Value.ToString(format) + "\&; />";}else{return "<input type=\&;text\&; id=\&;" + name + "\&; onclick=\&;WdatePicker({el:'" + name + "'})\&; class=\&;Wdate\&; value=\&;\&; />";}}}} 如果需要使用日期控件其它样式或功能，请参考功能与实例扩展以上代码中的GenerateHtml方法和CalendarDisplayFor方法。
生成View页面
在生成User的Create页面之前，我们需要在模板页面(Site.Master)中引入My97DatePicker的css和js脚本。
怠惰是贫穷的制造厂。
