zoukankan      html  css  js  c++  java

  • 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="2015-01-17">"

    再于是乎，在园友的建议下，给这个执行加了@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")

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

      1   /// <summary>
  2     /// Extended the HtmlHelper for Calendar
  3     /// </summary>
  4     public static class CalendarExtensions
  5     {
  6         private static string defaultFormat = "yyyy-MM-dd";
  7 
  8         /// <summary>
  9         /// 使用特定的名称生成控件
 10         /// </summary>
 11         /// <param name="helper">HtmlHelper对象</param>
 12         /// <param name="name">控件名称</param>
 13         /// <returns>Html文本</returns>
 14         public static MvcHtmlString Calendar(this HtmlHelper helper, string name)
 15         {
 16             return Calendar(helper, name, defaultFormat);
 17         }
 18 
 19         /// <summary>
 20         /// 使用特定的名称生成控件
 21         /// </summary>
 22         /// <param name="helper">HtmlHelper对象</param>
 23         /// <param name="name">控件名称</param>
 24         /// <param name="format">显示格式</param>
 25         /// <returns>Html文本</returns>
 26         public static MvcHtmlString Calendar(this HtmlHelper helper, string name, string format)
 27         {
 28             return GenerateHtml(name, null, format);
 29         }
 30 
 31         /// <summary>
 32         /// 使用特定的名称和初始值生成控件
 33         /// </summary>
 34         /// <param name="helper">HtmlHelper对象</param>
 35         /// <param name="name">控件名称</param>
 36         /// <param name="date">要显示的日期时间</param>
 37         /// <returns>Html文本</returns>
 38         public static MvcHtmlString Calendar(this HtmlHelper helper, string name, DateTime date)
 39         {
 40             return Calendar(helper, name, date, defaultFormat);
 41         }
 42 
 43         /// <summary>
 44         /// 使用特定的名称和初始值生成控件
 45         /// </summary>
 46         /// <param name="helper">HtmlHelper对象</param>
 47         /// <param name="name">控件名称</param>
 48         /// <param name="date">要显示的日期时间</param>
 49         /// <param name="format">显示格式</param>
 50         /// <returns>Html文本</returns>
 51         public static MvcHtmlString Calendar(this HtmlHelper helper, string name, DateTime date, string format)
 52         {
 53             return GenerateHtml(name, date, format);
 54         }
 55 
 56         /// <summary>
 57         /// 通过lambda表达式生成控件
 58         /// </summary>
 59         /// <param name="helper">HtmlHelper对象</param>
 60         /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>
 61         /// <returns>Html文本</returns>
 62         public static MvcHtmlString CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
 63         {
 64             return CalendarFor(helper, expression, defaultFormat);
 65         }
 66 
 67         /// <summary>
 68         /// 通过lambda表达式生成控件
 69         /// </summary>
 70         /// <param name="helper">HtmlHelper对象</param>
 71         /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>
 72         /// <param name="format">显示格式</param>
 73         /// <returns>Html文本</returns>
 74         public static MvcHtmlString CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format)
 75         {
 76             string name = ExpressionHelper.GetExpressionText(expression);
 77             DateTime value;
 78 
 79             object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model;
 80             if (data != null && DateTime.TryParse(data.ToString(), out value))
 81             {
 82                 return GenerateHtml(name, value, format);
 83             }
 84             else
 85             {
 86                 return GenerateHtml(name, null, format);
 87             }
 88         }
 89 
 90         /// <summary>
 91         /// 通过lambda表达式获取要显示的日期时间
 92         /// </summary>
 93         /// <param name="helper">HtmlHelper对象</param>
 94         /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>
 95         /// <param name="format">显示格式</param>
 96         /// <returns>Html文本</returns>
 97         public static MvcHtmlString CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format)
 98         {
 99             string name = ExpressionHelper.GetExpressionText(expression);
100             DateTime value;
101 
102             object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model;
103             if (data != null && DateTime.TryParse(data.ToString(), out value))
104             {
105                 return MvcHtmlString.Create(value.ToString(format));
106             }
107             else
108             {
109                 return MvcHtmlString.Create(string.Empty);
110             }
111         }
112 
113         /// <summary>
114         /// 通过lambda表达式获取要显示的日期时间
115         /// </summary>
116         /// <param name="helper">HtmlHelper对象</param>
117         /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param>
118         /// <returns>Html文本</returns>
119         public static MvcHtmlString CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
120         {
121             return CalendarDisplayFor(helper, expression, defaultFormat);
122         }
123 
124         /// <summary>
125         /// 生成输入框的Html
126         /// </summary>
127         /// <param name="name">calendar的名称</param>
128         /// <param name="date">calendar的值</param>
129         /// <returns>html文本</returns>
130         private static MvcHtmlString GenerateHtml(string name, DateTime? date, string format)
131         {
132             string dateStr = string.Empty;
133 
134             if (date != null)
135             {
136                 dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"" + date.Value.ToString(format) + "\" />";
137             }
138             else
139             {
140                 dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"\" />";
141             }
142 
143             return MvcHtmlString.Create(dateStr);
144         }
145     }
    View Code

    总结：我的使用方法不一定是最好的，但是总算暂时解决了我的问题，如果园友有更好的方法，或是关于jquery的日期控件我使用方式有误的问题，欢迎指正。
  • 相关阅读:
    RESTful API入门
    $.ajax()参数详解及标准写法（转）
    Jquery 页面首次加载方式
    jQuery操作单选按钮(radio)用法
    GridView的 OnRowDataBound 事件用法
    ASP.NET文件上传大小的限制解决方案
    jQuery经典学习笔记
    Thermal management in a gaming machine
    iis7配置网站容易出现的问题（转）
    你能熟练使用Dictionary字典和List列表吗？（转）
  • 原文地址：https://www.cnblogs.com/sky2014/p/4233734.html
Copyright © 2011-2022 走看看