Learn MVC Step 1 - Application Structure

Learning asp.net mvc is really easy which we will realize during our articles. We will start from the very beginning to create a hello world application an application using insert, update, delete features and then try to give the option to sell them by using shopping cart at the end of the article.

If you already know the asp.net then it's good and if not then it's best, because in MVC, we don't have any server side controls so those who already know asp.net need to forget about server side controls as well as code behind of the asp.net page.

Model - M in MVC:

It contains all application logic (business logic, validation logic, and data access logic), except pure view and controller logic. It is not necessary to use business and data access login in model even you can use loosely coupled model layer. There are some ORM libraries like Hibernate (Java), NHibernate (.NET), Doctrine (PHP) or ActiveRecord-Rails (Ruby) that really can generate all actual SQL statements for you. In our example we will use Entity Framework database first so we will use it into model itself.

View - V in MVC:

A view is a (visual) representation of its model data. It's a simple HTML file like our asp.net page html code which uses razor view to render the elements and CSS to design the look and feel of the page.

Controller - C in MVC:

A controller is the link between a user and the system. The controller responds to actions by the user taken the in the view and responds. You put validation here and select the appropriate view if the validation fails or succeeds (error page, message box, whatever). MVC requires the name of all controllers to end with "Controller".

MVC together:

When a user type some URL or click any button on the page, it check the controller and then action, once found, it use the model to get the date and send it to view to represent to the user. Let's say the user types http://www.google.com/analytic/detail, the application will first check for the controller analytic, once found check for the action detail, once this action found in controller try to get the data for the view and send to view to represent for the user.

Now we know what is MVC. We will create project and will try to understand the application structure by looking folder by folder from top to bottom. So what we are waiting, let's start now, I have Visual Studio 2013, if you are using different version then might be options will be different.

• Click on file menu
• Select New Project
• Choose "Web"" from left pane
• From right pane choose "ASP.Net Web Application"
• Browse the folder where you want to save this project
• Give the name : Advance.Learning.WebApp
• Check "Add to source contain" if you want to use source control otherwise leave it
• Click on add to create the project
• It will open a new dialog
• Select MVC and click Ok

Now our default project is created, we will explore it's different folders and will try to understand them, before that run the application and check what we already have in our application created by visual studio. It have home, about, contact, login and register page, every page is working smooth and a nice design with CSS. It is using bootstrap to design the application.

• References: contain all the refererences of libraries
• App_Data: to store local database
• App_Start: it contain some important files, no need to worry about it now whenever needed I will explain it in detail. It contain files
  • BundleConfig.cs: To bundle all the CSS and JavaScript files
  • FilterConfig.cs: To register global filters if we created any
  • IdentityConfig.cs: Contain some common classes like to send the email and SMS etc.
  • RouteConfig.cs: To manage routing of application, default is enough for our project
  • Startup.Auth.cs: as the same suggest for authentication configuration
• Content: it contain all the CSS files to design our application look and feel.
• Controllers: It is one of the main folder in which most of the time we will work.
  • All the controller name suffices xxxxController, default we have
  • AccountController.cs: for account management, login, logout, register, forgot password etc.
  • HomeController.cs: it contain index, about and contact action
  • ManageController.cs: It is new in VS 2013 and used for account management
• font: it used by bootstrap CSS for different icons
• Model: It is our second most used folder, it contains some models used in application
  • Open and see how attributes used
  • [Required] : Required field
  • [Display(Name = "New password")] : Label of the property
  • [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)] : String length validation, if less than 6 or more than 100 then will show error: "The New password must be at least 6 characters long."
  • Rest we will discuss in detail latter
• Scripts: It contain all the JavaScript files
• Views: It contain separate folder for all the controllers in our application
  • Every folder contain files with the same name as the action in our controller with extension .cshtml
  • Shared folder contain a file _Layout.cshtml, which is our master page
  • it also contain some other partial views which we will discuss latter
  • Global.asax: it is same as in our asp.net application to add application level events
  • Web.config: as the name, used to configure the web site.

Open HomeController and add a message Hello World

public ActionResult Index()
{
   ViewBag.Message = "Hello World";
   return View();
}

Right click inside index action and select "Go To View" and add following line

<h3>@ViewBag.Message</h3> 

Run the project and see it is showing on the page, it is way to pass the value from controller to view.

• In MVC there is no post back
• No code behind
• No server controls like textbox, grid view etc.

• Please suggest us what you want to see

  
  

Other blogs you may like

mvc search page example with code

MVC Searh page with pagination: It’s very easy to create a search page in asp.net but when I try to create the same in MVC I faced many problems, how to create model, how to keep searched values in search controls, pagination, I found myself nowhere, so start searching for some good examples but... By Ali Adravi   On 25 Aug 2013  Viewed: 40,268

MVC insert update delete and select records

CRUD (Create, Retrieve, Update and Delete) in MVC. When we start to learn new language, first we try to run an application with “Hello World” and then CRUD functionality. So in this article we will see how to select records from database (with WebGrid, pagination and sort functionality), update a... By Ali Adravi   On 17 Aug 2013  Viewed: 106,142

How to create a single thanks page for entire controller in MVC

Sometimes we need a thanks page say we have user registration, change password, activate account functionality in our application then we need a thanks page after registering with our site, to say thanks for registering with us or showing confirmation that your password is successfully changed or... By Hamden   On 30 Jun 2013  Viewed: 3,793

MVC jquery autocomplete with value and text field

In MVC, autocomplete with jquery is the best way to pull data from database and render according to our requirements, so in this article we will use jquery to show the auto complete text box without any ajax controls. We need a method to get the data from database, a controller method to handle the... By Ali Adravi   On 29 Jun 2013  Viewed: 7,049

Upload files with model data in MVC

Upload multiple files with model data in MVC is really very easy, when I started to test by uploading some files, I though it would be more complicated but it is really not. In my previous post [ASP.Net MVC file upload][1], I promised to post soon about how to upload multiple files. When I was... By Ali Adravi   On 04 Jun 2013  Viewed: 25,605