asp.net mvc 中使用日期控件(My97DatePicker)(一)

最新推荐文章于 2024-04-26 00:20:48 发布

凌晨4点5杀老大爷

最新推荐文章于 2024-04-26 00:20:48 发布

阅读量1.2w

点赞数 6

分类专栏： asp.net mvc 文章标签： asp.net mvc datepicker

本文链接：https://blog.csdn.net/asa_jim/article/details/46475381

版权

asp.net mvc 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

asp.net mvc 开发模式虽好，但是总感觉微软对视图view层面的支持不到位，例如连个像样的日期js控件都没有，无奈只能自己找资料研究扩展HtmlHelper来实现。本篇文章使用My97DatePicker日期控件来实现。

My97DatePicker 的下载地址：点击打开链接

创建asp.net mvc 项目
编写实体类
扩展htmlHelper
生成view页面

创建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=\"\" />";
            }
        }
    }

}

如果需要使用日期控件其它样式或功能，请参考http://www.my97.net/dp/demo/index.htm功能与实例扩展以上代码中的GenerateHtml方法和CalendarDisplayFor方法。

生成View页面

在生成User的Create页面之前，我们需要在模板页面(Site.Master)中引入My97DatePicker的css和js脚本。

    <link href="../../My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css" />
    <script src="../../My97DatePicker/calendar.js" type="text/javascript"></script>
    <script src="../../My97DatePicker/WdatePicker.js" type="text/javascript"></script>

生成User的控制器UserController

public class UserController : Controller
    {
        //
        // GET: /User/

        public ActionResult Index()
        {
            return View();
        }

        //
        // GET: /User/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }

        //
        // GET: /User/Create

        public ActionResult Create()
        {
            return View();
        } 

        //
        // POST: /User/Create

        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
        
        //
        // GET: /User/Edit/5
 
        public ActionResult Edit(int id)
        {
            return View();
        }

        //
        // POST: /User/Edit/5

        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /User/Delete/5
 
        public ActionResult Delete(int id)
        {
            return View();
        }

        //
        // POST: /User/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }

再生成User的Create页面，选择强类型User，如果没有类型，请重新生成一下项目。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<DataPicker.Models.User>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Create
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <% using (Html.BeginForm()) {%>
        <%= Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Name) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Name) %>
                <%= Html.ValidationMessageFor(model => model.Name) %>
            </div>
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Age) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Age) %>
                <%= Html.ValidationMessageFor(model => model.Age) %>
            </div>
            
            <div class="editor-label">
                <%= Html.LabelFor(model => model.Birthday) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Birthday) %>
                <%= Html.ValidationMessageFor(model => model.Birthday) %>
            </div>
            
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%= Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

将其中生日日期的相关html代码修改一下，即

<div class="editor-label">
                <%= Html.LabelFor(model => model.Birthday) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.Birthday) %>
                <%= Html.ValidationMessageFor(model => model.Birthday) %>
            </div>

修改为：

  <div class="editor-label">
                <%: Html.LabelFor(model => model.Birthday)%>
            </div>
            <div class="editor-field">
                <%= Html.CalendarFor(model => model.Birthday)%>
                <%: Html.ValidationMessageFor(model => model.Birthday)%>
            </div>

最后我们将路由修改为启动网站后直接显示到以上的Create 试图页面中，将Global.asax中路由修改为以下代码：

routes.MapRoute(
                "Default", // 路由名称
                "{controller}/{action}/{id}", // 带有参数的 URL
                new { controller = "User", action = "Create", id = UrlParameter.Optional } // 参数默认值
            );

按F5启动网站，如果配置没问题的话回弹出如下界面，我们可以选择日期选择框来选择日期