ASP.NET Core MVC 之視圖(Views)


  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 元素使用數據的動作和視圖的需要。

  視圖頁支持依賴注入,允許服務注入到視圖。(會在后面提到)

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM