首页 > 代码库 > Asp.net vNext 学习之路(二)

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 添加如下代码:

1    public IActionResult Test()2    {3        return View();5     }

在Models 文件夹里新建一个TestModel类:

1    public class TestModel2     {3         public int ID { get; set; }4 5         public string Title { get; set; }6     }

然后在 Models\IdentityModels.cs 文件的 ApplicationDbContext类中添加一句代码:

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

表示我们加了一张表在数据库中。但是现在运行肯定会报错,我们需要安装KVM。

二 安装 KVM(K version manager)

 首先在管理员权限下运行cmd。然后把下面这句代码拷进去。

 1 @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 方法中 添加如下代码:

1     app.UseServices(service =>2             {3                 service.AddEntityFramework()4                           .AddSqlServer()5                           .AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(6                               Configuration.Get("Data:DefaultConnection:ConnectionString")));7             });

在HomeController 中部分代码:

 1    ApplicationDbContext context = new ApplicationDbContext(); 2  3         public IActionResult Index() 4         { 5             return View(); 6         } 7  8         public IActionResult Test() 9         {10             context.Add(new TestModel() { Title = "test1" });11 12 13             context.SaveChanges();14 15             List<TestModel> list = context.Set<TestModel>().ToList();16 17             return View(list);18         }19 20         protected override void Dispose(bool disposing)21         {22             base.Dispose(disposing);23 24             context.Dispose();25         }

Test.cshtml 文件代码:

 1 @model List<WebApplication3.Models.TestModel> 2  3 @{ 4     ViewBag.Title = "Test"; 5  6 } 7 <table class="table  table-hover table-bordered  table-condensed"> 8     <thead> 9         <tr>10             <th>ID</th>11             <th>Title</th>12         </tr>13     </thead>14     <tbody>15         @foreach (var item in Model)16         {17         <tr>18             <td>@item.ID</td>19             <td>@item.Title</td>20         </tr>21         }22 23     </tbody>24 </table>

Ok 运行一下项目效果如下:

技术分享

四 什么是 view component

    作为Mvc6 新添加的东西和之前的partial view 还是比较类似的。但是要比partial view 更加的灵活和强大。和controller 和 view的关系一样是关注点分离的, component 相当于是一个mini的controller 

它是去响应局部的模块而非是完整的。我们可以用view component 来解决更加复杂的页面上的问题。它有两部分组成 一个后台类和前台的Razor view (可以回掉后台类的方法)。 

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

  首先我在项目中新建一个ViewComponents的文件夹(这个文件夹名字可以随意命名),然后文件夹里新建一个 TestViewComponent 类 :

 1  public class TestViewComponent : ViewComponent 2     { 3         ApplicationDbContext context; 4  5  6         public TestViewComponent(ApplicationDbContext context) 7         { 8             this.context = context; 9         }10 11         public IViewComponentResult Invoke(int max)12         {13             var item = context.Set<TestModel>().Where(p => p.ID > max).ToList();14 15             return View(item);16         }17 18     }

然后我们需要添加一个 component  view 。在 Home文件夹新建Components(必须这样命名)文件夹然后 里面新建一个文件夹 Test(这个名字是和之前的那个TestComponent 相匹配的)

Test 文件夹里新建 一个视图,随意命名 default.cshtml  

 1 @model List<WebApplication3.Models.TestModel> 2 @{ 3     // ViewBag.Title = "Home Page"; 4 } 5  6 <h3>Priority Items</h3> 7 <ul> 8     @foreach (var item in Model) 9     {10         <li>@item.ID ----- @item.Title</li>11     }12 </ul>

 那么我们就可以去调这个view component了 在Test.cshtml

 1 @model List<WebApplication3.Models.TestModel> 2  3 @{ 4     ViewBag.Title = "Test"; 5  6 } 7 <table class="table  table-hover table-bordered  table-condensed"> 8     <thead> 9         <tr>10             <th>ID</th>11             <th>Title</th>12         </tr>13     </thead>14     <tbody>15         @foreach (var item in Model)16         {17         <tr>18             <td>@item.ID</td>19             <td>@item.Title</td>20         </tr>21         }22 23     </tbody>24 </table>25 26 <div class="row">27     @Component.Invoke("Test", 2);28 </div>

Ok  看一下效果 :

技术分享

 

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

六 如何在view 中注入一个服务 
 首先新建一个StaticService 类

 

 1  public class StatisticsService 2     { 3         private ApplicationDbContext db; 4  5         public StatisticsService(ApplicationDbContext db) 6         { 7             this.db = db; 8         } 9 10 11         public int GetCount()12         {13             return db.TestItems.Count();14         }15 16     }

然后Test.cshtml 代码:

 1 @model List<WebApplication3.Models.TestModel> 2 @inject WebApplication3.Models.StatisticsService service 3 <table class="table  table-hover table-bordered  table-condensed"> 4     <thead> 5         <tr> 6             <th>ID</th> 7             <th>Title</th> 8         </tr> 9     </thead>10     <tbody>11         @foreach (var item in Model)12         {13         <tr>14             <td>@item.ID</td>15             <td>@item.Title</td>16         </tr>17         }18 19     </tbody>20 </table>21 22 <div class="row">23     @Component.Invoke("Test", 2);24 </div>25 26 <h1>27    Total: @service.GetCount()  28 </h1>

在 startup.cs 中注册该类:

 1     public void ConfigureServices(IServiceCollection services) 2         { 3             // Add EF services to the services container. 4             services.AddEntityFramework(Configuration) 5                 .AddSqlServer() 6                 .AddDbContext<ApplicationDbContext>(); 7  8             // Add Identity services to the services container. 9             services.AddDefaultIdentity<ApplicationDbContext, ApplicationUser, IdentityRole>(Configuration);10 11             // Add MVC services to the services container.12             services.AddMvc();13 14             services.AddTransient<StatisticsService>();15             // Uncomment the following line to add Web API servcies which makes it easier to port Web API 2 controllers.16             // You need to add Microsoft.AspNet.Mvc.WebApiCompatShim package to project.json17             // services.AddWebApiConventions();18 19         }

运行 看效果:

 技术分享

 

七 总结

 Mvc 6 还是加了不少的东西的,不过只会让以后的开发会原来越简单。

Asp.net vNext 学习之路(二)