Asp.net vNext 學習之路（二）

   View component(視圖組件)應該是MVC6 新加的一個東西，類似於分部視圖。本文將演示在mvc 6中 怎么添加視圖組件以及怎么在視圖中注入一個服務。

 本文包括以下內容：

1，創建一個新的asp.net vNext 項目。

2，安裝 KVM（K version manager）。

3，如何運行EF 數據庫遷移。

4，什么是 view component。

5，如何在 mvc 6 中添加一個view component 。

6，如何在view 中注入一個服務。

一 創建一個新的asp.net vNext 項目

 打開vs 2015 。 File>New >Project>Templates>C#>Web>Asp.Net Application 點擊OK。然后選擇 New ASP.NET Project ：

 

由於是演示我就在Home的文件下新建一個視圖Test.cshtml 相應的HomeController 添加如下代碼:

   public IActionResult Test()
   {
       return View();
    }

在Models 文件夾里新建一個TestModel類：

   public class TestModel
    {
        public int ID { get; set; }

        public string Title { get; set; }
    }

然后在 Models\IdentityModels.cs 文件的 ApplicationDbContext類中添加一句代碼：

 public DbSet<TestModel> TestItems { get; set; } 

表示我們加了一張表在數據庫中。但是現在運行肯定會報錯，我們需要安裝KVM。

二 安裝 KVM（K version manager）

 首先在管理員權限下運行cmd。然后把下面這句代碼拷進去。

 @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/master/kvminstall.ps1'))" 

 如果成功的話說明KVM安裝成功了。

然后重新打開一個cmd 。輸入 KVM upgrade  成功之后我們就可以做EF的遷移了。

 三 如何運行EF 數據庫遷移

 首先打開cmd 然后我們需要進入項目的當前目錄：接下來運行  k ef migration add initial  k ef migration applay

 

ok 這樣 ef 就遷移好了，我們會發現項目中多了一些東西

 

然后我們需要在Startup.cs 中的 Configure 方法中 添加如下代碼：

    app.UseServices(service =>
            {
                service.AddEntityFramework()
                          .AddSqlServer()
                          .AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(
                              Configuration.Get("Data:DefaultConnection:ConnectionString")));
            });

在HomeController 中部分代碼：

   ApplicationDbContext context = new ApplicationDbContext();

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Test()
        {
            context.Add(new TestModel() { Title = "test1" });


            context.SaveChanges();

            List<TestModel> list = context.Set<TestModel>().ToList();

            return View(list);
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);

            context.Dispose();
        }

Test.cshtml 文件代碼：

@model List<WebApplication3.Models.TestModel>

@{
    ViewBag.Title = "Test";

}
<table class="table  table-hover table-bordered  table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@item.ID</td>
            <td>@item.Title</td>
        </tr>
        }

    </tbody>
</table>

Ok 運行一下項目效果如下：

四 什么是 view component

    作為Mvc6 新添加的東西和之前的partial view 還是比較類似的。但是要比partial view 更加的靈活和強大。和controller 和 view的關系一樣是關注點分離的， component 相當於是一個mini的controller 

它是去響應局部的模塊而非是完整的。我們可以用view component 來解決更加復雜的頁面上的問題。它有兩部分組成 一個后台類和前台的Razor view （可以回掉后台類的方法）。 

五 如何在 mvc 6 中添加一個view component 

  首先我在項目中新建一個ViewComponents的文件夾（這個文件夾名字可以隨意命名），然后文件夾里新建一個 TestViewComponent 類 ：

 public class TestViewComponent : ViewComponent
    {
        ApplicationDbContext context;


        public TestViewComponent(ApplicationDbContext context)
        {
            this.context = context;
        }

        public IViewComponentResult Invoke(int max)
        {
            var item = context.Set<TestModel>().Where(p => p.ID > max).ToList();

            return View(item);
        }

    }

然后我們需要添加一個 component  view 。在 Home文件夾新建Components（必須這樣命名）文件夾然后 里面新建一個文件夾 Test（這個名字是和之前的那個TestComponent 相匹配的）

Test 文件夾里新建 一個視圖，隨意命名 default.cshtml  

@model List<WebApplication3.Models.TestModel>
@{
    // ViewBag.Title = "Home Page";
}

<h3>Priority Items</h3>
<ul>
    @foreach (var item in Model)
    {
        <li>@item.ID ----- @item.Title</li>
    }
</ul>

 那么我們就可以去調這個view component了 在Test.cshtml

@model List<WebApplication3.Models.TestModel>

@{
    ViewBag.Title = "Test";

}
<table class="table  table-hover table-bordered  table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@item.ID</td>
            <td>@item.Title</td>
        </tr>
        }

    </tbody>
</table>

<div class="row">
    @Component.Invoke("Test", 2);
</div>

Ok  看一下效果 ：

 

那個view components 的意思是所有ID>2的列表。

六 如何在view 中注入一個服務 
 首先新建一個StaticService 類

 

 public class StatisticsService
    {
        private ApplicationDbContext db;

        public StatisticsService(ApplicationDbContext db)
        {
            this.db = db;
        }


        public int GetCount()
        {
            return db.TestItems.Count();
        }

    }

然后Test.cshtml 代碼：

@model List<WebApplication3.Models.TestModel>
@inject WebApplication3.Models.StatisticsService service
<table class="table  table-hover table-bordered  table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@item.ID</td>
            <td>@item.Title</td>
        </tr>
        }

    </tbody>
</table>

<div class="row">
    @Component.Invoke("Test", 2);
</div>

<h1>
   Total: @service.GetCount()  
</h1>

在 startup.cs 中注冊該類：

    public void ConfigureServices(IServiceCollection services)
        {
            // Add EF services to the services container.
            services.AddEntityFramework(Configuration)
                .AddSqlServer()
                .AddDbContext<ApplicationDbContext>();

            // Add Identity services to the services container.
            services.AddDefaultIdentity<ApplicationDbContext, ApplicationUser, IdentityRole>(Configuration);

            // Add MVC services to the services container.
            services.AddMvc();

            services.AddTransient<StatisticsService>();
            // Uncomment the following line to add Web API servcies which makes it easier to port Web API 2 controllers.
            // You need to add Microsoft.AspNet.Mvc.WebApiCompatShim package to project.json
            // services.AddWebApiConventions();

        }

運行 看效果：

 

 

七 總結

 Mvc 6 還是加了不少的東西的，不過只會讓以后的開發會原來越簡單。