在ASP.NET MVC 6中,view components (VCs) 功能類似于虛擬視圖,但是功能更加強大。 VCs兼顧了視圖和控制器的優點,你可以把VCs 看作一個Mini 控制器。它負責控制應用中的某一功能模塊,例如:
成都創新互聯公司專注于網站設計、網站制作、網頁設計、網站制作、網站開發。公司秉持“客戶至上,用心服務”的宗旨,從客戶的利益和觀點出發,讓客戶在網絡營銷中找到自己的駐足之地。尊重和關懷每一位客戶,用嚴謹的態度對待客戶,用專業的服務創造價值,成為客戶值得信賴的朋友,為客戶解除后顧之憂。動態導航菜單
標簽云
登錄面板
購物車
最近文章
博客側邊欄
假如使用VC 創建了登錄面板,可以在很多場景中調用,例如:
用戶沒有登錄
用戶已登錄,需要退出使用其他帳號登錄或者管理其他帳號。
如果當前登錄角色為管理員,渲染管理員登錄面板
你可以根據用戶的需求獲取數據進行渲染。添加VC到需要該視圖控件的頁面。
VC 包含兩部分,類 (一般繼承于ViewComponent) 和調用VC類中方法的Razor 視圖。類似于ASP.NET 控制器, VC 可以作為POCO使用,但是更多用戶傾向于使用從 VewComponent中繼承而來的方法和屬性。
VC的創建方式有:
繼承ViewComponent.
擁有 [ViewComponent] 屬性,或者從擁有 [ViewComponent]屬性派生的類。
創建名稱已ViewComponent為后綴的類。
和controllers相同,VCs 必須是公開、非嵌套和非抽象的類。
1. 創建名為ViewComponents的文件夾,View component 類可以包含在工程中的任何文件夾下。
2. 在ViewComponents 文件夾下創建PriorityListViewComponent.cs 類。.
3. 使用以下代碼替代PriorityListViewComponent.cs 文件原有代碼:
using System.Linq;using Microsoft.AspNet.Mvc;using TodoList.Models;namespace TodoList.ViewComponents { public class PriorityListViewComponent : ViewComponent { private readonly ApplicationDbContext db; public PriorityListViewComponent(ApplicationDbContext context) { db = context; } public IViewComponentResult Invoke(int maxPriority) { var items = db.TodoItems.Where(x => x.IsDone == false && x.Priority <= maxPriority); return View(items); } } }
代碼注釋:
· 因為PriorityListViewComponent 類繼承于ViewComponent,運行時將通過字符串"PriorityList" 從View中引用該類。在后續章節將會進行詳細闡述。
· [ViewComponent] 屬性用于設置引用VC的別名,例如,創建名稱為XYZ的類,我們可以通過以下代碼設置其引用別名:
[ViewComponent(Name = "PriorityList")]public class XYZ : ViewComponent
· 組件使用構造注入器使數據內容生效,類似于 Todo 控制器的功能。
· 調用View中的公開方法,可以傳遞任意數量的參數。在異步版本中, InvokeAsync是可用的。在后續章節中我們將提及InvokeAsync 和多參數的使用方法。在之前的代碼中,公開方法的返回值為×××事項(ToDoItems),優先級不低于maxPriority。
1. 在Views\Todo 文件夾下創建Components文件夾,注意這個文件夾需要命名為Components。
2. 在Views\Todo\Components文件夾下創建PriorityList 文件夾。文件夾名稱必須和view component 類名稱一致。或者類名去除后綴名稱(如果在創建類時遵循慣例使用ViewComponent 作為后綴)。如果使用了ViewComponent屬性。
3. 在Views\Todo\Components\PriorityList 文件夾下創建Default.cshtml Razor 視圖,添加以下標記:
@model IEnumerable<TodoList.Models.TodoItem> <h4>Priority Items</h4> <ul> @foreach (var todo in Model) { <li>@todo.Title</li> }</ul>
Razor 視圖包含并且顯示了 TodoItems。如果 VC 調用方法沒有傳遞視圖的名稱 (如例子中所示),那么默認情況下則調用視圖名稱對于方法。在后續的文章中,將闡述如何傳遞視圖名稱。
在views\todo\index.cshtml 視圖底部添加包含有調用PriorityListViewComponent的div:
@model IEnumerable<TodoList.Models.TodoItem> <h4>Priority Items</h4> <ul> @foreach (var todo in Model) { <li>@todo.Title</li> }</ul>
標記 @await Component.InvokeAsync() 表示該語法用于調用VC。第一個參數是我們要調用的組件名稱。其余參數參數傳遞給該VC。在這個例子中,我們傳遞“1”作為過濾的優先級。InvokeAsync 方法可以包含任意數量的參數。
以下圖片顯示了優先級列表:
@{ ViewBag.Title = "ToDo Page"; }<div class="jumbotron"> <h2>ASP.NET vNext</h2> </div> <div class="row"> <div class="col-md-4"> @if (Model.Count == 0) { <h5>No Todo Items</h5> } else { <table> <tr><th>TODO</th><th></th></tr> @foreach (var todo in Model) { <tr> <td>@todo.Title </td> <td> @Html.ActionLink("Details", "Details", "Todo", new { id = todo.Id }) | @Html.ActionLink("Edit", "Edit", "Todo", new { id = todo.Id }) | @Html.ActionLink("Delete", "Delete", "Todo", new { id = todo.Id }) </td> </tr> } </table> } <div>@Html.ActionLink("Create New Todo", "Create", "Todo") </div> </div> <div class="col-md-4"> @Component.Invoke("PriorityList", 1) </div> </div>
注意: VC通常被添加到 Views\Shared 文件夾下,因為它并不僅僅是controller。
通過以下代碼更新PriorityListViewComponent類:
using System.Linq;using Microsoft.AspNet.Mvc;using TodoList.Models;using System.Threading.Tasks;namespace TodoList.ViewComponents { public class PriorityListViewComponent : ViewComponent { private readonly ApplicationDbContext db; public PriorityListViewComponent(ApplicationDbContext context) { db = context; } // Synchronous Invoke removed. public async Task<IViewComponentResult> InvokeAsync(int maxPriority, bool isDone) { string MyView = "Default"; // If asking for all completed tasks, render with the "PVC" view. if (maxPriority > 3 && isDone == true) { MyView = "PVC"; } var items = await GetItemsAsync(maxPriority, isDone); return View(MyView, items); } private Task<IQueryable<TodoItem>> GetItemsAsync(int maxPriority, bool isDone) { return Task.FromResult(GetItems(maxPriority, isDone)); } private IQueryable<TodoItem> GetItems(int maxPriority, bool isDone) { var items = db.TodoItems.Where(x => x.IsDone == isDone && x.Priority <= maxPriority); string msg = "Priority <= " + maxPriority.ToString() + " && isDone == " + isDone.ToString(); ViewBag.PriorityMessage = msg; return items; } } }
注意: 這里移除了用于同步的Invoke 方法,使用更加強大的asynchronous方法替代。
修改 VC 視圖顯示優先級信息:
@model IEnumerable<TodoList.Models.TodoItem> <h5>@ViewBag.PriorityMessage</h5> <ul> @foreach (var todo in Model) { <li>@todo.Title</li> }</ul>
最后,更新 views\todo\index.cshtml 視圖文件:
@* Markup removed for brevity. *@ <div class="col-md-4"> @await Component.InvokeAsync("PriorityList", 2, true) </div> </div>
以下圖片展示了PriorityListViewComponent類和Index視圖的修改效果:
一些復雜的VC在某些情況下也許需要去指定特定的視圖,以下代碼是通過InvokeAsync 方法指定視圖的方法:
public async Task<IViewComponentResult> InvokeAsync(int maxPriority, bool isDone) { string MyView = "Default"; // If asking for all completed tasks, render with the "PVC" view. if (maxPriority > 3 && isDone == true) { MyView = "PVC"; } var items = await GetItemsAsync(maxPriority, isDone); return View(MyView, items); }
更改 Views\Todo\Components\PriorityList\Default.cshtml為 Views\Todo\Components\PriorityList\PVC.cshtml視圖。更改PVC視圖控件來驗證它的使用:
@model IEnumerable<TodoList.Models.TodoItem> <h3> PVC Named Priority Component View</h3> <h5>@ViewBag.PriorityMessage</h5> <ul> @foreach (var todo in Model) { <li>@todo.Title</li> }</ul>
最后,需要更新 Views\Todo\Index.cshtml文件:
刷新頁面查看更改效果。
在MVC6中,更改controller(或其他任何代碼)時,不需要重新編譯或重新運行應用,僅需要保存代碼并且刷新頁面即可。
以上即為今天希望和大家分享的view components知識,下一篇文章我們將介紹以下兩部分內容:
向視圖中添加服務方法。
發布應用到公有云方法。
敬請期待。
原文鏈接:http://www.asp.net/vnext/overview/aspnet-vnext/vc
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
標題名稱:ASP.NET5系列教程(三):viewcomponents介紹-創新互聯
轉載來于:http://vcdvsql.cn/article36/djhesg.html
成都網站建設公司_創新互聯,為您提供自適應網站、網站維護、網站改版、網站導航、品牌網站建設、手機網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯