ASP.NET Core MVC 之檢視（Views）

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

　　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 元素使用資料的動作和檢視的需要。

　　檢視頁支援依賴注入，允許服務注入到檢視。（會在後面提到）

 

 

 

　

相關文章