The Engineering Projects

Controllers in ASP.NET MVC

Hello friends, I hope you all are doing great. In today's tutorial, I am going to give you a detailed overview of Controllers in ASP.NET MVC. It's the fourth article in ASP Web App Series. In our Previous tutorial, we have had a look at Views in ASP.NET MVC and in that tutorial, we have mentioned this Controller a lot and today we are gonna discuss it in detail. Controllers acts as a messenger in ASP.NET MVC Web App, it takes message or data from place to another. I have also shared a video at the end of this tutorial and I would suggest you to watch it once to get better understanding of controllers. So, let's get started with Controllers in ASP.NET MVC:

Controllers in ASP.NET MVC

• Controller is the back bone of any ASP.NET MVC Web App as it acts as a messenger between different entities.
• When use hit your website address in the browser then browser generates an HTTP request, which is received by the server and in ASP case it comes to Controller.
• Controller in ASP.NET handles the coming HTTP request and then selects the respective Model in ASP.NET MVC and then gets data from the SQL Database, if required.
• Along with this data from Model, it forwards the command to respective View, which in turn opens up in front of the user.

• So, you must have got the importance of Controllers as they are kind of doing the management work, getting and assigning commands & data.
• Controllers are inherited from System.Web.Mvc.Controller and are simple C# classes.
• You can find the Controllers folder in Solution Explorer, click to expand, as shown in below figure:

• You can find 3 Controller files in this folder, named as:
  • AccountController.cs
  • HomeController.cs
  • ManageController.cs
• So, now click on the Home Controller file and let's have a look at the code, shown in below figure:

• In the above code, we have used a method named ActionResult, which will send the data to View.
• After the name of method, the name of each page is placed present in the Views > Home folder.
• Now let's open the About Page and the string variable is shown on the About Page, as in below figure:

• If you open the About View file, then you will see this string variable is placed there, that's why we have it on screen.
• We can create unlimited controllers and can use them for different purposes.
• Here's a video which will give better understanding of Controllers in ASP.NET MVC:

So, that was all about Controllers in ASP.NET MVC. I hope now you can easily understand the difference between Models, Views & Controllers. In coming lectures, we will have a look at How to create New Models, Views & Controllers in ASP.NET MVC. Take care & have fun !!! :)

Views in ASP.NET MVC

Hello friends, I hope you all are doing great. In today's tutorial, we are gonna have a look at What are Views in ASP.NET MVC. It's our third tutorial in ASP .NET MVC series and in our first tutorial, we have seen How to Setup Your First Project in ASP.NET MVC and in our second tutorial, we have seen What is Model in ASP.NET MVC and I have told you about Views as well in previous tutorial. So, now we are gonna have a look at it in detail:

Views in ASP.NET MVC

• In MVC Framework, we don't have pages or path to some html file as in php.
• Instead, We have to use Views in ASP.NET MVC for front end designing.
• We can use Html, Css, Javascript, Jquery or any other front end language in Views.
• There are two types of Views, we use in ASP, which are:
  • Specific Views ( These Views are associated with specific Controllers ).
  • Generic Views ( These Views are associated with all the Controllers ).
• You can find the Views folder in your Solution Explorer, click to expand.
• In Views folder, you will find 4 more folders named as:
  • Account.
  • Home.
  • Manage.
  • Shared.
• In these folders, we have to click on Home to expand and you will find 3 files in it, which are:
  • About.cshtml
  • Contact.cshtml
  • Index.cshtml

• If you remember thaat we also have same 3 pages on our demo ASP Web App.
• So, let's open Index file which is our home page View file and I have changed the H1 Tag from Asp.Net to The Engineering Projects, shown in below figure:

• Now let's refresh our web app, and you will get something as shown in below figure:

• Now you can see in above figure that our H1 Tag has now changed to The Engineering Projects.
• One important thing to note here is that we don't need to stop the visual studio server / execution because now we are making changes in the front end interface.
• When we were working on Models in MVC, we have to stop the Visual studio execution on every change because that was Server Side Programming.
• But as Views are Client Side Interface so we don't need to restart our server.

Specific Views in ASP.NET MVC

• As I have said earlier, there are two types of view and in this section we will first discuss the Specific Views in ASP.NET MVC.
• These Views are specific to certain Controllers, we will discuss Controllers in the next chapter.
• For now when a user enters the webpage, the controllers get the respective View and show it to the user.
• In the above section, we have seen the code for index file and you must have noticed that this index file only contains the html code for the body.
• This is a Specific View as all it's data is used only for Home Page, we can't use it our About or Contact Page.
• So, all the three Views in Home Folder are all Specific Views and are attached to specific Controllers.
• Now let's have a look at the Generic Views: ( Btw these are not their actual names, I have given these names to Views according to their functionality ).

Generic Views in ASP.NET MVC

• Let's have a look at the interface of our demo Web App:

• You can see in the above figure that we have a Menu Tab in our Home Page where we have placed the links of our 3 Pages.
• But in our Index View, we haven't seen any code for Menu Tabs.
• Now if you check all pages of your Web App then you will notice that they all have this same Menu Bar.
• Such Views are called Generic Views which are used in almost every page and decides the nature of your web design.
• Sidebar, Footer & Headers etc. comes in Generic Views category.
• So, now question is where we have the code for Menu Bar.
• Such Generic Views are placed in Shared Folder as shown in right side figure:
• If we have to apply some Generic Terms in Front End like Menus, Footer, Siderbars, Menu Layouts etc. then we will add their codes in _Layout.cshtml.
• All these other files are partial views, which will specifically render with specific controllers.
• We will discuss them in our coming tutorials but for now the file you should be interested in is _Layout.cshtml.
• So, open this Layout File and it will look like something as shown in below figure:

• Now you can see here, this file is in proper HTML Format having both Head & Body tags.
• This is our Main Layout View in which we can add all our generic styling items with proper placement.
• You have noticed a RenderBody() here and that's the place where our Index View file is appearing.
• So, when this View File is called then it checks which controller command is coming, if it's home then RenderBody will get Index View.
• If its About Controller then RenderBody will get the About View.
• How Controller is accessing these Views that we will check in our coming tutorial.
• Here's a video where one of our Team Member has explained Views in detail, it will give better understanding:

So, that was all about View in ASP.NET MVC. In my coming tutorial, I will give you a detailed overview of Controllers in ASP.NET MVC. So, take care and have fun !!! :)

What is a Model in ASP.NET MVC

Hello friends, I hope you all are doing great. Today, I am going to share the second tutorial in ASP.NET MVC series and I will explain the concept of Model in ASP.NET MVC. In our previous tutorial, we have seen How to Setup Your First Project in ASP.NET MVC. So, before developing our web app, we first have to discuss some concepts in MVC Framework and Model is one of them, which we will cover in today's tutorial. So, let's get started with it:

What is a Model in ASP.NET MVC ?

• In, ASP.NET MVC Framework structure, we have to understand 3 very simple blocks, which are:
  • Models
  • Controllers
  • Views

• Model connects our web application with our SQL Database, it takes commands from the Controller and then get or set values in the Database and finally updates the View.
• We can say that Model is acting as a middle man between Controller, View & SQL Databases.
• If you are not understanding the Controller or View, that's no problem. We will cover them in next chapters, for now just focus on functioning of Model.
• So, in your Solution Explorer, you can see a folder named Models, click to expand and you will find 3 model files in it, as shown in below figure:

• You can see in above figure that Microsoft visual studio has auto created 3 Model files in our ASP web project.
• So, click AccountViewModels.cs file and it will open up as shown in below figure:

• Now you can see in above figure that our model file has some classes in it.
• If you check the whole file then you will find more than 5 classes in it.
• Each of these class is actually representing a unique model, all of these classes have certain rules attached to them.
• Now let's understand the working of our web app.
• When our ASP web application runs for the first time:
  • The App goes to Controller.
  • Controller hits the Model.
  • Model gets or sets values into SQL Database & then return value to Controller.
  • Controller returns value to View.
• I have shown this working in block diagram form here:

• Now in this model file, you have find for class RegisterViewModel, its the Model for our registration page, shown in below figure:

• The main thing to note in this class is that, we have created 3 variables with data types public string, named as:
  • Email.
  • Password.
  • ConfirmPassword.
• The parameters assigned to these variables are get and set, and these variables will either Get value from the SQL Database or Set new value to it.
• So in simple words, the model is dealing with data in or out, it receives commands/data from controller and according to the rules set in each model, the data will be either stored in the SQL database or fetched from it.
• Model tells us, what kind of information is required and what kind of information is placed in the SQL Databases.
• The major code of MVC Framework is written in the Model section, because here we have to write all our rules and permissions to interact with the SQL databases.
• Here's a video where one of our team member has explained Model in ASP.NET MVC in detail:

So, that was all about today's tutorial on Model in ASP.NET MVC. I hope you have got the idea. In the next tutorial, we will have a look at What is View in ASP.NET MVC. Take care !!!

Setup your First Project in ASP.NET MVC

Hello friends, I hope you all are doing great. In today's tutorial, I am going to start this new series on ASP.NET MVC Framework. I am gonna start from basics and will slowly move towards professional projects. I will share all the codes during this series and if you got into any trouble then ask in comments and I will help you out. One of our Team Member has already designed videos on ASP.NET MVC and I will keep on embedding the respective videos throughout this tutorial series. In our first tutorial, we are gonna have a look at How to Setup your First Project in ASP.NET MVC Framework. So, let's get started with it:

Setup your First Project

• I will use Microsoft Visual Studio 2015 and I hope that you have already installed it.
• If you are using any other version of Visual Studio then that's not an issue as they almost work the same.
• So, open your visual studio 2015 and click on New Project as shown in below figure:

• You can also try File > New > Project to open a New Project.
• When you click it, a new window will open up, where you need to select the Template.
• So, we are gonna click on Visual C# and then Web and here we will select ASP.NET Web Application.
• In the Name section, you need to give the name of your asp web app, I have added TEPwebApp, as shown in below figure:

• Now click OK Button and Visual Studio will start creating your project, as shown in below figure:

• In the next window, it will ask to select ASP.NET Template, and we will select MVC as we want to work on MVC Framework.
• So, select MVC and it will automatically tick the MVC check box and Click OK as shown in below figure:

• It will take some time in setting up ASP.NET MVC environment.
• After the completion of new project creation wizard, you will see something as shown in below figure:

• Here's our demo application, which is created by visual studio for us and it's in ASP.NET MVC Framework.
• We can easily run this web application in our browser, so at the top click on Google Chrome that's my default browser.
• Click on the browser and the whole list of browsers installed on your computer will open up, as shown in below figure:

• I am gonna run this web application on Google Chrome so click it and it will open the browser and will run our web App.
• We don't need to use any virtual server like xampp, because visual studio automatically creates its own web server called IIS and will allocate the port after localhost as well.
• Our first demo ASP.NET MVC web app is shown in below figure:

• You can see in above figure that it has created this simple asp.net website which has 3 pages:
  • Home
  • About
  • Contact
• We can also Login or Register, links are given in top right corner.
• You should also have a look at this video which will help you in better understanding of this tutorial:

So, that was all about How to Setup your First Project in ASP.NET MVC. I hope you have enjoyed it. Will meet you guys in the next tutorial of this series. Take care !!!