Blog專案 - 內文 (Controller, view)
2020-09-11 01:39 Last Edited: 2021-02-06 18:10 1,095

 內文很簡單，就是詳細讀一篇文章，基本上比首頁列表模式更簡單，所以立即看代碼吧。

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，各有各好。

 

Category: Coding
Tags: Side Project
Prev Article
Blog專案 - 首頁列表 (Controller, Model, View, css)
Next Article
Blog專案 - Table Design難題