你的位置:首页 > ASP.net教程

[ASP.net教程]自己开发博客(ASP.NET MVC+EF CodeFrist)


自己开发博客(ASP.NET MVC+EF CodeFrist)-时间轴小功能

 

想写个类似时间轴的效果 就找了一个插件

 

 

前端不济 找了一个简单的插件地址http://sc.chinaz.com/jiaoben/130509308250.htm

 

这是实体类

 public class TimnAxis : BaseEntity<int>  {    [Required(ErrorMessage = "{0}是必须的")]    [Display(Name = "时间")]    public DateTime Time { get; set; }    [Required(ErrorMessage = "{0}是必须的")]    [Display(Name = "标题")]    [StringLength(50, ErrorMessage = "长度必须少于{1}个字")]    public string Title { get; set; }    [Required(ErrorMessage = "{0}是必须的")]    [Display(Name = "内容")]    [StringLength(1000, ErrorMessage = "长度必须少于{1}个字")]    public string Content { get; set; }  }

这是控制器

 

  [HttpGet]    public ActionResult TimnAxis(bool isAll=false)    {      ViewBag.WebInfo = webInfo;      List<TimnAxis> timnAxises=new List<TimnAxis>();      if (isAll)      {        timnAxises = ItimnAxisManager.FindList().OrderBy(t => t.Time).ToList();      }      else      {        timnAxises = ItimnAxisManager.FindList().OrderBy(t => t.Time).Take(30).ToList();      }        return View(timnAxises);    }

  

依赖的脚本和循环出内容

@section style{  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com//Content/timeaxis/css/default.css" />  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com//Content/timeaxis/css/component.css" />}@section scripts{  <script src="http://www.cnblogs.com//Content/timeaxis/js/modernizr.custom.js"></script>}


<div >  <ul >    @{      foreach (var item in Model)      {        <li>          <time datetime="2013-04-18 09:56">            <span >              @item.Time.ToString("yyyy/MM/dd")            </span> <span >@item.Time.Hour :@item.Time.Minute</span>          </time>          <div ></div>          <div >            <h2>@item.Title</h2>            <p>              @item.Content            </p>          </div>        </li>      }    }  </ul></div>

  前台

后台

用的bootstrap table 做简单的管理

 

个人博客地址 http://www.yhyboy.top/