Introduction: 

In coming n-part of this article we will learn to create a Line of Business Application starting with requirement, development, testing and finally how to deploy it. I will try to cover every layers in the architecture starting from database to data access layer through the different business tiers and all the way to service layers, and communication with entities, data/view model using Api layer and User Interface application. We will also see how different layers are designed and talk to each other. During the application development, I will try to incorporate many pattern and techniques to solve day-to-day problem using different design patterns like factory, abstract factory, repository pattern etc.  in both client and server side code to reduce the code repetition and easy maintainability. All of the layers which I am going to be developed would be based on SOLID principle for good code manageability, extensibility and the most important part is test-ability. I will also show you how easy it is to write tests at several layers of the application, and how it works. I will also use dependency injection throughout the layers including but not limited to Servcie, Web, Data Access and other layers. I will also use internationalization to build multilingual support.

Technologies:

I am going to combine all latest technologies throughout the application starting from server to client. In-fact you can find a good documentation/articles for most of the technologies on code project or msdn site, so I will concentrating on implementation of these technologies with different layers/tiers and how they all work together, but don't worry you will see a lot of code, lot of patterns and techniques and lot of things to learn. 

Below is the glimpse of technologies I am going to use -

For User Interface Layer : ASP.NET MVC 6
For Service Layer : ASP.NET Web API 6
For Data Storage : SQL Server 2014
For Data Access : Entity Framework 7
For Business Object Validation : FluentValidation
For Client Script : AngularJs 1.4.4
For Style Sheet : Bootstrap 4 alpha

Tools : Visual Studio 2015 ( Enterprise Edition )
Operating System : Windows 10

Disclaimer: Most of the software and things used in this article are in Alpha/Beta , and are constantly changing. Please drop me a line if you find something not working.

What we are going to build: 

We are going to build an application for Personal Website and Blog.
Any one can comment on any post.
Only authorized user can post a blog.
Authorized user can delete or modify any post/comment.

Part 1 ( Introduction to ASP.NET MVC 6) 


In below steps, we will start from an empty project and add components as required.

Step 1: Go to File => New => Project


Step 2: In the New Project dialog Window, go to Installed => Templates => Other Project Types => Visual Studio Solutions, and select Blank Solution, name this solution as “Application” and click OK.


Step 3: Open Solution Explorer (Ctrl+Alt+L) and right click on newly created solution, go to Add => New Solution Folder, name this folder as “Presentations”.


Step 4: Right click on Presentations folder, go to Add => New Project.


Step 5: In the New Project dialog Window, go to Installed => Templates => Visual C# => Web, and select ASP.NET Web Application, name it as “Application.Web” and click OK.


Step 6: In the New ASP.NET Project dialog Window, select Empty Template, under ASP.NET 5 Preview Templates and click OK


After Step 6 you solution should look like below image.


Step 7: Hit F5 to run this solution, on browser we can see output as Hello World!

Let us discuss in short about the project structure. As we can see there are 4 different file types are auto generated in Application.Web project:

  1. hosting.ini: is the hosting config file, and is used by the lightweight web server. Just to note, it only work for windows. In this file there are only two lines of code, it tells aspnet5 which web server and the start url(s) of the website we wish to have when we run our website without IIS Express.


Microsoft.AspNet.Server.WebListener – is the library to self-host web server implementation for Windows, and is one way to host an ASP.NET 5 app without using IIS. As we can see that the default web server for our project is set to IIS Express (that’s the reason it is running on port 28791), to run it in self hosted environment, i.e. using hosting.ini, change default web Server from IIS Express to Web


 and hit F5, you will see a new window with only message as Started.


It means our self-hosted web server is running. Now open a browser and type http://localhost:5000 we will see the same output as Hello World!


  1. 2       project.json: is the config for “Application.Web” project. If we have multiple projects for our solution, then each would have its own project.json file (we will see it later ). Find more details here (https://github.com/aspnet/Home/wiki/Project.json-file)

webroot: Specifying the webroot property in the project.json file specifies the web server root (aka public folder). In visual studio, this folder will be used to root IIS. Static files should be put in here like css, javascript or images etc.

version: The project version

Dependencies: This section lists all the dependencies of our application. These are defined by name and version, the runtime loaders will determine what should be loaded. NuGet package, source code, etc. In “Application.Web” project we have two library dependencies:

  • Microsoft.AspNet.Server.IIS: is the library to ASP.NET 5 server implementation for IIS and IIS Express.
  • Microsoft.AspNet.Server.WebListener: is the library to self-host web server implementation


Commands: When running dnx.exe we can pass the name of a command to execute it. In this snippet we can run "dnx . web" to self-host the app on Windows. We are registering the command which when called will execute Microsoft.AspNet.Hosting and will read the server and url through hosting.ini file


Frameworks: Target frameworks that will be built, and dependencies that are specific to the configuration. This snippet will build for Desktop (dnx451) or Core CLR (dnxcore50). Core CLR has many extra dependencies as the packages that make up the BCL need to be referenced.


PublishExclude/Exclude: This section defines what files should be included and compiled. The default values are bin/**;obj/**;**/.*/**”

3.    Project_Readme.html: This is an informational HTML file, and opens in the Visual Studio built-in browser at the time of creating a new web project. This has nothing to do with project, but, it shows a lot of helpful links that are current for the project.

4.    Startup.cs: This is the entry point for “Application.Web” project. The ASP.NET hosting layer find the startup logic for our application in Configure method (in current application it is reading output as Hello World!)



The ConfigureServices and Configure methods are called by the framework when the application is started. The Configure method is used to register components in the application pipeline using IApplicationBuilder. ConfigureServices method another entry point and is used for configuring any required services to our application. We can configure existing services and add new ones for our application in the ConfigureServices method. The ConfigureServices method takes an IServiceCollection to which we can add additional services or modify existing ones. ASP.NET 5 comes with a simple built-in IoC container that’s set up in the Managed Entry Point layer in order to bootstrap the system, but we can easily replace the built-in container with your container of choice. In next steps, we will see this both methods in action. For more details, read here (https://msdn.microsoft.com/en-us/magazine/Dn913182.aspx)

Step 8: Let’s go ahead and add controllers and view to our web project. To do that right click on project “Application.Web” and Add => New Folder name it as “Controllers


Step 9: repeat step 8 and add a New Folder name it as “Views

Step 10: Now Right click on Views folder and Add => New Folder name it as “Shared

After Step 10 solution should look like below image :



Step 11: Right click on Shared folder Add => New Item, from Add New Item modal window select Installed => Server-side => MVC View Layout Page name it as “_Layout.cshtml



Solution Explorer should look like below image :


And you can notice that Visual Studio is complaining for ViewBag and RenderBody ( see highlighted in below image ) in newly created _Layout.cshtml file. 
 

To resolve these two errors, open project.json file and add  "Microsoft.AspNet.Mvc": "6.0.0-beta5" under dependencies, so our project.json file looks like below image:


Step 12: Right click on Controllers folder Add => New Item, from Add New Item modal window select Installed => Server-side => MVC Controller Class and name it as “HomeController.cs


Solution Explorer should look like below image :



The content of HomeController.cs is complaining for View() method as it is not able to find any view for this action.


In next step (13), we will resolve this issue.

Step 13: Right click on Views folder Add => New Folder, and name it as Home


Right click on Home folder Add => New Item, from Add New Item modal window select Installed => Server-side => MVC View Page and name it as “Index.cshtml


Solution Explorer should look like below image :


So now we have Layout, Controller and View page so lets hit Ctrl+F5 to run the application. Ooops still the Hello world page is there :( even after typing /Home no new output. 

The reason is, as the newly created files are part of asp.net MVC so we need add MVC to request pipeline.

Step 14: Go to Startup.cs, and add services.AddMvc() in ConfigureServices method. This code adds all the dependencies that MVC 6 requires. The ConfigureServices method should look like below image.


Step 15: Again in Startup.cs, replace existing code with app.UseMvc() inside Configure method with route definition. It will add MVC 6 to the pipeline. Below is the complete Startup class after modification:



Now hit Ctrl+F5, and you will see a blank page ( as we don't have a single line of code in Index.cshtml).

Step 17: Next open Index.cshtml file and add some text.



Again hit Ctrl+F5, and you will see the output with Page title and Text.



That's it for this part. In next part we will design User Interface (UI) using Bootstrap css, dummy Json data and angularjs. 

Download Source Code : Application_Part1.zip (68.2KB)


Comments (6) -

  • Marc Bell

    9/10/2015 3:06:16 PM |

    Very interesting! thorough, easy to read and good introduction to start with ASP.NET MVC 6.  Waiting for other parts.

    Thank you very much.

  • colin dube

    12/1/2015 11:32:56 AM |

    Very good Intro to ASP.NET MVC 6. Can't wait any longer for more!!!
    WHEN IS MORE COMING?

  • uMtzmNBlE

    1/20/2016 12:36:30 AM |

    205721 754707�this is quite intriguing. thanks for that. we need to have far more internet sites like this. i commend you on your wonderful content material and exceptional subject choices.� 864809

  • Cristian Martinez

    1/30/2016 2:25:34 PM |

    Excellent Tutorial ! When de next part is  coming? thanks

  • Ahmed A Giwa

    10/20/2016 9:52:23 PM |

    Hi Anand,
    How are you doing longtime? Do you have the part 2 of this application?

    Thanks
    Ahmed Giwa

Loading