ASP.NET5系列教程(三)：viewcomponents介紹-創(chuàng)新互聯(lián)

在ASP.NET MVC 6中，view components (VCs) 功能類似于虛擬視圖，但是功能更加強(qiáng)大。 VCs兼顧了視圖和控制器的優(yōu)點(diǎn)，你可以把VCs 看作一個(gè)Mini 控制器。它負(fù)責(zé)控制應(yīng)用中的某一功能模塊，例如：

成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營(yíng)銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對(duì)待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

動(dòng)態(tài)導(dǎo)航菜單
標(biāo)簽云
登錄面板
購(gòu)物車
最近文章
博客側(cè)邊欄

假如使用VC 創(chuàng)建了登錄面板，可以在很多場(chǎng)景中調(diào)用，例如：

用戶沒(méi)有登錄
用戶已登錄，需要退出使用其他帳號(hào)登錄或者管理其他帳號(hào)。
如果當(dāng)前登錄角色為管理員，渲染管理員登錄面板

你可以根據(jù)用戶的需求獲取數(shù)據(jù)進(jìn)行渲染。添加VC到需要該視圖控件的頁(yè)面。

VC 包含兩部分，類 (一般繼承于ViewComponent) 和調(diào)用VC類中方法的Razor 視圖。類似于ASP.NET 控制器, VC 可以作為POCO使用，但是更多用戶傾向于使用從 VewComponent中繼承而來(lái)的方法和屬性。

VC的創(chuàng)建方式有:

繼承ViewComponent.
擁有 [ViewComponent] 屬性，或者從擁有 [ViewComponent]屬性派生的類。
創(chuàng)建名稱已ViewComponent為后綴的類。

和controllers相同，VCs 必須是公開(kāi)、非嵌套和非抽象的類。

添加view component 類

1. 創(chuàng)建名為ViewComponents的文件夾，View component 類可以包含在工程中的任何文件夾下。

2. 在ViewComponents 文件夾下創(chuàng)建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);
    }
  }
}

代碼注釋：

· 因?yàn)镻riorityListViewComponent 類繼承于ViewComponent，運(yùn)行時(shí)將通過(guò)字符串"PriorityList" 從View中引用該類。在后續(xù)章節(jié)將會(huì)進(jìn)行詳細(xì)闡述。

· [ViewComponent] 屬性用于設(shè)置引用VC的別名，例如，創(chuàng)建名稱為XYZ的類，我們可以通過(guò)以下代碼設(shè)置其引用別名:

[ViewComponent(Name = "PriorityList")]public class XYZ : ViewComponent

· 組件使用構(gòu)造注入器使數(shù)據(jù)內(nèi)容生效，類似于 Todo 控制器的功能。

· 調(diào)用View中的公開(kāi)方法，可以傳遞任意數(shù)量的參數(shù)。在異步版本中， InvokeAsync是可用的。在后續(xù)章節(jié)中我們將提及InvokeAsync 和多參數(shù)的使用方法。在之前的代碼中，公開(kāi)方法的返回值為×××事項(xiàng)（ToDoItems），優(yōu)先級(jí)不低于maxPriority。

添加視圖控件

1. 在Views\Todo 文件夾下創(chuàng)建Components文件夾，注意這個(gè)文件夾需要命名為Components。

2. 在Views\Todo\Components文件夾下創(chuàng)建PriorityList 文件夾。文件夾名稱必須和view component 類名稱一致?；蛘哳惷コ缶Y名稱(如果在創(chuàng)建類時(shí)遵循慣例使用ViewComponent 作為后綴)。如果使用了ViewComponent屬性。

3. 在Views\Todo\Components\PriorityList 文件夾下創(chuàng)建Default.cshtml Razor 視圖，添加以下標(biāo)記：

@model IEnumerable<TodoList.Models.TodoItem>

<h4>Priority Items</h4>
<ul>
    @foreach (var todo in Model)
    {        <li>@todo.Title</li>
    }</ul>

Razor 視圖包含并且顯示了 TodoItems。如果 VC 調(diào)用方法沒(méi)有傳遞視圖的名稱 (如例子中所示)，那么默認(rèn)情況下則調(diào)用視圖名稱對(duì)于方法。在后續(xù)的文章中，將闡述如何傳遞視圖名稱。

在views\todo\index.cshtml 視圖底部添加包含有調(diào)用PriorityListViewComponent的div：

@model IEnumerable<TodoList.Models.TodoItem>

<h4>Priority Items</h4>
<ul>
    @foreach (var todo in Model)
    {        <li>@todo.Title</li>
    }</ul>

標(biāo)記 @await Component.InvokeAsync() 表示該語(yǔ)法用于調(diào)用VC。第一個(gè)參數(shù)是我們要調(diào)用的組件名稱。其余參數(shù)參數(shù)傳遞給該VC。在這個(gè)例子中，我們傳遞“1”作為過(guò)濾的優(yōu)先級(jí)。InvokeAsync 方法可以包含任意數(shù)量的參數(shù)。

以下圖片顯示了優(yōu)先級(jí)列表：

@{
  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>

ASP.NET 5系列教程 (三)：view components介紹

注意： VC通常被添加到 Views\Shared 文件夾下，因?yàn)樗⒉粌H僅是controller。

添加InvokeAsync 到優(yōu)先級(jí)組件

通過(guò)以下代碼更新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 方法，使用更加強(qiáng)大的asynchronous方法替代。

修改 VC 視圖顯示優(yōu)先級(jí)信息：

@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視圖的修改效果：

ASP.NET 5系列教程 (三)：view components介紹

指定視圖名稱

一些復(fù)雜的VC在某些情況下也許需要去指定特定的視圖，以下代碼是通過(guò)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視圖控件來(lái)驗(yàn)證它的使用：

@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文件：

刷新頁(yè)面查看更改效果。

在MVC6中，更改controller（或其他任何代碼）時(shí)，不需要重新編譯或重新運(yùn)行應(yīng)用，僅需要保存代碼并且刷新頁(yè)面即可。

以上即為今天希望和大家分享的view components知識(shí)，下一篇文章我們將介紹以下兩部分內(nèi)容：

向視圖中添加服務(wù)方法。
發(fā)布應(yīng)用到公有云方法。

敬請(qǐng)期待。

原文鏈接：http://www.asp.net/vnext/overview/aspnet-vnext/vc

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：ASP.NET5系列教程(三)：viewcomponents介紹-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://muchs.cn/article36/djhesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站改版、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容