ASP.NET Core MVC 之檢視(Views)

卡西莫多_Ruby發表於2019-07-22

  ASP.NET Core MVC 控制器可以使用檢視返回格式化的結果。

 

  1.什麼是檢視

  在 MVC 中,檢視封裝了使用者與應用互動呈現細節。檢視是具有生成要傳送到客戶端內容的,包含嵌入程式碼的HTML模板。檢視使用使用 Razor 語法,該語法允許以最少的程式碼或複雜度與 HTML 進行互動。

  ASP.NET Core MVC 檢視預設以 .cshtml 檔案儲存在應用程式的 Views 資料夾裡面。通常,每個控制器都有自己的資料夾,其中包含對應控制器操作方法的檢視。

  除了對應操作的檢視,區域性檢視,佈局以及其他特定檢視檔案可以用來減少重複,並允許在檢視中重複使用。

  檢視在 MVC 應用程式中提供了關注的分離,將使用者介面級標記與業務邏輯分開封裝。通常,可以通過 佈局與共享指令<layout>或佈局檢視<partial>對應的使用者介面中重複使用。

 

  2.建立檢視  

  屬於某個控制器的檢視建立在 Views/[ControllerName] 資料夾下。在控制器之間公用的檢視則放在 /Views/Shared 資料夾下。將檢視命名為與其關聯的控制器操作一樣的名字,並新增 .cshtml  副檔名。例如,為Home 控制器的 About 操作建立一個檢視,則應在 /Views/Home 資料夾下建立一個 About.cshtml 檔案,或者在操作方法上右鍵點選新增檢視:

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

  @ 符號代表 Razor 程式碼。C# 語法在 { } 包裹的 Razor 程式碼塊中執行,Razor 可以通過運用 @ 符號對值進行操作,從而在HTML中顯示,就像上面 <h2> 和 <h3> 元素裡面展示的那樣。

  這個檢視只關心由它負責的這部分輸出。而頁面佈局的部分,以及檢視中的通用外觀,在別的地方指定。

 

  3.控制器指定檢視 

   檢視通常作為 ViewResult 從操作返回。操作方法可以直接建立和返回一個 ViewResult ,但一般,如果控制器繼承自 Controller ,則只需使用 View 輔助方法即可:

        public IActionResult About()
        {
            ViewData["Message"] = "Your application description page.";

            return View();
        }

  View 的輔助方法有多個過載,以便於返回檢視。可以有選擇性地指定一個返回的檢視,還可以給檢視返回一個模型物件。

  當操作返回檢視時,將發生稱為檢視發現的過程。此過程將確定使用哪個檢視檔案。除非指定了特定的檢視檔案,否則執行時首先查詢控制器對應的檢視,然後在 Share 資料夾中查詢匹配的檢視名稱。

  當操作返回 View 方法時,比如 return View(); 這個操作的名字則被用作檢視名稱。也可以給這個方法床底一個明確的檢視名稱 return View("SomeView"); 。這兩種情況檢視都會在對應控制器的檢視資料夾和Share資料夾搜尋匹配的檔案。

  可以提供檢視檔案的路徑,在這種情況下, .cshtml  副檔名必須指定為檔案路徑的一部分,return View(“Views/Home/About.cshtml ”);

 

  4.給檢視傳遞資料

  ASP.NET Core MVC 可以使用多種機制給檢視傳遞資料。最健壯的方式是在檢視中指定一個模型型別(通常稱為檢視模型,以區別於業務領域的模型型別),然後將此型別的例項從操作傳遞到檢視。建議使用模型或檢視模型將資料傳遞到檢視。這允許檢視利用強型別檢查,可以使用 @model 指令為檢視指定模型:

@model MVCTest.Models.Operation

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

<h2>Create</h2>

<h4>Operation</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

  一旦為檢視指定了模型,就可以使用 @Model 以強型別方式訪問傳送到檢視的例項。(@Model.Name)上面使用的標籤助手。控制器向檢視提供例項:

        public ActionResult Create()
        {
            var model = new Operation()
            {
                Id=1,
                Name="test"
            };
            return View(model);
        }

  對於可以作為模型提供給檢視的型別沒有限制,建議傳遞具有很少或沒有行為的檢視模型,以便將業務邏輯封裝在應用程式的其他位置。

 

  1.弱型別資料

   除了強型別檢視之外,所有檢視都可以訪問弱型別的資料集合。此集合可以通過控制器和檢視上的 ViewData 或 ViewBag 屬性進行引用。ViewBag 屬於  ViewData 的一個包裝器,它提供了該集合的動態檢視,它不是一個單獨的集合。

  ViewData 是通過字串鍵訪問的字典物件,可以在其中儲存和檢索物件。當提取物件時,需要將它們轉化為特定型別。可以使用 ViewData 將資料從控制器傳遞到檢視,以及在檢視(區域性檢視和佈局)中傳遞。字串可以直接儲存和使用,不需要轉化:

        public IActionResult About()
        {
            var model = new Operation()
            {
                Id=1,
                Name="test"
            };
            ViewData["Operation"]  = model ;
            
            ViewData["Message"] = "Your application description page.";

            return View();
        }

  檢視:

@{
    ViewData["Title"] = "About";
    //需要轉化
    var operation = ViewData["Operation"]  as Operation ;
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<h3>@operation.Id</h3>
<h3>@operation.Name</h3>
<p>Use this area to provide additional information.</p>

  ViewBag 物件提供對儲存在 ViewData 中的物件的動態訪問,這樣可以更方便的使用,因為不需要轉換:

@{
    ViewData["Title"] = "About";

}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<h3>@ViewBag.Operation.Id</h3>
<h3>@ViewBag.Operation.Name</h3>
<p>Use this area to provide additional information.</p>

  由於兩者都指向相同的底層 ViewData 集合,因此如果方便,可以在讀取和寫入值時,在 ViewBag 和 ViewData 之間可以混合使用。

 

  2.動態檢視

   不宣告型別,但具有傳遞給它們的模型例項的檢視可以動態引用此例項。但不提供任何編譯保護或 IntelliSense 。如果屬性不存在,則頁面將在執行時出錯。

  

  5.更多檢視特性

  標籤助手可以輕鬆地將伺服器端行為新增到現有地 HTML 標籤中,從而避免在檢視中使用自定義程式碼或助手程式碼。

  生成自定義 HTML 標記可以使用許多內建地 HTML 助手來實現,更復雜地 UI 邏輯(可能具有自己地資料需求)可以封裝在檢視元件(View Components)中。檢視元件提供了與控制器和檢視提供的相同的關注點,並且可以消除對於處理由常見UI 元素使用資料的動作和檢視的需要。

  檢視頁支援依賴注入,允許服務注入到檢視。(會在後面提到)

 

 

 

 

相關文章