Getting Started with ASP.NET Core MVC Apps using VS Code

by Santhakumar Munuswamy

  Posted on  02 October 2017

  ASP.NET Core


 

In this article, we will discuss how we can create a HelloWorld app with ASP.NET Core 2.0 using Visual Studio Code. We will learn how to create an ASP.NET Core MVC application, how to create new Controller, how to create new View, and how to run the HelloWorld app etc.

In this article, we will see the following.

  • How to create an ASP.Net Core MVC Application
  • How to create new Controller
  • How to create new View
  • How to run the HelloWorld App

Prerequisite 

  • ·         .NET Core 2.0 SDK
  • ·         Visual Studio Code
  • ·         VS Code C# extension 

If you want to know how to install the new Visual Studio Code in the machine, you can see the easy steps of installation of Visual Studio Code article. Read it from here –

How to create an ASP.Net Core MVC Application 

Open Visual Studio Code. Now you can open the terminal using Ctrl+` keyboard shortcut as below shown screenshot


Now, you can set the project storing location as below shown screenshot


Type mkdir SampleMVCApps and Enter on the command line.


Type cd SampleMVCApps and Enter in the command line.


Type dotnet new MVC and Enter on the command line, given below


Go to Explorer window and Open the SampleMVCApps folder in Visual Studio Code.


Select Yes to the Warn message “Required assets to build and debug are missing from “SampleMVCApps”. Add them?


Now, you can see the project folder structure as below show screenshot


Pressing the F5 button to run the application



How to create new Controller 

Go to the Explorer window in VS Code. Right Click the Controllers folder and point to New File, followed by clicking the New File.


Now, you can type in controller name as HelloWorldController.cs and press the Enter button.


Copy and paste the below code into HelloWorldController.cs

using Microsoft.AspNetCore.Mvc;

namespace SampleMVCApps.Controllers
{
    public class HelloWorldController:Controller
    {
        public IActionResult Index()
        {   
            ViewData["Message"]="Hello, This is my view";
            return View();
        }

        public IActionResult Welcome()
        {
            ViewData["Message"]="Hello, Welcome to HelloWorld Application";
            return View();
        }
    }
}


How to create new View

Go to the Explorer window in VS Code. Right Click the Views folder and point to New Folder, followed by clicking the New Folder. Then Add the new folder named HelloWorld.


Right-click the HelloWorld folder and point to New File, followed by clicking the New File.


Now, you can type in view name as Index.cshtml and press the Enter button.


Copy and paste the below code into Views/HelloWorld/Index.cshtml 

@{
    ViewData["Title"]="Index";
}

<h2>Index</h2>
<hr>

<p>@ViewData["Welcome"]</p>

Similarly, you can create a welcome view. Copy and paste the below code into Views/HelloWorld/Welcome.cshtml 

@{
    ViewData["Title"]="Welcome";
}

<h2>Welcome</h2>
<hr>

<p>@ViewData["HelloWorld"]</p>

How to run the HelloWorld App

Pressing the F5 button will run the application, as shown in the below screenshot




Conclusion

I hope you understood how to create a HelloWorld App with Asp.Net Core 2.0 using Visual Studio Code, How to create new Controller, How to create the new view and How to run the HelloWorld App. I have covered all the required things. If you found anything which I missed in this article, Please let me know. Please share your valuable feedback or comments and suggestions to improve the future articles.

 


About the Author
He is a Technical Lead, C# Corner MVP, Author and founder of the blog www.san2debug.net, has over 9+ years experience on Microsoft Technologies like C#.Net, ASP.Net, ADO.Net, MVC, WCF, Ajax, IIS, SQL Server, Windows Phone and some developmet tools. He is an actively spending his valuable time to popular .Net Community like C# Corner, Microsoft TechNet Wiki, DZone, Stackoverflow, DotNetSpark and etc.

Follow Me: Facebook, Twitter, Google Plus, LinkedIn
blog comments powered by Disqus


Month List

Community Badges