Blog專案 - 內文 (Controller, view)
2020-09-11 01:39
Last Edited: 2021-02-06 18:10
1,090
內文很簡單,就是詳細讀一篇文章,基本上比首頁列表模式更簡單,所以立即看代碼吧。
public class BlogController : Controller
{
[Route("/blog/{id:int}")]
public IActionResult Individual(int id)
{
ViewData["BlogId"] = id;
List<Models.Blog> blogs = BlogFactory.GetBlog(id);
if (blogs.Count > 0)
{
ViewData["Title"] = blogs[0].Title;
return View("Detail", blogs[0]);
}
else
{
return Redirect("~/");
}
}
}
Controller會接收/blog/{id}的request,上面一定要加上[Route()],否則這個Method只會接收/blog/individual/{id}
從DB抓第一個相符id的文章,Bind進Detail.cshtml,再回傳
@model Blog
<head>
<link rel="stylesheet" href="~/lib/highlight/styles/vs2015.css">
<script src="~/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<div id="blogBody" class="col-md-9">
@{string dhref = string.Format("https://hychan.asuscomm.com/blog/{0}", Model.Id);}
<div class="blogPost">
<a class="blogTitle" href="/blog/@Model.Id">@Model.Title</a>
<div class="header">
<small class="gray headerItems">@Model.Create_Ts.ToString("yyyy-MM-dd hh:mm")</small>
@if(Model.Modify_Ts != null){
<small class="gray headerItems">Last Edited: @(((DateTime)Model.Modify_Ts).ToString("yyyy-MM-dd hh:mm"))</small>
}
<small class="gray view_count headerItems">@string.Format("{0:n0}", @Model.view_count)</small>
</div>
<div class="blogContent">
@Html.Raw(@Model.Markdown_Content)
</div>
<div class="blogFooter">
<div class="category">
Category:
<a href="/category/@Model.Category" class="l">@Model.Category</a>
</div>
@if (!string.IsNullOrEmpty(@Model.Tags))
{
<div class="tags">
Tags:
@foreach (var item in @Model.Tags.Split(','))
{
if (item != "")
{<a href="/tag/@item.Trim()" class="l" style="margin-right:4px">@item.Trim()</a>}
}
</div>
}
</div>
</div>
<div class="NextPrevPanel">
@{BlogIdPair PrevBlog = @BlogFactory.GetBlogPrevBlog(Model.Id);}
@{BlogIdPair NextBlog = @BlogFactory.GetBlogNextBlog(Model.Id);}
@if (PrevBlog != null)
{
<div class="PrevBlog">
<small>Prev Article</small>
<br />
<a href="/blog/@PrevBlog.Id" class="l">@PrevBlog.Title</a>
</div>
}
@if (NextBlog != null)
{
<div class="NextBlog">
<small>Next Article</small>
<br />
<a href="/blog/@NextBlog.Id" class="l">@NextBlog.Title</a>
</div>
}
</div>
</div>
<partial name="~/Views/Shared/_sidebar.cshtml" />
其實View的部份跟列表預覽也差不多,單純就是讀Blog物件顯示出來
不同的是多了NextPrevPanel,就是在下面的那一個「上一篇下一篇」,也是單純從DB用id抓上一篇下一篇的Id,分別寫進超連結
這裡用上了Highlight.js,它的功用是將<pre><code>內的code block套用不同的theme,比如這裡用的vs2015 theme,比原本的灰色好看得多。 *2021-02-06 發現啟用cloudflare的Rocket Loader會讓hljs.initHighlightingOnLoad()失效,js改不到class,css也無法套用
順帶一提,要使用js,<script src="你的js的path"></script>就可以,js檔的提供者通常都有示範怎樣emble進html裡。
在MVC專案裡面一般是放在wwwroot下面,當然不放在專案裡也可以把src寫成線上的js,各有各好。
Prev Article
Blog專案 - 首頁列表 (Controller, Model, View, css)
Blog專案 - 首頁列表 (Controller, Model, View, css)
Next Article
Blog專案 - Table Design難題
Blog專案 - Table Design難題