iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

ASP.NET MVC5架構說明與Q&A諮詢系統實作系列 第 25

[DAY 25] Q&A 諮詢系統 - 程式開發(_Layout.cshtml)

5. 程式開發

今天來介紹 詢問 的部分
先來看成果(網頁有套用 Bootstrap)
https://ithelp.ithome.com.tw/upload/images/20201008/20128969xE4Oa56NRO.png

分成兩個部分
https://ithelp.ithome.com.tw/upload/images/20201008/2012896967fmsQENX4.jpg

① Navbar 導覽列 (_Layout.cshtml 內的程式碼,每個頁面都相同的部分)

<body>
    <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary" 
        style="height:70px">
        <div class="container dt-cls">
            <!--按扭連到 Home 的 Index 頁面-->
            <a class="navbar-brand" href="@Url.Action("Index", "Home")">
                <!--左上角的圖-->
                <img src="~/images/dortsmark_white.png" 
                    width="45" height="28" />
                <img src="~/images/banner_white.png" 
                    width="300" height="45" />
            </a>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <!--導覽列的按鈕都偏右-->
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item">
                        <!--按扭連到 Quer 的 Quer 頁面,就是目前的頁面-->
                        <a class="nav-link" 
                            href="@Url.Action("Quer", "Quer")" 
                            style="font-weight:bold">諮詢問題
                        </a>
                    </li>
                    <li class="nav-item">
                        <!--按扭連到 LookQA 的 Index 頁面-->
                        <a class="nav-link" 
                            href="@Url.Action("Index", "LookQA")" 
                            style="font-weight:bold">查詢Q&A
                        </a>
                    </li>
                    <!--下拉選單-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle show" 
                            data-toggle="dropdown" 
                            href="#" id="manager" 
                            aria-expanded="false" 
                            style="font-weight:bold">
                            後台管理
                            <!--箭頭-->
                            <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu dt-cls" 
                            aria-labelledby="manager">
                            <!--按扭連到 Ansr 的 Index 頁面-->
                            <a class="dropdown-item" 
                                href="@Url.Action("Index", "Ansr")">
                                回覆問題
                            </a>
                            <!--按扭連到 SystClas 的 Index 頁面-->
                            <a class="dropdown-item" 
                                href="@Url.Action("Index", "SystClas")">
                                問題分類維護
                            </a>
                            <!--按扭連到 SystQAdb 的 Index 頁面-->
                            <a class="dropdown-item" 
                                href="@Url.Action("Index", "SystQAdb")">
                                Q&A維護
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content" style="margin-top:4px">
        <br />
        <!--DAY 16 有說明 RenderBody的功能-->
        @RenderBody()
        <hr />
        <!--網頁的最底層,這裡沒有截到,顯示 ➡ 2020 - 應用系統諮詢服務-->
        <footer>
            <!--DateTime.Now.Year 當年年份顯示-->
            <p>© @DateTime.Now.Year - 應用系統諮詢服務</p>
        </footer>
    </div>
</body>

明天來介紹 ② (。ì _ í。)


上一篇
[DAY 24] Q&A 諮詢系統 - 系統設計
下一篇
[DAY 26] Q&A 諮詢系統 - 程式開發(下拉選單連到 API、資料庫)
系列文
ASP.NET MVC5架構說明與Q&A諮詢系統實作30

1 則留言

1
我思故我在
iT邦研究生 2 級 ‧ 2020-10-08 15:33:45

真有活力的文筆,愛了!

我要留言

立即登入留言