ASP.NET Core MVC 2.0 Cookbook
上QQ阅读APP看书,第一时间看更新

How to do it...

  1. To install Yeoman, enter the following command:
npm install -g yo
  1. Let's go to the Yeoman generators web page (http://yeoman.io/generators/) to see all the available generators:
  1. Let's install a Yeoman project template by choosing a scaffolding project for ASP.NET Core:
npm install -g generator-aspnet
  1. To install a Yeoman generator, enter the following:
npm install -g generator-[NameOfTheGenerator] 
  1. Launch Yeoman by entering the following:
yo
  1. Choose Install a generator:
  1. When Yeoman offers to find a generator for us, type aspnet. Yeoman should propose a list of generators corresponding to the research.
  1. We can choose the one that we want to use by moving the cursor. In our case, the first one is Yeoman generator for ASP.NET 5:
  1. Yeoman will install the ASP.NET 5 generator:
  1. Now we can see the installed generator within the list of generators:
  1. Let's create a folder where our application will be saved:
mkdir AspnetYeomanWebapp

cd AspnetYeomanWebapp
  1. Let's launch VS Code in the folder that we just created by typing the following:
code .
  1. Let's also create an ASP.NET 5 project template with Yeoman by entering the following:
yo aspnet

The output of the preceding code is as follows:

  1. Now let's select Web Application.
  1. Yeoman will ask us a name for the new application that will be generated. We can see all the files, generated for us:
  1. We can see also the bower.json that is generated, listing all, the frontend dependencies in our project:
  1. We can also see the Gulpfile.js generated and all the tasks that are automatically generated in this project template:
  1. Now we restore the missing assemblies and build the generated application:
dnu restore
  1. Let's run the application:
dnx web

This command line will execute the command specified in project.json that corresponds to web in the commands section. This command will launch the Kestrel web server:

  1. We can now see our application launched on http://localhost:5000:
  1. Let's type Ctrl + C to close the Kestrel web server.
  2. Let's see all the available subgenerators integrated into the current generator we just created by typing the following:
yo aspnet -help

Among all the given generators, we can see Angular, CoffeeScript, JavaScript, TypeScript, and CSS files. We can also see MvcController, MvcViews, Nuget packages, and many others:

  1. To use a subgenerator to add an MVC controller to the project, we type one of the commands we saw previously, corresponding to an MVC controller creation, thanks to the yo aspnet:MvcController command, followed by the name we want for the MVC controller:
yo aspnet:MvcController ProductController

As we can see, a new MVC controller named ProductController has just been added to the Controller folder, with no need to be placed into the specific folder with the cd command:

To see all the available options for a subgenerator, we can type the command line that corresponds to the subgenerator, followed by --help.
  1. To use a subgenerator to add an MVC view to the project, we create an MVC view using another subgenerator by typing yo aspnet:MvcView, followed by the name of the view (we know the view name has to be the same as the controller in ASP.NET MVC by convention), after it is placed in the Views folder by the cd Views command.
  2. Let's create the specific Views subfolder corresponding to the controller that does not exist yet:
mkdir Product
  1. Let's place it into the folder we've just created:
cd Product
  1. Now we use the MvcView subgenerator to create a view named Index:
yo aspnet:MvcView Index

The view has just been created in the Product folder.

  1. Let's add some HTML code to this view:
  1. Now let's add a link to the Layout.cshtml page to access the view we just created:
  1. Now we save this file and go back to the root of the application to rerun the web server and refresh the website homepage:
cd ../..

dnx web
  1. Let's click on this link to see the newly generated view, created by the Yeoman subgenerator.

We can see the new link named Product listed as the second item in the menu: