Creating an empty ASP.NET project

Because Visual Studio Code is folder-based and not project-based like Visual Studio, it does not have a File | New Project option in its list of menus.

Scaffolding a project using Yeoman

Instead, you'll use Yeoman to scaffold a basic empty ASP.NET project. If you do not already have npm installed, complete the following steps:

  1. Open a new command prompt and navigate to the folder where you would like to create your project, for example, C:MyBootstrap4Site.
  2. Enter the following command in the command prompt in order to install Yeoman and supporting tools:
            npm install -g yo grunt-cli generator-aspnet bower

    After Yeoman and supporting tools have been installed, follow these steps:

  3. Enter the following command and press Enter to start the Yeoman ASP.NET generator:
            yo aspnet
  4. Select Empty Application from the list of applications and press Enter:
    Scaffolding a project using Yeoman
  5. When prompted for the name of your ASP.NET application, type Bootstrap4Site and press Enter.
  6. Yeoman will scaffold your project and when finished display a message. Next, restore any packages for your project by entering the following command in the command prompt and press the Enter key:
            dnu restore
  7. Keep the current command prompt open and start Visual Studio Code.
  8. Select Open Folder... from the File menu inside Visual Studio Code and select the C:MyBootstrap4Site folder.
  9. The project folder and files will be displayed inside the Visual Studio Code explorer.

    Tip

    If you receive an error stating that dnu is not recognized, run the following command: dnvm upgrade.

Enabling ASP.NET MVC and static files

Currently, the project is simply an empty ASP.NET project that will only show a Hello World message when run. You'll need to enable your project and MVC to serve static files by completing the following tasks:

  1. Open the project.json file and change the dependencies and tools array to the following:
            "dependencies": { 
            "Microsoft.NETCore.App": { 
              "version": "1.0.0", 
              "type": "platform" 
            }, 
            "Microsoft.AspNetCore.Diagnostics": "1.0.0", 
            "Microsoft.AspNetCore.Mvc": "1.0.0", 
            "Microsoft.AspNetCore.Razor.Tools": { 
              "version": "1.0.0-preview2-final", 
              "type": "build" 
            }, 
            "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0", 
            "Microsoft.AspNetCore.Server.Kestrel": "1.0.0", 
            "Microsoft.AspNetCore.StaticFiles": "1.0.0", 
            "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0", 
            "Microsoft.Extensions.Configuration.Json": "1.0.0", 
            "Microsoft.Extensions.Configuration.CommandLine": "1.0.0", 
            "Microsoft.Extensions.Logging": "1.0.0", 
            "Microsoft.Extensions.Logging.Console": "1.0.0", 
            "Microsoft.Extensions.Logging.Debug": "1.0.0", 
            "Microsoft.Extensions.Options.ConfigurationExtensions": "1.0.0", 
            "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0"     
          }, 
 
          "tools": { 
            "BundlerMinifier.Core": "2.0.238", 
            "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final", 
            "Microsoft.AspNetCore.Server.IISIntegration.Tools": 
             "1.0.0-preview2-final" 
          }
  2. Next, in order to restore the dependencies, switch back to the command prompt and enter the following command followed by the Enter key:
                  dotnet restore
  3. After the dependencies have been restored, switch back to Visual Studio Code and change the ConfigureServices method in the Startup.cs class file to the following, in order to enable MVC:
            public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddMvc(); 
        }
  4. Enable the serving of static files such as images, style sheets, and JavaScript files. Also, set the default route by changing the Configure method in the Startup.cs class file to the following:
            public void Configure(IApplicationBuilder app) 
        { 
            app.UseStaticFiles(); 
 
            app.UseMvc(routes => 
            { 
                 routes.MapRoute( 
                       name: "default", 
                       template: "{controller=Home}/{action=Index}/{id?}"); 
            }); 
        }

Adding a default route controller and view

Since an empty project was created, no default controller or view would have been created by default. You've already configured a default route in the previous steps and in order for it to work you'll need to add a Home controller and an Index view:

  1. Hover over the folder name inside the Visual Studio Code explorer and click on the New Folder icon.
  2. Name the new folder Controllers and add another folder called Views.
  3. Create two more folders called Home and Shared inside the newly created Views folder.
  4. Next, right-click on the Controllers folder and select New File from the context menu. Name the file HomeController.cs.
  5. Add the following code, which will create a default Index method for the controller, to the HomeController.cs file:
            using Microsoft.AspNetCore.Mvc; 
        namespace BS4App.Controllers 
        { 
            public class HomeController : Controller 
            { 
                public IActionResult Index() 
                { 
                    return View(); 
                } 
            } 
        }
  6. Add a new file called Index.cshtml to the ViewsHome folder and set its content to the following:
            <h1>This is my Bootstrap 4 site. </h1>
  7. Your project layout should look similar to the following inside the Visual Studio Code Explorer:
    Adding a default route controller and view
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.163.158