扩展HtmlHelper的ASP.NET MVC日历

• 下载MvcCalendarSample - 135.42 KB

引言

您想在您的ASP.NET MVC项目中使用日历吗？

也许您正在寻找一个可以嵌入到您的ASP.NET MVC项目中的日历控件。

也许很多人建议您尝试使用JavaScript日历来满足您的需求。

也许您尝试过使用<asp:Calendar ...>控件，但是它需要一个带有runat="server"的表单，这对于我们的MVC web来说并不干净易用。

...

现在，您只需在视图页面中使用<%= Html.Calendar() %>就可以轻松完成这些操作！

背景

这是什么？/ 功能

我刚刚在我的codeplex项目上发布了运行时二进制文件，您可以在此处找到它：http://www.codeplex.com/mvcapps

Mvc日历扩展了HtmlHelper，因此您可以轻松地将其嵌入到ASP.NET MVC项目的视图页面中。

它可以生成一个格式良好的XHTML表格，并默认包含一些CSS类。因此，您可以通过自定义CSS来定制它。

您还可以指定SelectedDate属性，以便日历显示您希望它显示的月份。

如果您想在日历上显示存档数据，您可以向日历提供一个包含一些DateTime对象的数组，然后它将计算某一天是否需要超链接，因为它包含当天的一些数据，例如文章或博客文章。您还应该向日历指定控制器名称和操作名称以创建链接。

使用代码

好了，让我们现在就开始编写代码吧！

1. 最简单的日历

<%= Html.Calendar() %>        

现在您将得到一个显示当前月份的日历

2. 指定日期

<%= Html.Calendar("otherCalendar", DateTime.Now.AddMonths(-1)) %> 

然后您将得到一个不同的日历，

并且您可以自定义影响日历的CSS。

您可以得到一个看起来像这样的日历

3. 带有数据

现在让我向您展示高级选项。

<%
var allPosts = MvcCalendarSample.Models.Post.GetAllPosts(); 
var datesArray = from d in allPosts 
                 select new DateTime(d.CreatedAt.Ticks);
%>

<%= Html.Calendar("archiveCalendar", datesArray, "home", "archive") %> 

您将得到一个包含一些链接的日历，这些链接看起来像“/home/archive?date=2008-7”或“/home/archive?date=2008-7-12”。

您可以自定义您的路由

routes.MapRoute("Archive","home/archive/{date}",new{controller="Home",action="Archive"});

然后您可以得到这样的URL：“/home/archive/2008-7”，漂亮吗？

请下载代码示例以实时运行它！

4. 存档日历

但是这些链接会把我带到哪里？"/home/archive/2008-7"？

当然，您在那里也需要一个操作和一个视图。

让我们看看代码

在 /Views/Home/Archive.aspx 文件中

<h2>Mvc Calendar 4: with data and links and selected date</h2>
<%
    var selectedDate = DateTime.Parse(ViewData["date"].ToString());
    var allPosts = MvcCalendarSample.Models.Post.GetAllPosts();
    var datesArray = from d in allPosts
                     select new DateTime(d.CreatedAt.Ticks);
%>

<%= Html.Calendar("archiveCalendar", selectedDate, datesArray, "home", "archive") %>

<hr />

存档操作

        /// <summary>
        /// The archive view will hold the query string value
        /// </summary>
        /// <param name="date"></param>
        /// <returns></returns>
        public ActionResult Archive(string date)
        {
            DateTime selectedDate;

            if(!DateTime.TryParse(date,out selectedDate)) 
               return this.Content("param date is not in a valid DateTime format");
            
            //you can add your own date validation codes here

            ViewData["Title"] = "Archived Posts in " + date;
            ViewData["date"] = date;

            var allPosts = Post.GetAllPosts();
            var dateSplits = date.Split('-');

            var filteredPosts = new List<Post>();

            if (dateSplits.Length == 3)
            {
                //year-month-day format
                filteredPosts = (from p in allPosts
                                where p.CreatedAt.Year == selectedDate.Year &&
                                      p.CreatedAt.Month == selectedDate.Month &&
                                      p.CreatedAt.Day == selectedDate.Day
                                select p).ToList();

            }
            else if (dateSplits.Length == 2)
            {
                //year-month format
                filteredPosts = (from p in allPosts
                                 where p.CreatedAt.Year == selectedDate.Year && 
                                       p.CreatedAt.Month == selectedDate.Month
                                 select p).ToList();
            }


            ViewData["posts"] = filteredPosts;


            return View();
        }

现在您将看到我们在视图中拥有数据，然后我将在视图页面中放置帖子

<h2>Archived posts in <%= ViewData["date"] %></h2>
<%
    var selectedPosts = ViewData["posts"] as List<MvcCalendarSample.Models.Post>;
%>
<p>Total <%= selectedPosts.Count%> posts in <%= ViewData["date"] %></p>

<% foreach (var post in selectedPosts)
   { %>
<p>[<%= post.CreatedAt %>] <a href="#"><%= post.Title %></a></p>
<%} %> 

现在您可以看到这样的页面

存档视图日历已完成。
希望您会喜欢这个。

历史

这是第一个版本。

任何评论都将是我的荣幸。