自己开发博客(ASP.NET MVC+EF CodeFrist)-历程小功能

IT/互联网 / 编程语言 养生小编 来源:互联网 169浏览 0评论

自己开发博客(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="/Content/timeaxis/css/default.css" />    <link rel="stylesheet" type="text/css" href="/Content/timeaxis/css/component.css" />}@section scripts{    <script src="/Content/timeaxis/js/modernizr.custom.js"></script>}

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

  前台

技术分享

后台

用的bootstrap table 做简单的管理

技术分享

 

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

自己开发博客(ASP.NET MVC+EF CodeFrist)-历程小功能

原文:http://www.cnblogs.com/yhyboy/p/5927739.html