檢視檔案的組成 - Razor與HTML

ASP.NET Core Web 應用開發–使用 MVC 框架 / PART I MVC 入門 / MVC - View 的部份/檢視檔案的組成 - Razor與HTML

 檢視檔案最後會轉換成為網頁,內容的本質上是即是HTML,無論從版面配置頁,或是沒有使用版面配置頁建立的獨立Razor檢視,都可以看到與網頁一致的HTML架構,例如稍早建立的 SPage.cshtml: 

除了一開始不使用版面配置頁的C# 設定程式碼,接下來即是標準的HTML標籤,因為不使用版面配置頁,必須自行建構需要的網頁架構。

如果開啟 Views/Shared 資料夾底下的 _Layout.cshtml 可以看到相同的架構,當然這個檢視檔案是共用的,因此內容複雜許多,但是依然是標準的 HTML 架構。

Web 應用開發包含了前端HTML以及後端ASP.NET Core,檢視檔案本身支援前端網頁的建立,同時必須與後端 ASP.NET Core 平台進行溝通,因此同時整合HTML與 Raozr 語法。

Razor與後端溝通並執行相關的程式碼完成內容轉換,整合進原有的HTML框架,最後形成網頁內容,送進網路到達前端瀏覽器完成解譯,成為使用者看到的網頁內容。

接下來利用一個展示圖書清單的檢視作說明,於控制器新增動作方法 KTBooks ,建立新的檢視檔案 KTBooks.cshtml,以下列舉控制器 HomeController.cs 動作方法 KTBooks 的內容:

public IActionResult KTBooks()
{
    IList<string> ktbooks = new List<string>() {
                "商業級 ASP.NET MVC 樣式與架構實務 ",
                "Entity Framework 實務精要",
                "C 語言入門精要",
                "Web 前端開發完全入門",
                "HTML5完美風暴"
            };
    ViewBag.books = ktbooks;
    return View();
}

Ktbooks 是一個 List 物件,作為測試用資料,將其設定給 ViewBag.books 屬性,這可以讓接下來 return View() 回傳的檢視檔案中,利用 C# 程式碼透過屬性進行 ktbooks 物件的讀取,執到與控制器進行溝通的目的。

建立並開啟位於 Home/Views 資料夾中對應的檢視檔案 KTBooks.cshtml,配置以下的內容:

@{
    ViewData["Title"] = "KTBooks";
}

<h2&gt康廷數位技術圖書</h2&gt
<div style="padding:2%;font-size:1em;">
    @{
        var books = ViewBag.books;
        foreach (var book in books)
        {
            <p><b>@book</b></p>
            <hr/>
        }
    }
</div>

檔案中 @ 標示大括弧範圍內的是 C# 程式碼,引用 ViewBag.books 來取得控制器KTBooks 動作方法中的 List 物件,再透過 foreach 逐一取出每一筆代表書籍名稱的字串,嵌入 <p> 顯示在網頁上。

接下來執行專案,於網址列輸入以下的網址字串,其中的「xxxxx」以執行環境為準:

https://localhost:xxxxx/Home/KTBooks

最後出現以下的結果畫面,其中顯示了 List 物件中的字串清單:


如前述說明的,結果網頁上的書籍名稱清單,是以 foreach 逐一列舉 List 物件取出,再嵌入 <p> ,下圖展示其中的過程: 


從控制器動作方法,到檢視檔案,最後將資料呈現在網頁上,以上是最基礎的 MVC流程,檢視檔案整合 Razor 與 HTML 得到想要呈現的結果。

以上的示範流程重點在說明檢視檔案的組成,為了簡化說明,直接以動作方法中建立的 List 物件作為資料來源,實務開發上通常是由資料庫取出,透過模型物件進行處理,才會進到控制器的動作方法,後續討論模型的部份進行詳細的討論。


沒有留言:

熱門點閱