MVC下使用日期控件

　　初学MVC，使用日期控件的时候发现不是特别理想，本来是想直接使用JQuery的日期控件的，发现支持的不是很好，type类型要改成date才能使用，而且编辑的时候使用@Html.EditFor也不能绑定值，不知道大家有没有在项目中使用过Jquery的日期控件，有没有遇到什么问题，希望能控讨一下。

　　于是乎，在园友的推荐下，改用大名鼎鼎的My97，下载地址:http://www.my97.net/dp/demo/index.htm,下载->包含到项目.然后在BundleConfig文件中添加引用

bundles.Add(new ScriptBundle("~/bundles/My97DatePicker").Include(
            "~/My97DatePicker/WdatePicker.js",
            "~/My97DatePicker/calendar.js"));

bundles.Add(new StyleBundle("~/My97DatePicker/css").Include(
            "~/My97DatePicker/skin/WdatePicker.css"));

直接在母版页中对文件进行引用

@System.Web.Optimization.Styles.Render("~/My97DatePicker/css")

@System.Web.Optimization.Scripts.Render("~/bundles/My97DatePicker")

为了使用方便，给HtmlHelper增加了扩展方法,方便使用,返回值是string

        public static string Calendar(this HtmlHelper helper, string name)
        {
            return Calendar(helper, name, defaultFormat);
        }

         @Html.Calendar("ProductBeginDate")

但这样会有一个问题，在界面上使用的时候，会生成带双引号的文本，而不是Html的标签

"<input type="date" id="BuyDate" name="BuyDate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="datetype" value="--">"

再于是乎，在园友的建议下，给这个执行加了@Html.Raw给转换成了html标签

@Html.Raw(@Html.Calendar("ProductBeginDate"))

这样做，果然能正常显示了

但是总是觉得在外面加个@Html.Raw的使用方式很是不爽，这个Raw方法只不过是返回了IHtmlString,那就改进一下扩展方法吧

        public static MvcHtmlString Calendar(this HtmlHelper helper, string name)
        {
            return Calendar(helper, name, defaultFormat);
        }

界面使用时，就可以直接使用，产生正确的html标签了

@Html.Calendar("ProductBeginDate")

最后，附上扩展方法的所有代码，方便日后再次使用

   /// <summary>
     /// Extended the HtmlHelper for Calendar
     /// </summary>
     public static class CalendarExtensions
     {
         private static string defaultFormat = "yyyy-MM-dd";

         /// <summary>
         /// 使用特定的名称生成控件
         /// </summary>
         /// <param name="helper">HtmlHelper对象</param>
         /// <param name="name">控件名称</param>
         /// <returns>Html文本</returns>
         public static MvcHtmlString 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 MvcHtmlString 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 MvcHtmlString 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 MvcHtmlString 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 MvcHtmlString 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 MvcHtmlString 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 MvcHtmlString 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 MvcHtmlString.Create(value.ToString(format));
             }
             else
             {
                 return MvcHtmlString.Create(string.Empty);
             }
         }

         /// <summary>
         /// 通过lambda表达式获取要显示的日期时间
         /// </summary>
         /// <param name="helper">HtmlHelper对象</param>
         /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>
         /// <returns>Html文本</returns>
         public static MvcHtmlString 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 MvcHtmlString GenerateHtml(string name, DateTime? date, string format)
         {
             string dateStr = string.Empty;

             if (date != null)
             {
                 dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"" + date.Value.ToString(format) + "\" />";
             }
             else
             {
                 dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"\" />";
             }

             return MvcHtmlString.Create(dateStr);
         }
     }

总结：我的使用方法不一定是最好的，但是总算暂时解决了我的问题，如果园友有更好的方法，或是关于jquery的日期控件我使用方式有误的问题，欢迎指正。