從零開始，搭建博客系統MVC5+EF6搭建框架（5），博客詳情頁、留言、輪播圖管理、右側統計博文

一、博客系統進度回顧上一遍博客介紹到，系統已經實現到了發佈以及前臺佈局展示，接下來就是實現一些，詳情頁，留言、輪播圖管理、右側博文統計信息實現。二、博客系統詳情頁實現 2.1先來看看詳情頁展示的效果 2.2實現控制器在前臺控制器中創建一個Blog的控制器，主要是展示博客分類以及詳情頁 Actio ...

一、博客系統進度回顧

上一遍博客介紹到，系統已經實現到了發佈以及前臺佈局展示，接下來就是實現一些，詳情頁，留言、輪播圖管理、右側博文統計信息實現。

二、博客系統詳情頁實現

2.1先來看看詳情頁展示的效果

2.2實現控制器在前臺控制器中創建一個Blog的控制器，主要是展示博客分類以及詳情頁

Action詳情頁實現：

  1 /// <summary>
  2         /// 詳情頁
  3         /// </summary>
  4         /// <param name="id"></param>
  5         /// <returns></returns>
  6         public ActionResult Detail(int id)
  7         {
  8             //獲取控制器名稱
  9             ViewBag.controllername = RouteData.Values["controller"].ToString().ToLower();
 10             var model = BlogArticleServive.getBlogDetails(id);
 11             ViewBag.gblist = GuestbookServices.QueryOrderBy(c => c.blogId == id, c => c.createdate, false).ToPagedList(1, 5);
 12 
 13             //發佈時間排序
 14             ViewBag.blogtimelist = BlogArticleServive.QueryOrderBy(c => true, c => c.bCreateTime, false);
 15             //評論排序
 16             ViewBag.blogtrafficlist = BlogArticleServive.QueryOrderBy(c => true, c => c.btraffic, false);
 17             //留言排序
 18             string sql = @"select a.*,b.btitle from (select blogId,count(1) as counts  from Guestbook group by blogId) as a
 19 inner join BlogArticle as b
 20 on
 21 b.bID=a.blogId order by counts desc";
 22 
 23             ViewBag.blogguestbooklist = GuestbookServices.RunProc<TopgbViewModels>(sql);
 24 
 25             return View(model);
 26         }

View Code

由於展示的內容比實際存儲在資料庫中的信息多，所以把所有能展示的信息都放在BlogViewModels中，在blog業務邏輯層單獨實現了一個包含上一頁下一頁，以及摘要賦值的方法。

由於這一部分需要從詳情內容中只保留部分文字，所以這裡需要對索取的詳情信息做處理，由於詳情信息是通過富文本編輯來添加的裡面包含了很多html代碼信息，所以在common程式集中，創建一個工具類，Tools類來存放，輔助的相關方法。

ReplaceHtmlTag方法：

  1   #region 去除富文本中的HTML標簽
  2         /// <summary>
  3         /// 去除富文本中的HTML標簽
  4         /// </summary>
  5         /// <param name="html"></param>
  6         /// <param name="length"></param>
  7         /// <returns></returns>
  8         public static string ReplaceHtmlTag(string html, int length = 0)
  9         {
 10             string strText = System.Text.RegularExpressions.Regex.Replace(html, "<[^>]+>", "");
 11             strText = System.Text.RegularExpressions.Regex.Replace(strText, "&[^;]+;", "");
 12 
 13             if (length > 0 && strText.Length > length)
 14                 return strText.Substring(0, length);
 15 
 16             return strText;
 17         }
 18         #endregion

View Code

然後在獲取到多有信息，要處理的地方就是用三元運算符來判斷，截取前面的文字部分

2.3詳情頁視圖代碼

  1 @model Wchl.WMBlog.Model.VeiwModels.BlogViewModels
  2 
  3 @{
  4     ViewBag.Title = "博客詳情頁";
  5 }
  6 <link href="~/Content/lib/zui/doc.css" rel="stylesheet" />
  7 <section>
  8     <article>
  9         <div spellcheck="false" class="example">
 10             <br>
 11             <ul class="breadcrumb">
 12                 <li><i class="icon-location-arrow icon-muted"></i></li>
 13                 <li><a href="/home/index">首頁</a></li>
 14                 <li><a href="/blog/index">博客</a></li>
 15                 <li class="active">Data</li>
 16             </ul>
 17             <hr>
 18             <article class="article">
 19                 <header>
 20                     <h1 class="text-center">@Model.btitle</h1>
 21                     <dl class="dl-inline">
 22                         <dt>發佈時間：</dt>
 23                         <dd>@Model.bCreateTime</dd>
 24                         <dt>作者：</dt>
 25                         <dd>@Model.bsubmitter</dd>
 26                         <dt></dt>
 27                         <dd class="pull-right"><span class="label label-success">新</span> <span class="label label-warning">火爆</span> <span class="label label-info">原創</span> <span class="label label-danger"><i class="icon-eye-open"></i> @Model.btraffic</span></dd>
 28                     </dl>
 29                     <section class="abstract">
 30                         <p><strong>摘要：</strong>@Model.digest</p>
 31                     </section>
 32                 </header>
 33                 <section class="article-content">
 34                     @Html.Raw(Model.bcontent)
 35                 </section>
 36                 <footer>
 37                     <p class="pull-right text-muted">
 38                         發佈時間：@Model.bCreateTime.ToString("yyyy年MM月dd日 HH:mm:ss") &nbsp;點擊數：@Model.btraffic
 39                     </p>
 40                     <p class="text-important">本文版權所有歸<a href="###">@Model.bsubmitter</a></p>
 41                     <ul class="pager pager-justify">
 42                         @if (Model.previous == null)
 43                         {
 44                           <li class="previous disabled"><a href="#" title=""><i class="icon-arrow-left"></i> 上一篇: </a></li>
 45                         }
 46                         else
 47                         {
 48                             <li class="previous"><a href="/blog/Detail/@Model.previousID " title="@Model.previous"><i class="icon-arrow-left"></i> 上一篇: @Model.previous.Substring(0, 5)  </a></li>
 49                         }
 50                         @if (Model.next == null)
 51                         {
 52                             <li class="next disabled"><a href="#">下一篇: <i class="icon-arrow-right"></i></a></li>
 53                         }
 54                         else
 55                         {
 56                             <li class="next"><a href="/blog/Detail/@Model.nextID " title="[email protected]">下一篇:@Model.next.Substring(0, 5) <i class="icon-arrow-right"></i></a></li>
 57                         }
 58 
 59 
 60                     </ul>
 61                 </footer>
 62             </article>
 63         </div>
 64     </article>
 65     <div id="comment">
 66         @Html.Partial("_GuestbookPage")
 67     </div>
 68 
 69 </section>
 70 @section scripts
 71 {
 72     <script src="~/Content/lib/laypage/laypage.js"></script>
 73     <script type="text/javascript">
 74         var blogid;
 75         var curr;
 76         $(function () {
 77             $("#blogId").val(@Model.bID);
 78             //運行分頁
 79             blogid = $("#blogId").val();
 80             guestbookpage(curr,blogid);
 81         })
 82 
 83     function su(data) {
 84         $("#comment").html(data);
 85         $("#blogId").val(@Model.bID);
 86         //setTimeout(function () {
 87         //    if (document.getElementById('textcenter') != null) {
 88         //            //運行分頁
 89         //            guestbookpage(1, blogid);
 90         //    }
 91         //}, 3000);
 92         if (document.getElementById('textcenter') != null) {
 93             //運行分頁
 94             guestbookpage(1, blogid);
 95         }
 96 
 97 
 98 
 99     }
100 
101     //以下將以jquery.ajax為例，演示一個非同步分頁
102     function guestbookpage(curr,blogid) {
103         $.getJSON('/blog/getGuestbook', {
104             page: curr || 1,
105             blogId: blogid//向服務端傳的參數，此處只是演示
106         }, function (res) {
107             //此處僅僅是為了演示變化的內容
108             $("#comments-list").html(res.content);
109             //顯示分頁
110             laypage({
111                 cont: document.getElementById('textcenter'), //容器。值支持id名、原生dom對象，jquery對象。【如該容器為】：<div id="page1"></div>
112                 pages: res.pages, //通過後臺拿到的總頁數
113                 curr: curr || 1, //當前頁
114                 jump: function (obj, first) { //觸發分頁後的回調
115                     if (!first) { //點擊跳頁觸發函數自身，並傳遞當前頁：obj.curr
116                         curr = obj.curr;
117                         guestbookpage(curr, blogid);
118                     } else {
119                         curr = first;
120                         guestbookpage(curr, blogid);
121                     }
122 
123                 }
124             });
125         });
126     };
127     </script>
128     }
129

View Code

這裡博客的詳情頁也是通過佈局頁來實現的。

三、博客系統詳情頁留言實現

3.1留言展示頁面效果

先要創建一個類在資料庫中創建一個表：

Guestbook類

  1 namespace Wchl.WMBlog.Model.Models
  2 {
  3     public class Guestbook
  4     {
  5 
  6         /// <summary>留言表
  7         /// 
  8         /// </summary>
  9         public int id { get; set; }
 10 
 11         /// <summary>博客ID
 12         /// 
 13         /// </summary>
 14         public int? blogId { get; set; }
 15         /// <summary>創建時間
 16         /// 
 17         /// </summary>
 18         public DateTime createdate { get; set; }
 19         public string username { get; set; }
 20 
 21         /// <summary>手機
 22         /// 
 23         /// </summary>
 24         public string phone { get; set; }
 25         /// <summary>qq
 26         /// 
 27         /// </summary>
 28         public string QQ { get; set; }
 29 
 30         /// <summary>留言內容
 31         /// 
 32         /// </summary>
 33         public string body { get; set; }
 34         /// <summary>ip地址
 35         /// 
 36         /// </summary>
 37         public string ip { get; set; }
 38 
 39         /// <summary>是否顯示在前臺,0否1是
 40         /// 
 41         /// </summary>
 42         public bool isshow { get; set; }
 43 
 44         public BlogArticle blogarticle { get; set; }
 45     }
 46 }

View Code

GuestbookViewModels展示類：

  1 namespace Wchl.WMBlog.Model.VeiwModels
  2 {
  3     /// <summary>
  4     /// 留言信息展示類
  5     /// </summary>
  6     public class GuestbookViewModels
  7     {
  8         /// <summary>留言表
  9         /// 
 10         /// </summary>
 11         public int id { get; set; }
 12 
 13         /// <summary>博客ID
 14         /// 
 15         /// </summary>
 16         public int? blogId { get; set; }
 17         /// <summary>創建時間
 18         /// 
 19         /// </summary>
 20         public DateTime createdate { get; set; }
 21         public string username { get; set; }
 22 
 23         /// <summary>手機
 24         /// 
 25         /// </summary>
 26         public string phone { get; set; }
 27         /// <summary>qq
 28         /// 
 29         /// </summary>
 30         public string QQ { get; set; }
 31 
 32         /// <summary>留言內容
 33         /// 
 34         /// </summary>
 35         public string body { get; set; }
 36         /// <summary>ip地址
 37         /// 
 38         /// </summary>
 39         public string ip { get; set; }
 40 
 41         /// <summary>是否顯示在前臺,0否1是
 42         /// 
 43         /// </summary>
 44         public bool isshow { get; set; }
 45 
 46         public BlogArticle blogarticle { get; set; }
 47     }
 48 }

View Code

GuestbookMap欄位約束:

  1 
  2 namespace Wchl.WMBlog.Model.Maps
  3 {
  4     public class GuestbookMap: EntityTypeConfiguration<Guestbook>
  5     {
  6         public GuestbookMap() {
  7             this.HasKey(p => p.id);
  8             //設置外鍵
  9             this.HasRequired(p => p.blogarticle).WithMany().HasForeignKey(p => p.blogId);
 10         }
 11     }
 12 }

View Code

接下來就是創建相應的倉儲介面、實現，服務介面、實現，這裡就不一一介紹了，跟上一篇實現博客類的是一樣的。

我在實現這個功能的時候，想使用ajax來提交：

這裡我把所有留言的內容放在一個部分視圖頁

_GuestbookPage代碼：

  1 <article>
  2     <div spellcheck="false" class="example">
  3         <div class="comments">
  4             <header>
  5                 <div class="pull-right"><a href="#commentReplyForm2" class="btn btn-primary"><i class="icon-comment-alt"></i> 發表評論</a></div>
  6                 <h3>所有評論</h3>
  7             </header>
  8             <section class="comments-list" id="comments-list">
  9               @{ if (ViewBag.gblist != null)
 10                   {
 11                       foreach (var list in ViewBag.gblist)
 12                       {
 13                         <div class="comment">
 14                             <a href="###" class="avatar">
 15                                 <i class="icon-user icon-2x"></i>
 16                             </a>
 17                             <div class="content">
 18                                 <div class="pull-right text-muted">@list.createdate</div>
 19                                 <div><a href="###"><strong>@list.username</strong></a></div>
 20                                 <div class="text">@list.body</div>
 21                                 <div class="actions">
 22                                     <a href="##">回覆</a>
 23                                 </div>
 24                             </div>
 25                         </div>
 26                       }
 27                   }
 28 
 29             }
 30             </section>
 31             <br />
 32             <div class="text-center" id="textcenter">
 33 
 34             </div>
 35             <footer>
 36                 <div class="reply-form" id="commentReplyForm2">
 37                     <a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
 38                     @using (Ajax.BeginForm("addGuestbook", "Blog", new AjaxOptions()
 39                     {
 40                         HttpMethod = "post",
 41                         OnSuccess="su"
 42 
 43                     }, new { @class = "form-horizontal" }))
 44                     {
 45                         <input type="hidden" id="blogId" name="blogId" value=""/>
 46                         <div class="form-group col-md-4 form-inline">
 47                             <label for="username" class="col-xs-3">昵稱</label>
 48                             <div>
 49                                 <input type="text" class="form-control" name="username" id="username" placeholder="昵稱">
 50                             </div>
 51                         </div>
 52                         <div class="form-group col-md-4 form-inline">
 53                             <label for="phone" class="col-xs-3">手機</label>
 54                             <div>
 55                                 <input type="text" class="form-control" name="phone" id="phone" placeholder="手機">
 56                             </div>
 57                         </div>
 58                         <div class="form-group col-md-4 form-inline">
 59                             <label for="QQ" class="col-xs-3">Q Q</label>
 60                             <div>
 61                                 <input type="text" class="form-control" name="QQ" id="QQ" placeholder="Q Q">
 62                             </div>
 63                         </div>
 64                         <div class="form-group"></div>
 65                         <div class="form-group">
 66                             <textarea class="form-control new-comment-text" id="body" name="body" rows="4" placeholder="撰寫留言..."></textarea>
 67                         </div>
 68                         <div class="form-group comment-user">
 69                             <div class="row">
 70                                 <div class="col-md-2 col-md-offset-10"><button type="submit" class="btn btn-block btn-primary " value="提交">提交</button></div>
 71                             </div>
 72                         </div>
 73                     }
 74                 </div>
 75             </footer>
 76         </div>
 77     </div>
 78 </article>
 79

View Code

其中分為兩部分，一部分是輸入留言，一部分是展示信息。

留言提交的表單如下：

在blog控制器中實現添加數據方法：

  1         /// <summary>
  2         ///提交評論
  3         /// </summary>
  4         /// <param name="model"></param>
  5         /// <returns></returns>
  6         [HttpPost]
  7         public ActionResult addGuestbook(GuestbookViewModels model)
  8         {
  9             model.createdate = DateTime.Now;
 10             model.ip = Request.UserHostAddress;
 11             //AutoMapper自動映射
 12             Mapper.Initialize(cfg => cfg.CreateMap<GuestbookViewModels, Guestbook > ());
 13             Guestbook models = Mapper.Map< GuestbookViewModels, Guestbook> (model);
 14             BlogArticle blogArticle = BlogArticleServive.QueryWhere(a => a.bID == model.blogId).FirstOrDefault();
 15             blogArticle.bcommentNum += 1;
 16             BlogArticleServive.SaverChanges();
 17             GuestbookServices.Add(models);
 18             GuestbookServices.SaverChanges();
 19             ViewBag.gblist = GuestbookServices.QueryOrderBy(c => c.blogId == model.blogId, c => c.createdate, false).ToPagedList(1, 5);
 20             return PartialView("_GuestbookPage");
 21         }

View Code

執行成功之後就把信息載入到分頁信息的位置。

3.2添加實現之後就是展示數據，展示數據使用的是一個js分頁插件laypage.js

在mvc的視圖中只能在頁面有一個model類，所以就只能使用ViewBag.gblist來傳值了，本來這個打算用mvcpager插件，結果發現不行，就只能使用js來分頁，實現如下：

後臺blog控制器下，實現分頁，然後拼接數據：

  1 /// <summary>
  2         /// js分頁實現
  3         /// </summary>
  4         /// <param name="page"></param>
  5         /// <param name="blogId"></param>
  6         /// <returns></returns>
  7         public ActionResult getGuestbook(int page,int blogId)
  8         {
  9             StringBuilder sb = new StringBuilder();
 10             int pages = 0;
 11             var modelsLists = GuestbookServices.QueryByPage(page, 5,out pages, c => c.blogId == blogId, c => c.createdate, false);
 12             foreach (var item in modelsLists)
 13             {
 14                 sb.AppendFormat(@"<div class='comment'>
 15 <a href = '###' class='avatar'>
 16 <i class='icon-user icon-2x'></i>
 17 </a>
 18 <div class='content'>
 19 <div class='pull-right text-muted'>{0}</div>
 20 <div><a href = '###' ><strong > {1}</strong ></a ></div>
 21 <div class='text'>{2}</div>
 22 <div class='actions'>
 23 <a href = '##' > 回覆 </a>
 24 </div >
 25 </div >
 26 </div >",item.createdate,item.username,item.body);
 27             }
 28             if (pages % 5 == 0)
 29             {
 30                 pages = pages / 5;
 31             }
 32             else
 33             {
 34                 pages = (pages / 5)+1;
 35             }
 36 
 37 
 38             return Json(new {
 39                 content = sb.ToString(),
 40                 pages= pages
 41             });
 42         }

View Code

在詳情頁中直接調用就可以了實現分頁了

四、博客系統廣告輪播圖管理實現

4.1實現效果這裡的輪播圖使用的是zui中組件來實現的，

4.2主頁輪播圖視圖中的代碼實現

4.3輪播圖管理後臺頁面實現展示

這裡上傳圖片使用的是百度的上傳控制項

視圖頁代碼實現:

  1 
  2 @{
  3     ViewBag.Title = "廣告管理";
  4 }
  5 @section stylesheet{