In this article I will provide a small Tutorial using a small Sample Program example on how to build your first Website in ASP.Net Core 2.0 MVC.
This article will help you understand, configure and create a very simple Website application in small Tutorial using a small Sample Program example on how to build your first Website in ASP.Net Core 2.0 MVC.
Creating a new ASP.Net MVC Core 2.1 Project
Let’s get started with creating your first ASP.Net MVC Core 2.1 Project.
1. Open Visual Studio and from Start section click on Create New Project.
![Building first Website in ASP.Net Core 2.0 MVC]()
2. From the New Project Dialog window, select ASP.Net Core Web Application option. Then you need to set a suitable Name for your project and also you can set its Location where you want to create the Project.
![Building first Website in ASP.Net Core 2.0 MVC]()
3. From the new ASP.Net Core Web Application Dialog, select Empty and click OK.
![Building first Website in ASP.Net Core 2.0 MVC]()
4. Your first Hello World ASP.Net Core Web Application Project is now ready and you should see the following folders and files in your Solution Explorer window.
![Building first Website in ASP.Net Core 2.0 MVC]()
Downloading MVC Core 2.1 Package from NuGet
This is an Empty Project and hence you will need to install the ASP.Net MVC Core 2.1 package using the following command.
Install-Package Microsoft.AspNetCore.Mvc -Version 2.1.0
![Building first Website in ASP.Net Core 2.0 MVC]()
Adding Controller to the ASP.Net MVC Core 2.1 Project
1. Inside the Solution Explorer window, Right Click on the Project and then click Add and then New Folder option from the Context Menu.
![Building first Website in ASP.Net Core 2.0 MVC]()
2. Name the newly added Folder as Controllers.
![Building first Website in ASP.Net Core 2.0 MVC]()
3. Now, inside the Solution Explorer window, Right Click on the Controllers folder and then click on Add and then Controller option of the Context Menu.
![Building first Website in ASP.Net Core 2.0 MVC]()
4. From the Add Scaffold Dialog window, select the “MVC Controller – Empty” option and click Add button.
![Building first Website in ASP.Net Core 2.0 MVC]()
5. You will now be asked to provide a suitable Name to the new Controller.
![Building first Website in ASP.Net Core 2.0 MVC]()
Once you click add, the following Controller is created. The default Action is “Index”.
![Building first Website in ASP.Net Core 2.0 MVC]()
Adding View associated with the Controller to the ASP.Net MVC Core 2.1 Project
1. Now you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.
![Building first Website in ASP.Net Core 2.0 MVC]()
2. You will need to provide a suitable Name to the View. This article does not use Layout Page and hence the “Use a layout page” CheckBox needs to be kept unchecked.
![Building first Website in ASP.Net Core 2.0 MVC]()
Once you click Add Button, the following View is created.
![Building first Website in ASP.Net Core 2.0 MVC]()
Configuring the Routes
The last important part is to configure the Routes in the Startup.cs file.
1. Open the Startup.cs class from the Solution Explorer window.
![Building first Website in ASP.Net Core 2.0 MVC]()
2. In the Startup.cs there are two methods.
ConfigureServices
Inside this method, you will have to add the following code which will instruct the program to add MVC Services.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
Configure
Inside this method, the Route is set and the names of the Controller and the Action method are specified.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
The final Startup.cs file will look as shown below.
![Building first Website in ASP.Net Core 2.0 MVC]()
Now press F5 to run the Application and you should see a blank page in browser.
![Building first Website in ASP.Net Core 2.0 MVC]()
Displaying a Message from Controller to View in ASP.Net MVC Core 2.1 Project
1. Inside the HomeController’s Index method, a ViewBag property named “Message” is set.
public class HomeController : Controller
{
public IActionResult Index()
{
ViewBag.Message = "This is my First MVC Core 2.1 App.";
return View();
}
}
2. The ViewBag property is displayed in the View named “Index” as shown below.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@ViewBag.Message
</body>
</html>
3. Now press F5 to run the application and you should see a message displayed on page in browser.
![Building first Website in ASP.Net Core 2.0 MVC]()
Downloads
