Post
Ask Question

First Website/Project Of ASP.NET Core

 Introduction

 
ASP.NET Core is a free and open-source web framework and successor to ASP.NET, developed by Microsoft and the community. In this article I will guide you to create a simple asp.net core website. We aren't going to go deep in asp.net core but we are just simply creating a basic website which only shows a welcome message.  I hope you will like this article .
 
Here are the steps to create a simple asp.net core website.
 
Step 1
 
Open Visual Studio, here I am using Visual Studio 2019.
 
Step 2
 
Search for the asp.net core web application, select it and click on the next button.
 
First Website/Project of Asp.Net Core
 
Step 3
 
On the next screen you will need to insert few details, including your project name,  your project location and solution name. After inserting all these details click on the create button. Following are the details to enter: 
  • Project name - in this field you need to enter your project name.
  • Location - in this field you need to select your project location where you want to store this project. You can select a folder by click on the button beside the location field.
  • Solution Name - in this field you need to enter the solution name; this is shown in solution explorer.
First Website/Project of Asp.Net Core
 
Step 4
 
Now select the framework as .Net Core and select its version, then select Empty project template and click on create button.
 
First Website/Project of Asp.Net Core
 
Step 5
 
Now your website / project is open in Visual Studio. Open solution explorer and right click on your project name, then click on Add option, then click on New Folder. Right click on ProjectName -> Add->New Folder. Give this folder the name Controllers (not Controller because that will cause an issue later when you add a new controller.)
 
First Website/Project of Asp.Net Core
 
Step 6
 
Now right click on the Controllers folder, click on Add option and then click on Controller .
 
First Website/Project of Asp.Net Core
 
Step 7
 
After clicking on the controller option you can see a new popup window. In this popup you will get the following options:
  1. MVC Controller - Empty
  2. MVC Controoler with read/write action
  3. MVC Controller with views using entity framework
  4. API Controller -Empty
  5. API Controller with read/write action
  6. API Controller with action using Entity Framework
First Website/Project of Asp.Net Core
 
Select MVC Controller - Empty and click on Add.
 
Step 8
 
Give your a controller name but do not remove the word Controller from after it, and then click on the add button.This wiil create a new controller Named 'Home' in your controllers folder.
 
First Website/Project of Asp.Net Core
 
Step 9
 
Now your controller is created and there is also one action method called Index. Here visual studio by default creates a method called index. You can create other methods also. Now Right click in that action method and click on Add view for adding an html file for that action method.
 
First Website/Project of Asp.Net Core
 
Step 10
 
Now you will see a new popup window. In this window you will get the following options.
  • View Name - Name of your view or your html file.
  • Template - There are many templates. Empty tempates only provide html files with title and h1 tag.
  • Model class - if you select a template other than empty then you will need to select entity model .
  • Other Options
    • Create as a partial view - this type of view does not get called directly, you need to call this type of file in another html file or you can call it in modal popup.
    • Reference Script libraries - by default this option is checked.
    • Use a layout file - if you do not create view as a partial view you need to select layout file. Layout file is basically a predifined template; if you do not select any layout file then visual studio by default selects a layout file which is defined in _viewstart file.
First Website/Project of Asp.Net Core
 
Give your file name, select empty template and check on Use a layout page. However, we do not have any layout file but check it and click on the Add button. It will add your file in View folder.
 
Step 11
 
Now open your html file in views folder and change as per your choice. Here I only add a message .
  
Step 12
 
Now open your Setup.cs file and change that file as shown in the below image .
 
First Website/Project of Asp.Net Core
  1. app.UseMvc(routes =>  
  2.   {  
  3.        routes.MapRoute(  
  4.            name: "default",  
  5.            template: "{controller=Home}/{action=Index}/{id?}");  
  6.    });  
Code Explaination
 
In the above image you can see that compiler already created some code in startup.cs file. This code returns a hello world string in your webpage. But we want to call our html view so we need to change this code.
  • app.UserMvc - This defines that this application / website uses mvc .
  • Route.MapRoute - This section calls file or controller from website 
  • name - this is an optional name for identifying if you have more routes .
  • template - here you need to pass the pattern of your application. Id is an optional parameter which you can pass. A question mark after id defines that the id may or may not have value, which means this is nullable object .
Step 13
 
Now run your application and your first asp.net core website is created.
 
First Website/Project of Asp.Net Core
 

Summary

 
In this article we created a blank website page of asp.net core framework. I hope you liked this article. If you like it share with your friends and stay tuned. 


Similar Articles