Pagina's

donderdag 31 augustus 2017

Asp.net core 2.0 MVC from stratch in VS Code


Today I'm going to talk about asp.net core 2.0 in VS Code, we will start from scratch and implement MVC. VS Code is really a good tool for software development, it runs pretty smooth and is easy to use. Compared to Visual Studio it’s a lightweight tool.

VS Code supports extensions which allow you to add new features and improve your development setup. Extensions in VS Code make it possible to develop in your favorite technology!(if there is an extension available on the marketplace)

Setup

How do you develop .net core apps in vs code?
It's easy, I will show you !

First of all install VS Code on your computer
https://code.visualstudio.com/

Then install .net core 2.0 sdk
Go to :https://www.microsoft.com/net/core
Hit the download button and install

Check if .net core 2.0 is installed:

  1. Open cmd 
  2. Type dotnet -h 
  3. You will see the help output of the .net core 


Next download the c# extensions in vs code

  1. Open Visual Studio Code 
  2. Go to the extensions 
  3. Search for “C# for Visual Studio Code” 
  4. Install “C# for Visual Studio Code” 



Optional: 
you can download the “visual studio” keymap(if you like to use the shortcuts of visual studio).

Create a .net core app from scratch

We're going to create an empty asp.net core web app and start from scratch.

It’s better to learn something from scratch because you learn the fundamentals of a technology and you have a better understanding of the code and the architecture.

Create a project

Open your command prompt or open VS Code and go to the integrated terminal(which is a command prompt).
Create a folder for your project.

Type in CMD:

  1. C: 
  2. mkdir myapp 
  3. cd myapp 
  4. dotnet new web 
.net core will now install a empty web project.
Open the project in VS Code:
  1. In VS Code go to “file” and click on “open folder” and select the myapp folder.






Click on “start debugging” in the menu tab and the application will start immediately (a new browser tab will open) ,or type in CMD: dotnet run. (make sure you’re in your project folder) Copy the address where the application is running on.


The web app starts.


We have an empty web project, it doesn’t do much at the moment...

MVC in asp.net core

Time for MVC ! We have to configure MVC in order to use it. We're going to add the MVC service in the configure service method.

Open the startup.cs file. It will look like this


Remember the first time we started this app? The text “hello world!” was displayed. That’s because when the app runs you will do a http request to the server.
This delegate handles all requests this wil send a response back with the text “Hello World!”.


Let’s continue and add the mvc service! 
Add the services.AddMvc() in the ConfigureServices in startup.cs.
public void ConfigureServices(IServiceCollection services)
{
 services.AddMvc();
}

Next add UseMvc() in the configure method and add the routing in startup.cs .

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();
    app.UseMvc(routes =>
    {
          routes.MapRoute(
          name: "default",
          template: "{controller=Home}/{action=Index}/{id?}");
     });
}

When the app starts it will search for the HomeController and the Index method.

Create a HomeController with a Index method.

  1. First create two folders and name them: "Controllers" and "Views" 
  2. Create in the folder “Views” a subfolder "Home" 
  3. Create a HomeController.cs file in the “Controllers“folder. Add an Index method that returns a ViewResult .
      public void Configure(IApplicationBuilder app, IHostingEnvironment env)
       {
           app.UseStaticFiles();
          
           app.UseMvc(routes =>
           {
               routes.MapRoute(
                   name: "default",
                   template: "{controller=Home}/{action=Index}/{id?}");
           });
       }

Create in the subfolder Views/Home an Index.cshtml file.
add a html header tag

<h1>hello world</h1>

Hit debug or use the dotnet run command



That’s it! we've succesfully configured asp.net core with MVC in VS Code.
I hope you liked it and remember one thing ….