Asp.net vNext learning path (2)

Asp.net vNext learning path (2)
View component (View component) should be a newly added item of MVC6, similar to the branch View. This article demonstrates how to add a view component in mvc 6 and how to inject a service into the view. This article includes the following content: 1. Create a New asp.net vNext project. 2. Install KVM (K version manager ). 3. How to Run EF database migration. 4. What is view component. 5. How to add a view component in mvc 6. 6. How to inject a service into the view. 1. Create a New asp.net vNext project to open vs 2015. File> New> Project> Templates> C #> Web> Asp. Net Application click OK. Then select New ASP. NET Project: As a demo, I created a new view named Test in the Home file. add the following code to the corresponding HomeController of cshtml: 1 public IActionResult Test () 2 {3 return View (); 5} create a new TestModel class in the Models Folder: 1 public class TestModel2 {3 public int ID {get; set;} 4 5 public string Title {get; set;} 6} Then in Models \ IdentityModels. add the following code to the ApplicationDbContext class of the cs file: 1 public DbSet <TestModel> TestItems {get; set;} indicates that a table is added to the database. However, an error will be reported when running the command. We need to install KVM. 2. Install KVM (K version manager) and run cmd with the administrator privilege. Copy the following code. 1 @ powershell-NoProfile-ExecutionPolicy unrestricted-Command "iex (new-object net. webclient). DownloadString (' https://raw.githubusercontent.com/aspnet/Home/master/kvminstall.ps1 ') "If the installation is successful, the KVM installation is successful. Then open a new cmd. After entering KVM upgrade, we can perform EF migration. 3. How to Run EF database migration first open cmd and then we need to enter the current directory of the project: Then run k ef migration add initial k ef migration applay OK so that ef can be migrated, we will find that there are more things in the project and then we need to start up. add the following code to the Configure method in cs: 1 app. useServices (service => 2 {3 service. addEntityFramework () 4. addSqlServer () 5. addDbContext <ApplicationDbContext> (options => options. useSqlServer (6 Configuration. get ("Data: DefaultConnection: ConnectionString"); 7}); In HomeControlle Part of the Code in r: 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 bas E. dispose (disposing); 23 24 context. dispose (); 25} Test. cshtml file code: 1 @ model List <WebApplication3.Models. testModel> 2 3 @ {4 ViewBag. title = "Test "; 5 6} 7 <table class = "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> 4. What is view component, which is newly added as Mvc6, is similar to the previous partial view. But it is more flexible and powerful than partial view. Like the relationship between controller and view, the focus is separated. component is equivalent to a mini controller, which responds to partial modules rather than complete modules. We can use view component to solve more complex page problems. It consists of two parts: the background class and the Razor view on the foreground (you can return the background class method ). 5. How to add a view component in mvc 6 first, I will create a new ViewComponents folder in the project (the folder name can be arbitrarily named), and then create a new TestViewComponent class in the folder: 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> m Ax). ToList (); 14 15 return View (item); 16} 17 18} then we need to add a component view. Create a new Components folder in the Home folder (which must be named like this) and create a new view in the Test folder (which matches the previous TestComponent, name default at will. cshtml 1 @ model List <WebApplication3.Models. testModel> 2 @ {3 // ViewBag. title = "Home Page"; 4} 5 6