Learning ASP.NET MVC

Learning MVC

It Include

• Introduction
• Background
• Why was the Web Form so popular?
• Why MVC?
• Problem with Asp.net Webforms
• How MVC Works:
• Understanding Controller
• Understanding View
• Passing data from view to controller
• Using ViewData
• Using ViewBag
• Understanding ViewModel
• CRUD operation with Entity Framework 6 Database First Approach using MVC 5

Introduction

MVC (Model-View-Controller) is a software architecture pattern / programming model.       

Asp.net MVC is a framework to develop web application using MVC design pattern:

·         Model: Its represent the application core, all the business objects and the database interaction logics

·         View: It is represent the representation layer of application. The screen user view is View.

·         Controller: It is the major unit of the MVC to handle the user control. On hitting the View, The control fall on the Controller action methods.

Background

Microsoft releases the MVC after the web-forms. Even after the too much popularity of the ASP.NET Web Forms.

Why was the Web Form so popular?

Because the web forms application gives the scenarios like the even driven programming. The users was aware with the Visual basic 6.0, Window application both of these platform , was providing users the facility to drag drop control on the form. And developer can create the code in event drive events. Each control in visual basic and window forms has the set of the event. The developer can write code in that event block.

That has the two files mainly for a form/screen 1. Designer file and 2.another the code file. Similarly the Web forms has same way two file say design file

webformPage1. aspx the designer file: all design reside on that file

WebformPage1.apsx.cs the code behind file: all the code to perform task/action reside in this file for aspx page file.

That is  why the web form got popular.

Why MVC?

The Microsoft release ASP.NET MVC whereas the ASP.NET Web form was so popular and developer friendly. Because there was few issue with the asp.net webforms.

Problem with Asp.net Webforms

·         Response Time

·         Bandwidth Consumed

·         Unit testing

Response Time: - the controls used in Web Form application generally are the asp.net control say Asp:button

<asp:button id=”button1” runat=”server” />

After execution on browser it become the pure html control

<input type=”button” name=”button1”/>

The asp.net requires checking each control and regenerating the html for each control and manager there events so the execution process takes too long time in doing that. So the response time of application increase.

More the controls on a page more time require to response html.

Bandwidth consumed:  The view state in webform provide the facility to manage the state of controls on a page if different post backs. The lot of the hidden text travel with the html each time page load/ postback. So the bandwidth consumed more.

Suppose we have a simple html page and transferring over the network will cost less comparable to webform page because it contain lots of the hidden text organized by webforms as view state

Unit Testing:  It is not easy to make test project in webforms. Require to test method by manual testing.

ASP.NET MVC provides solution to all these problems.

Request Response:

In web based system. User hit a URL in browser; the Browser comes up with response which is html.

http://google.co.in the request raise to web server, web server response back with html.

How MVC Works:

When user request, the control goes to controller and controller interact with model , then model return back the view.

MVC by comparing web form

Webform aspx (design) is view in mvc

Code behind file is controller in mvc

Understanding Controller

Let’s Learn how the controller works.

open visual studio 2013 and create a new project

Now the project is ready, see the solution explorer, Right click on the controller folder and add the controller named "MYTEST"

It will create a controller class and add a index method in it.

Open the newly created controller, Remove ActionResult and return view from Index action method.

 Index method include index(), currently we are focusing on controller so make this method simple
make the index method as below image, It is returning a string now.

Hit F5 to run project and string will print in the browser.

Change action method to return the html.

 Hit F5

It is clear that the mvc first hit the controller.

What url indicate

Localhost:49279 – application host

Mytest – controller name

Index – indicate the action method name in controller

We can handle this path using routing.

NOAction

If make a method non action methods then it can not be invoke by web.

An object can be returned by action method.

Understanding View:- Add a new action method "GetMyView" inside the mytest controller.

 Adding the view

It will add view inside folder view/mytest

Modify view html

Hit F5 

View placed in mytest folder by default because a controller has a view folder in mvc. If you want to  access a view in number of control , you can place that view to shared folder.

Passing Data from controller to View

Model: Controller provide data to view in the form of the model. Model represents the Business data for view

Using View Data.

View data can used to pass the data from controller to view. It is a data dictionary. We will add the data to this dictionary from controller method and read same from view.

Let’s Try a Lab Test

Create Model class:  create a class inside a model to handle to data. It is just a business object BO.
Right click on model folder to add the model class.

 write these lines of code to user model

Change GetMyView Action controller method to pass model to ViewData so that user data can be available on view

Model to controller

Using statement on top to access models inside controller

                                        using LabTest1.Models;

 Adding data

                 User usr = new User();

                 usr.FirstName = "Sunit";

                usr.LastName = "Kanyan";

                usr.CreditPoint = 5000;

Setting object in view Data

                  ViewData["User"]=usr;

Make the view html as below

Hit F5 and see the data on view from controller using VIEWDATA

 Using View Bag.

   Create a view bag

                                    ViewBag.User = usr;

Displaying data on view

                       LabTest1.Models.User usr = (LabTest1.Models.User)ViewBag.User;

Passing data from viewdata or viewbag is not a best way

• .      Viewdata/viewbag are the object. Require to type cast back to object type so increase the execution time as casting placed. So it add the performance overhead.

• .      No compile type error generated: incorrect type cast can be performed which come to know at run time.
• 
  
• .      Not type safe:  incorrect type cast and incorrect attribute
• 
  
• .      No connection between data sends /receives: developer require to track the each attribute name which is in viewdata/viewbag.

The issue in viewdata and view bag exist so we need to focus on strong type

Understand the strong typed views

Making a View String type:- Adding the namespace to access model inside the view

                              @model LabTest1.Models.User
thereafter the intelligence help the developer to use the attributes throughout the view

If you forgot to pass data from control then exception will be

 pass the model from controller

 Hit F5 and see output

We can separate the model from view, we can create view model to represents the data from model to view using controller.

What is View Model ?

A class same as model including some additional properties which require by view with the model data.

Suppose view require the username , footer copywriter  text to show from model but model has only user only information  so in that case we can create a view model  which has all require properties to pass to view. And view model can be initializing for a view in action method.

Advantage of View Model:

The model can always used for business logic.

No need to change the model for the changes in representation, just change view model accordingly.

Let’s try:-

Create ViewModel:- Create a viewmodel folder and Add UserViewModel class  and UserListViewModel class

Adding Fussiness logic to get the users from  user model.

Change the controller's action method to return object of UserListViewModel to view.

 Handing the UserListViewModel inside the view

Hit F5.

Username shows in Title, and the users data shows in the tabular form in browser.

It is recommended method to represent screen using the view model instead of the read models. It makes the life of the developer easy.


Interacting with database: CRUD operation with Entity Framework 6 Database First Approach using MVC 5
~
Sunit Kanyan
technocrats@sunitkanyan.in

learn mvc in easy way step by step.