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 TestModel
2 {
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.json
17 // services.AddWebApiConventions();
18
19 }

运行 看效果:

七 总结

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

Asp.net vNext 2的更多相关文章

  1. POCO Controller 你这么厉害,ASP.NET vNext 知道吗?

    写在前面 阅读目录: POCO 是什么? 为什么会有 POJO? POJO 的意义 POJO 与 PO.VO 的区别 POJO 的扩展 POCO VS DTO Controller 是什么? 关于 P ...

  2. 兼容Mono的下一代云环境Web开发框架ASP.NET vNext

    微软在2014年5月12日的TechEd大会上宣布将会发布下一代ASP.NET框架ASP.NET vNext的预览.此次发布的ASP.NET框架与以前相比发生了根本性的变化,凸显了微软“云优先”(cl ...

  3. 在Linux上运行ASP.NET vNext

    最新的ASP.NET vNext完全开源且可以跨多个平台运行,在Windows环境下我尝试了下,几乎没花什么工夫就跑起了Sample,而在Linux环境下则要多花了不少时间,所以特别记录下整个过程,希 ...

  4. 让 ASP.NET vNext 在 Mac OS 中飞呀飞。。。

    写在前面 阅读目录: 娓娓道来 Install ASP.NET vNext Command Line Tools 安装 Homebrew 使用 Homebrew,安装 KVM Install Subl ...

  5. Mac OS X上编写 ASP.NET vNext(一)KRE环境搭建

    最新的asp.net vnext已经可以支持在mac上运行了,当然用的是mono.相比linux来说,mac的安装略显繁琐.对于大部分用Windows开发asp.net的程序员来说,初次配置还是很费时 ...

  6. 分享我对 ASP.NET vNext 的一些感受,也许多年回过头看 So Easy!

    写在前面 阅读目录: Visual Studio "14" CTP 关于 ASP.NET vNext ASP.NET vNext 实践 后记 ASP.NET vNext 发布已经过 ...

  7. 开发 ASP.NET vNext 续篇:云优化的概念、Entity Framework 7.0、简单吞吐量压力测试

    继续上一篇<开发 ASP.NET vNext 初步总结(使用Visual Studio 2014 CTP1)>之后, 关于云优化和版本控制: 我本想做一下MAC和LINUX的self-ho ...

  8. 开发 ASP.NET vNext 初步总结(使用Visual Studio 14 CTP1)

    新特性: vNext又称MVC 6.0,不再需要依赖System.Web,占用的内存大大减少(从前无论是多么简单的一个请求,System.Web本身就要占用31KB内存). 可以self-host模式 ...

  9. ASP.NET vNext 概述

    兼容Mono的下一代云环境Web开发框架ASP.NET vNext 我们知道了ASP.NET vNext是一个全新的框架,是一个与时俱进的框架.这篇文章将深入讨论在整体架构更多的细节,文档参照 ASP ...

  10. [译]Introducing ASP.NET vNext and MVC 6

    原文:http://www.infoq.com/news/2014/05/ASP.NET-vNext?utm_source=tuicool Part of the ASP.NET vNext init ...

随机推荐

  1. Java String类的比较运算

    面试题:(多选)以下返回true的有() A. "beijing" == "beijing" B. "beijing".equals(new ...

  2. 使用shell命令分析统计日志

    用户需要登录统计信息,当分析用户行为,使用shell通常可以很容易地取出了大量的数据.删除,然后放入excel统计. 例如:统计日志含有loadCustomProcess这个地址的訪问,按訪问耗时排序 ...

  3. Java IO的RandomAccessFile的使用(转)

    现有如下的一个需求,向已存在1G数据的txt文本里末尾追加一行文字,内容如下“Lucene是一款非常优秀的全文检索库”.可能大多数朋友会觉得这个需求很easy,说实话,确实easy,然后XXX君开始实 ...

  4. quick-cocos2d-x教程8:程序框架内lib文件夹分析

    lib文件夹是如今全部文件夹中最复杂的,包括了整个运行所需的库文件.我们简单看下,在开发初期,不须要深入到这个库里去研究 cocos2d-x 文件夹就是c++版的原始文件 framework_prec ...

  5. 答读者问(5):关于数学程序猿的作用、r \\ u0026研发工作的实践要求和问题,如求职的影响

    最近,有通过微博很多读者.微信沟通,我.我觉得我们学习.对于技术,我们很热情.我也学到了很多东西. 我提取了几个大家比較关心的问题予以答复.请有相同疑问的朋友參考一下. ,欢迎关注.) 版权声明:本文 ...

  6. ssis 到别的表查找临时变量值

    原文:ssis 到别的表查找临时变量值 etl过程过,往一个数据库表插入数据,插入的值往往需要到另外一个数据库读取.例如下面的客户跟踪,需要一个"项目ID",这个ID需要到另一个数 ...

  7. matlab练习程序(PCA<SVD>)

    clear all;close all;clc;img1=imread('Corner.png');img2=imread('Corner1.png');img3=imread('Corner2.pn ...

  8. Qt原始资源形象问题后删除

        这些天Qt请项目超市收银系统,作为练一练手,无论如何,亦休闲亦无关,做几乎同样的.旨在取代以前的资源图片, 是什么改变了,码里面的路径都改了.还是编译只是去,总是提示这样一个错误. <s ...

  9. linux 终端下敲ctrl-c时,到底发生了什么?(转)

    通过telnet登录到单板,然后按ctrl-c会发生什么情况,流程是怎么样的? 在分析之前,先介绍tty的相关知识.我们可以认为,所有跟输入输出相关的操作,最终都由tty来接管.举例来说,当我们敲 l ...

  10. Hbase在的应用经验的统计

    1. 需求统计 互联网上对于数据的统计,一个重要的应用就是对站点站点数据的统计,比如CNZZ站长统计.百度统计.Google Analytics.量子恒道统计等等. 站点站点统计工具无外乎有下面一些功 ...