Web Tutorials

HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
.NET Tutorial
PHP Tutorial

Interview Q & A

ASP.NET Q & A
WEB API Q & A
WCF Q & A
JQuery Q & A
MVC Q & A
Bootstrap Q & A
LINQ Q & A
AJAX Q & A
SQL Server Q & A
C# Q & A
OOPS Q & A

Code Examples

AngularJS
Google MAP API V3
ASP.NET

Utility Tools

Html Encode
Html Decode
URL Decode
URL Encode
Base64 Encode
Base64 Decode
JSON Beautifier

Getting Started With ASP.NET Core MVC Application

Posted By: Ajay Saptaputre, 03 Jul,2016  |  Total View : 6902

I this article, I am going to demonstrate how to build your first ASP.NET Core MVC application using VS 2016. If you are new to ASP.NET Core 1.0, you must read Understanding ASP.NET Core 1.0 and how to setup and install the required framework.

So let's first open Visual Studio 2015 and go to File-->New-->Project and from new project dialog box select ASP.net Core Web Application (.net Core). Give project name and click on create button. This will open another window; here you will find three templates, select Web Application . When you select, you will find brief description right side of the template that says:

"A project template for creating an ASP.NET Core application with example ASP.NET MVC View and Controllers."


It means, when you click on OK button, this will create ASP.NET Core MVC application with default view and controller. When you open solution explorer, Visual Studio will add a default template for the MVC project you just created, so by default you have a working MVC application with you right now by entering a project name and selecting a few options. This is a simple "First ASP.NET Core MVC Application" project, and it's a good place to start. See below screen shot.

Press F5 to run the application in debug mode or Ctl-F5 in non-debug mode. By default, Visual Studio starts IIS Express and runs your app. So press Ctl-F5 to run your first application.


You can see here, in the default layout it is showing that how ASP.NET Core application can run on any platform like Windows, Linux and SOX.

Some interesting points I found when opened_Layout.cshtml file from share folder. Look at below screen shot:


Observe the highlighted syntax, this is really outstanding approach and totally different from old ASP.NET MVC traditional approach. If you are aware with AngularJS, you will find some similarities of the attributes used in layout page. Microsoft introduced new attributes based approach to specified area name (if any), controller name and action name. Also note that, all attributes are prefix with asp. I will cover what is attribute based approach in my upcoming post.

Adding a Controller

All right, now right click on Controllers folder and add MVC Controller class Controllers->New Item..->MVC Controller Class


Adding a Route

Now open Startup.cs file add below code to the routes table in order to run our new controller's index method.


Run Application

Run the application by pressing CTRL+F5 and change controller and action method name to invokes the newly added controller and action method as given below:


https://localhost:53995/MyTest/index


Add New Action Method

Open Controller, add below action method to the controller which well return View that we are going to add in next step.


// GET: /MyTest/
public IActionResult MyView()
{
	return View();
}

Adding a View

Now, right click on Views folder, and from popup select Add?New Folder and name it as your controller name (for naming conventions) MyTest. Next, right click on MyTest folder and then Add-->New Item-->MVC View Page

.

Add below code into the newly added view:


@{
    ViewData["Title"] = "My Test";
}
<h2>Welcome to My Test View</h2>

<p>My Newly Added ViewTemplate!!!!</p>

Now open Shared/_Layout.cshtml and add another link in navigation bar that will open newly added view as given in below screen shot.


Run application by pressing CTRL+F5, click on "Test View" link from top navigation. It will open newly added "MyView" page that displays header text and changed page title in browser.


Appreciate your valuable feedback:

I hope this article is useful for you. I look forward for your comments and feedback. So please provide your valuable feedback so that I can make this blog better. You can also share this article by hitting below button.
Happy learning...

Download Code ⇩