Mvcbook

Learn MVC step by step

1

LEARN MVC STEP BY STEP BY SUKESH MARLA AND SHIVPRASAD KOIRALA

Join our 2 days offline extensive Mumbai MVC training batch on Saturday and Sunday Call :- 022-66752917 / 9870148461 Begin with MVC

9

INTRODUCTION TALK ABOUT VISUAL WEB TECHNOLOGIES VISUAL IN WEB WHAT IS ASP.NET? WHAT IS WEB FORMS? ASP.NET 4.0 WHAT IS MVC? WHAT IS ASP.NET MVC? WHY ASP.NET WEB FORMS AND WHY ASP.NET MVC? CONCLUSION

9 9 9 10 10 10 13 13 14 15 15

What’s next?

15

Pre-requisite for MVC

15

Lab1:- Creating a simple hello world ASP.NET MVC Application

16

STEP 1:- CREATE PROJECT STEP 2:- ADD CONTROLLER STEP 3:- ADD VIEW STEP 4:- RUN THE APPLICATION

16 16 17 17

Lab2:- Passing data between controllers and views

17

STEP 1:- CREATE PROJECT AND SET VIEW DATA

18

Learn MVC step by step

STEP 2:- DISPLAY VIEW DATA IN THE VIEW.

18

So what’s in the next Lab?

18

Lab 3:- Creating a simple model using MVC

18

STEP 1:- CREATE A SIMPLE CLASS FILE STEP 2:- DEFINE THE CONTROLLER WITH ACTION STEP 3:- CREATE STRONGLY TYPED VIEW USING THE CLASS STEP 4:- RUN YOUR APPLICATION

18 19 19 19

Lab 4:- Creating simple MVC data entry screen

20

STEP 1:- CREATING YOUR DATA ENTRY ASPX PAGE STEP 2:- CREATING THE CONTROLLER STEP 3:- CREATE THE VIEW TO DISPLAY THE CUSTOMER OBJECT STEP 4:- FINALLY RUN THE PROJECT

20 20 20 20

Lab 5:- using HTML helper to create views faster

20

STEP 1:- CREATE THE CUSTOMER CLASS STEP 2:- CREATING THE INPUT HTML FORM USING HELPER CLASSES STEP 3:- CREATE A STRONG TYPED VIEW BY USING THE CUSTOMER CLASS STEP 4:- CREATING THE CONTROLLER CLASS.

21 21 22 22

Lab 6:- Unit test MVC projects

22

STEP 1:- CREATE THE SIMPLE DISPLAY CUSTOMER SCREEN PROJECT STEP 2:- ADD A SIMPLE UNIT TEST PROJECT STEP 3:- ADD APPROPRIATE PROJECT REFERENCES STEP 4:- WRITE THE UNIT TEST STEP 5:- FINALLY RUN THE UNIT TEST

23 23 23 24 24

Lab 7:- Understanding MVC outbound URLs

24

INTRODUCTION STEP 1:- CREATE VIEWS STEP 2:- CREATE CONTROLLER FOR THE VIEWS STEP 3:- PROVIDE ACTIONS IN THE LINK STEP 4:- ENJOY YOUR NAVIGATION

24 25 25 25 25

2

Learn MVC step by step

Lab 8:- Understanding MVC routing

26

INTRODUCTION STEP 1:- OPEN THE GLOBAL.ASAX.CS FILE STEP 2:- CUSTOMIZING THE URL’S STEP 3:- RUN THE APPLICATION SO WHAT’S IN THE NEXT LAB

26 26 27 27 27

Lab 9:- Validating and setting default values to MVC URLS

27

STEP 1:- CREATE A SIMPLE CUSTOMER MODEL STEP 2:- CREATE THE CONTROLLER CLASS STEP 3:- APPLY VALIDATION USING REGEX ON THE MVC ROUTES STEP 4:- TEST IF IT WORKS

27 27 28 28

Lab 10:- Partial views

29

STEP 1:- CREATE A SIMPLE VIEW WITH CONTROLLER STEP 2:- CREATE A SIMPLE PARTIAL VIEW STEP 3:- PUT SOMETHING IN PARTIAL VIEW STEP 4:- CALL THE PARTIAL VIEW IN THE MAIN STEP 5:- RUN THE PROGRAM AND SEE THE ACTION.

29 29 29 29 30

Lab 11:- Validation using Data Annotation

30

STEP 1:- DECORATE MODEL WITH DATA ANNOTATION STEP 2:- CHANGE THE ASPX CODE STEP 3:- ENABLE CLIENT VALIDATION STEP 4:- WRITE YOUR CONTROLLER LOGIC STEP 5:- RUN YOUR APPLICATION TO SEE THE ACTION SUMMARY OF OTHER DATA ANNOTATION ATTRIBUTES

30 30 31 31 31 31

Lab 12:- MVC 3:- Razor

32

STEP 1:- INSTALL MVC 3 AND CREATE A PROJECT USING THE SAME STEP 2:- SELECT RAZOR STEP 3:- ADD A VIEW AND INVOKE THE SAME FROM CONTROLLER. STEP 4:- PRACTICE RAZOR SYNTAXES PRACTICE 1:- SINGLE LINE CODE PRACTICE 2:- MULTIPLE LINES OF CODE PRACTICE 3:- FOR EACH LOOP AND IF CONDITIONS PRACTICE 4:- DO NOT WORRY ABOUT @

32 32 33 33 33 33 33 34

3

Learn MVC step by step

PRACTICE 5:- TO DISPLAY @ PRACTICE 6:- HTML DISPLAY WITH RAZOR

34 34

Lab 13:- MVC Security (Windows Authentication)

34

STEP 1:- ENABLE WINDOWS AUTHENTICATION STEP 2:- JUST SOME DEFECTS STEP 3:- APPLY AUTHORIZE TAGS ON YOUR CONTROLLERS / ACTIONS. STEP 4:- CREATE SETUP STEP 5:- CREATE IIS APPLICATION STEP 6:- PUBLISH STEP 7:- RUN THE CONTROLLER AND ACTION

34 35 35 35 36 36 36

Lab 14:- MVC Security (Forms Authentication)

36

STEP 1:- DEFINE THE LOGIN PAGE CONTROLLER STEP 2:- CREATE THE INDEX VIEW STEP 3:- VALIDATE CREDENTIALS STEP 4:- AUTHORIZE ATTRIBUTE STEP 5:- CHANGE “WEB.CONFIG” FILE STEP 6:- SEE FORMS AUTHENTICATION IN ACTION

36 37 37 38 38 38

Lab 15:- JSON, MVC and JQuery

38

STEP 1:- CREATE A SIMPLE CUSTOMER MODEL STEP 2:- EXPOSE CUSTOMER OBJECT AS JSON STEP 3:- CONSUME THE JSON CONTROLLER IN JQUERY STEP 4:- RUN THE APPLICATION AND SEE THE DATA

38 39 39 40

Lab 16:- Session management in MVC (ViewData, ViewBag, TempData and session variables)

40

STEP 1:- CREATE TWO CONTROLLERS “DEFAULTCONTROLLER1” AND “DEFAULTCONTROLLER2”.

STEP 2:- SET SESSION, TEMPDATA, VIEWDATA AND VIEWBAG STEP 3:- READ SESSION, TEMPDATA , VIEWDATA AND VIEWBAG VALUES

41 41 41

Lab 17:- Asynch controllers

42

STEP 1:- INHERIT FROM ASYNCCONTROLLER CLASS STEP 2:- MARK METHODS WITH ASYNC APPENDED STEP 3:- CREATE THE COMPLETED METHOD STEP 4:- ENSURE TO CREATE “SOMEHEAVYMETHOD.ASPX” VIEW

43 43 43 44

4

Learn MVC step by step

STEP 5:- RUN AND ENJOY

44

Lab 18:- MVC bundling and Minification

44

UNDERSTANDING MINIFICATION STEP 1:- CREATE A MVC PROJECT WITH EMPTY TEMPLATE STEP 2:- CREATE A CONTROLLER WHICH INVOKES A VIEW STEP 3:- RUN AND SEE HOW MULTIPLE CALLS ARE MADE. STEP 4:- REFERENCING “SYSTEM.WEB.OPTIMIZATION” STEP 5:- THE BUNDLECONFIG FILE STEP 6:- CALL THE BUNDLE CONFIG FILE FROM GLOBAL.ASAX.CS FILE STEP 7:- RENDER THE BUNDLES IN THE VIEW STEP 8:- WATCH YOUR BUNDLING AND MINIFICATION IN REAL

45 45 45 45 46 46 46 47 47

Lab 19:- MVC View Model

47

WHAT KIND OF LOGIC VIEW MODEL CLASS WILL CONTAIN? STEP 1:- CREATE THE CUSTOMER MODEL STEP 2:- CREATING THE VIEW MODEL STEP 3:- CONSUME VIEW MODEL IN THE VIEW SHOULD VM BE COMPOSED OR INHERITED. ADVANTAGES OF VM

48 48 48 49 50 50

Lab 20:- MVC Exception Handling

51

INITIAL SETUP FOR OUR LAB LOCAL LEVEL EXCEPTION HANDLING GLOBAL LEVEL EXCEPTION HANDLING DISPLAYING ERROR DETAIL IN ERROR VIEW DIFFERENT VIEWS FOR DIFFERENT EXCEPTIONS LIMITATIONS OF HANDLEERRORATTRIBUTE EXTENDING HANDLEERRORATTRIBUTE “RESOURCE CANNOT BE FOUND” EXCEPTION HOW GLOBAL LEVEL HANDLEERRORATTRIBUTE IS DIFFERENT FROM APPLICATION_ERROR?

51 52 52 53 53 53 54 55 55

Lab 21:- Areas in MVC

55

WHAT IS AREA AND WHY AREA? HOW TO USE AREAS? AREAS VS. FOLDERS?

55 56 56

Interview Preparation

58

5

Learn MVC step by step

6

Learn MVC step by step

About Sukesh Marla After working for so many years as a developer, as a trainer I thought I should move ahead now.

As an author I wrote many online technical articles and won some awards for some of them.

This all started when I first met one of my greatest mentor ever Mr. Shivprasad Koirala. That meeting was about an open source project on accounting.

I also started my CodeProject journey with Shiv sir writing my very first article about Mock Testing and after that I never looked back.

From Basic C# Fundamentals to MVC, WCF, WPF, BI and Design patterns Shiv sir was there to guide me every time. He is purely a down to earth person.

What I do?       

I am Trainer.

I am Technical Leader.

I am News Paper publisher.

I am an author (CodeProject.com, CSharpCorner.com and www.sukesh-Marla.com).

I record videos for questpond.

Now I write books ;) Most importantly I am learner

My Success Complete success of this book and my professional career goes to several people.  

 

First credit goes to my Mom and Dad without whom I would have done nothing. Their hard work and blessings took me into this position.

My youngerbrother Suraj Marla – He is not between us now. When he was around I never thought about hugging him but now I want to but I can’t. I can’t do anything for him now but can try to keep his memories alive and can say only one thing to him “I miss yo.u” My sister Ujjwala Kadu – “Thanks for all your support Ujju, Thanks for taking care of me, Thanks for each and everything you did it my life. I can’t even imagine a life without you.”

My lovely wife Dipal Shah (Dipal Marla) – In our 5+ yrs. of relation unlike most other wives she never expected too many things from me. In fact, she supported me to get my goal and sacrificed many things. “Thanks dear.”

About Shivprasad Koirala I would like to first start by thanking the two old eyes who made this person without any expectations, my dad and mom.

I have been very selfish to steal time from my kids (Sanjana, Simran and Aditya) and my wife ( Vishna) to complete this book.

So a big thanks to stand by me to ensure that this book comes alive.

I am blessed to have Raju as my brother who always keeps my momentum moving on.

Special thanks to Mr. Sukesh Marla with whom I had long fruitful technical discussion which has flown in the book and made the book stronger.

Thanks to Mr.Shaam, Mr. Ajay and Miss Amrita for all the effort they have put in. It was their tiresome three months of support that we have finally made it.

7

Learn MVC step by step

Features of this book 

26 stunning labs with full details which starts right from simple hello world programs and then moves towards complicated topics like view model and security.



50 great MVC interview questions quickly get ready for MVC interviews. Answers are crisp and to the point, great collection for last minute revision.



Book also has a DVD accompanied which has step by step MVC videos which help you to visually see how the labs are actually done.



Web world has come far away. Any server side technology today needs proper integration with JSON and JavaScript.

Dedicated labs on JSON, JQUERY integration with MVC showing every detail how to implement the same.



Performance is one of the key factors when it comes to MVC. A full step by step lab on bundling and Minification which covers in detail steps of how we can increase MVC performance.



Session management in MVC is very different from ASP.NET Web forms. In MVC we have more fine tuning with different session management techniques like tempdata , viewdata and viewbag. A full lab step by step explaining how each one of these techniques varies.



One of the greatest strength of MVC is URL customization. We can customize MVC URL using MVC routing. Two great labs which explains how MVC routing works and how to validations on the URL.



RAZOR is a new view engine created to simplify view creation. A full lab with details steps of how to create a RAZOR view and different types of RAZOR syntaxes.



Security is one of the important aspects in any web application. Two detail labs which explains step by step how to do forms and windows authentication / authorization in MVC.



Parallel execution is one the important features in web application for performance. MVC has introduced concept of async controllers. A dedicated lab which explains how MVC async controllers can be implemented.



Two dedicated labs on MVC deployment and Exception handling takes the book to greater heights.



If you are thinking of learning MVC then you are at the right place. It’s a complete book for learning MVC practically as well as for preparing for interviews.

How is this book organized?

MVC is one of the most wanted skills and also complicated. The best way to learn such complicated skill is by going step by step and doing things practically. In this book we have taken every feature of MVC and executed it step by step in form of 21 great labs.

Every lab first starts with theory and understand and then goes step by step explaining the feature. Every lab is explained with source code and print screens so that you do not miss out any details while executing the labs.

In case you miss out details we have also accompanied videos in the DVD so that you can know every step when you are doing the practical. So start with the first Lab, get your mouse and keyboard running and if you are not able to understand something start playing the videos for better understanding.

8

Learn MVC step by step

Begin with MVC Introduction In 2008 Microsoft came up with something called as ASP.NET MVC and I was quite amazed about thefact “Why one more ASP.NET technology required” and many people still pondering same.

Many people say ASP.NET MVC replaced ASP.NET Web Forms.

But that’s not true. Both have their own pros and cons.

Nobody can tell or teach us what to use and when, but we can discuss about some facts which will help us to make choice between both of them. This article does the same.

We also try to find answers for some questions like,    

What is ASP.NET? What is ASP.NET Web Forms?

What is MVC? What is ASP.NET MVC?

If you already know the difference between MVC and Web Forms very well then this chapter will help you to revise your concepts.

Talk about Visual All the evolution started with one single but very powerful word called Visual.

With the help of technologies like Visual Basic, Visual C++ Microsoft brought up Visual into application development world.

What’s special about this Visual world?

In Visual world when we want to develop the UI we won’t write much code rater,  We will take some controls from toolbox and place it the form  Position them in the screen using mouse  Finally generate a code block in the code behind part which will respond to specific user events.(Event driven programming)

In simple words it enabled RAD (rapid application development) of Graphical User applications. Features such as Drag and Drop and intellisense made developers to focus more on the business functionality of the application rather than on UI design.

But this technique was limited to desktops, when it comes to web the only option left with Microsoft was ASP.

Web Technologies When we say web technologies, we have classic ASP, php, jsp,ASP.NET Web Forms, ASP.NET MVC and many more.

9

Learn MVC step by step

Classic ASP is one of the web technology introduced by Microsoft. Biggest pain point with the classic ASP was spaghetti code and Maintainability.

Let assume a scenario where you have some text boxes and a button. On button click you validate the data with the server and if validation succeeds data will be stored into database and in case it fails, error message will be shown to user in the form of red colored label.

You know what’s the biggest problem with this scenario is? You have to do lots of stuffs by your own.

1. First make the self-post back by setting form’s action attribute’s value to same page.

2. Text box values are going to be cleared on button click, so only choice left will be retrieving values from posted data.

3. In case validation fails you have to explicitly a. Set all values back to the corresponding text boxes from posted data b. Show error message.

(Using Ajax is an alternate method. Here I was trying to explain the manual work need to be done with classic ASP)

Visual in Web In internet world there was no place for Event driven programming. It works on request/response pattern. End user will make a request to server with the help of a client application called browser.

1. End user puts URL of the application in the address bar and press enter. It will make GET request to server.

2. Server will send back the response.

3. Response can be anything. It can be an image, a simple text or may be complex HTML. 4. If response is HTML and if it contains some submit buttons, when user click it, it will make a new POST request to server.

5. Server will send the response again.

This entire communication happens with the help of HTTP protocol.

One thing which we should know about HTTP protocol is, it’s stateless. Server will treat every request as the new request. Once the response is sent back it will just forget about the request.

Finally Microsoft came up with something called ASP.NET Web Forms, considering rapid application development and easy learning in priority.

What is ASP.NET? ASP.NET is a Microsoft’s Web application framework built on Common language runtime for building dynamic web sites using one of the programming languages like C#, VB.NET etc.

It supports 2 models Web Forms and ASP.NET MVC.

What is Web Forms?

Microsoft first brought up ASP.NET Web Forms which solved lots of problems in classic ASP.It simply created higher level abstraction over stateless web and simulated stateful model for Web developers.

It introduced two new concepts  Self-postback (send post requestto same page)  ViewState (maintain control values during postbacks) are introduced.

And the most interesting part is it’s not required to write even a single line of code.

With Web Forms Microsoft tried to bring the Visual Basic model into web.

10

Learn MVC step by step

Let’s talk about advantages and disadvantages of Web Forms.

Advantages: 

Rich server controls. o

o

While working with pure HTML you might have noticed, Things are not always same at all place.

A UI which looks great in IE might distract in Firefox or vice versa.

ASP.NET has a support for Rich Server Controls which detects the browser and generates html (sometimes JavaScript too)based on browser capability.

Server controls alsoincludes some controls like GridView and ListView whose data binding capabilities reduces lots of efforts and codes being written.



Support for ViewState–Stateless nature of HTTP normally clear values in the controls between multiple requests. But in Web Forms statefulness is achieved by storing last known state of every control within the client page itself in the form of hidden field called ViewState.



Event driven programming With the help of a) Code behind b) Self postback c) ViewState Microsoft introduced event driven programming in internet world.



Developer will no more rely on POST, GET methods for handling user interactions with server.

For example she/he will drag control say button to page, just double click it to generate the code block for handling user’s click on server, write down the logic inside it. That’s it. She/he is not concerned with what happens inside.

Rapid application development I don’t think any explanation is required for this. Rich server controls, Event driven model and ViewState increases the development speed by great extent, Developer will be abstracted from lots of the background complexities.

Less learning effort.

Using strong server controls and ViewState developer can develop real world applications with minimal HTML and JavaScript skills.

Disadvantages: 

Unit Testing In Web Forms code behind ends up with lots of event handlers, making automatic unit testing an impossible task.

When we talk about employing TDD, unit testing code behind (presentation logic) becomes very important.

11

Learn MVC step by step



Project Architecture



There is no fixed predefined Project Architecture for creating web applications when it comes to Web Forms.

Developers have full flexibility for choosing their own architecture.

One may use basic three layered architecture dividing the system into UI, Business layer and Data access layer or may go with an advanced one like Model-View-Presenter. Even one may choose only code behind and write everything there which is not at all considered as good practice.

Performance ViewState became solution for some problems in classic ASP but it also brought up one new trouble. ViewState is stored in the page itself effecting page size which in turn effects performance.

Reusability Look at these examples I.





II.Let’s say wewant to build 2 User screens – 1. Taxable Employee screen 2.

Nontaxable employee screen Now most of the code behind logic is going to be same for both screens One solution will be, add some if conditions in code behind and create a single UI. This will violate SRP (Single Responsibility principle).

SRP says there should be only one reason because of which a software entity should get changed.

In above example employee form will be changed whenever any of the taxable/nontaxable information changes.

Less Control over HTML In Web Forms many times we are not sure about what html we will get at the end making integration with JavaScript frameworks like jQuery a difficult task.

12

Learn MVC step by step



SEO



URL’s are pointing to fixed ASPX pages which might be decorated with some query string. They are not user friendly and affect SEO. Less support for parallel development ASPX page are tightly coupled with code behind files. So it’s not possible for 2 different developers towork on one section (one on aspx and one on code behind) at same time.

ASP.NET 4.0 In ASP.NET 4.0 some good features were introduced to overcome some of the above problems  VewState: Provide the way to disable or control the size of the ViewState.  URL routing: Using URL routing we can provide our own URL in lieu of the physical path of the page.  ID: Now we have better control over Id of elements and thus integration with JavaScript framework become easier.

Even after the evolution of the revolutionary features of ASP.NET, 1. It was still not able to solve the problems of unit testing 2. We got some control over ID of elements, but not complete control over HTML.

What is MVC? MVC is an architectural pattern which is has been around for sometimes now. Many are using it including Java. It’s not a new concept which Microsoft brought up. Before we go and talk about ASP.NET MVC lets clear out some terminologies.

Patterns In simple words Pattern is a solution to a problem in a context.

Architectural Patterns Architectural Pattern is something which solves our problem at sub system level/module level. It deals with the problem related to architecture of a project. It explains us,  What all components should be there is the system? (Like UI, BAL,etc.)  How every component interact with each other?  What will be the entry point?

MVC When we talk about application we will be having input logic, business logic and UI logic and MVC is an architectural pattern which let us develop an application having loosely coupling between each of these elements.

The main intention behind MVC pattern is separation of concerns. It makes presentation (UI) ignorant of business and user interaction logic.According to MVC system should be divided as M (Model), V (View) and C (Controller). 

Model is considered as smart and handles the

Business rules, logic and data and will be independent of other parts of MVC (controller and View). 

Controller receives and dispatches the request in

short it handles the user interaction and input logic. It knows about both Model and View. 

View is considered as dumb and is an output representation of model data. It may be an excel sheet, a web page showing list of records or just a simple text. View knows about only Model.

13

Learn MVC step by step

What is ASP.NET MVC? 

ASP.NET MVC is a Microsoft’s second Web application framework designed with separation of concerns and testability in mind. It is built on CLR and completely based on MVC.  ASP.NET doesn’t have support for ViewState and server controls, so we get feel of old web here.

Let’s talk about Advantages and disadvantages of ASP.NET MVC

Advantages:  









 

Project architecture- One of the advantages of using ASP.NET MVC is it enforces separation of concerns.

Performance-ASP.NET MVC don’t have support for view state, so there will not be any automatic state management which reduces the page size and so gain in performance.

Test Driven development and ReusabilityIn MVC, controller is an independent class, so automatic testing is possible featuring Test Driven Development Full control over HTMLASP.NET MVC doesn’t support server controls, only option available is using html input controls, so we will have assurance aboutthe html getting rendered at the end and about the ‘id’ of every element. It makes integration with third party JavaScript libraries (like jQuery) easy.

Support for parallel developmentIn ASP.NET MVC layers are loosely coupled with each other, so one developer can work on Controller, at the same time other on View and third developer on Model. This is called parallel development.

SEO, URL routing and RESTRich routing features lets treat every URL as a resource supporting RESTful interfaces.

Also user-friendly and readable URL improves SEO. ExtensibilityASP.NETMVC supports multiple view engines like aspx, razor and if required we can create our own.

Existing ASP.NET Features-ASP.NET MVC framework is built on top of matured ASP.NET framework and thus provides developer to use many good features such as forms authentication, windows authentication, caching, session and profile state management etc.

Disadvantages: 

More learning effortAbsence of event driven programming model and ViewState makes ASP.NET MVC a very difficult framework for developers with no or little experience in web application development.

How ASP.NET MVC works 1.

2.

3.

4.

User makes the request for some resource in server (by putting some URL in the browser).

Request comes to controller first (routing engine is the one who is responsible for deciding which request will be handled by which controller. In this article we won’t talk in depth about this behavior).

Controller if required talk to model for data.

Model operates on database (or on some other data sources) and return data to controller.

14

Learn MVC step by step

5.

6.

7.

Controller chooses the appropriate view (like say Customer view which will may contain some html tables, drop downs, textboxes…).

Controller passes the data (model data retrieved in step 4) to chosen view (in step 5), where data will be populated as per convenience.

Controller sends back view to the user.

(This was for get request, same happens for post. Only instead of putting URL in the browser user will do some action on already requested page and flow start with controller.)

Why ASP.NET Web Forms and Why ASP.NET MVC? Each can be the “best choice” for a particular solution depending on the requirements of the application and the background of the developers involved. What to choose & when has more to do with business prospective than which one is better than other.

Two important factors you should consider while making the choice is 1. Rapid application developmentWhen we want to develop something rapidly ASP.NET Web Forms is the best choice.

2. Unit testingor HTML-When automatic unit testing is the most important factorMVC is best.When our organization has a group of talented HTML developers who will make UI for applications independently and we have to integrate that UI to our final dynamic application, MVC is best, because in MVC we will get complete control over HTML. Other than these, what you can do is, write down all your project requirement and try to compare them with Pros and Cons of both Web Forms and MVC and if possible try to ask yourself some questions and point MVC and Web Forms accordingly.

Example 1. Does your team have good experience with Web Forms or Windows Forms?

If yes then developers are already used to with ViewState and event driven programming now and migration to MVC will be a difficult task.1 point to Web Forms.

2. Does your team have experience on ASP or non-Microsoft technologies such as android, IOS, JSP, RORor PHP? MVC is a general architecture and so many are using it. Android, IOS, etc. by default works on MVC platforms.

In some web application development environment like PHP, JSP same request/response pattern is followed. Having experience in one or more such technology will add one extra point to ASP.NET MVC. 3. Is JavaScript going to be used extensively?

If Yes, MVC gets the point because you get complete control over HTML. 1 point to ASP.NET MVC. 4. Looking for good performance?

If yes, 1 point to ASP.NET MVC. 5. Planning to reuse the same input/user interaction logic across multiple UI? If yes, 1 point to MVC.

Conclusion I think you should have equipped with enough information to make a decision what is best for your project. The complete decision depends on your team and project requirement.

What’s next?

I think by now you would have got clear idea about Web Forms and MVC. So what’s next? Let’s do a step by step demo on MVC and let’s learn MVC from scratch. We will cover total 21 Labs. With each lab we will reach to a different level in MVC. You can also find some videos about same labs in the DVD. Hope you will enjoy this journey. Wish you all the best.

Pre-requisite for MVC Before we start the day lets ensure that you have all the ingredients to create a MVC application.  

Visual Studio 2010 or the free Visual Web Developer 2010 Express. These include ASP.NET MVC 2 template by default.

Visual Studio 2008 SP1 (any edition) or the free Visual Web Developer 2008 Express with SP1. These do not include ASP.NET MVC 2 by default. You must also download and install ASP.NET MVC 2 from http://www.asp.net/mvc/ .

15

Learn MVC step by step

So once you have all your pre-requisite it’s time to start with the first lab.

Lab1:- Creating a simple hello world ASP.NET MVC Application In this lab we will create a simple hello world program using MVC template.

  

We will create a simple controller Attach the controller to simple index.aspx page View the display on the browser.

Step1:- Create project Create a new project by selecting the MVC 2 empty web application template as shown in the figure.

Once you click ok, you have a readymade structure with appropriate folders where you can add controllers, models and views.

Step 2:- Add controller So let’s go and add a new controller as shown in the figure.

Once you add the new controller you should see some kind of code snippet as shown in the below snippet. public class Default1Controller : Controller { // GET: /Default1/ public ActionResult Index() { return View(); } }

16

Learn MVC step by step

Step 3:- Add View Now that we have the controller we need to go and add the view. So click on the Index function which is present in the control and click on “add view” menu as shown in the below figure.

“Add view” pops up a modal box to enter view name which will be invoked when this controller action is called as shown in the figure below. For now keep the view name same as the controller name and also uncheck the master page check box.

Once you click on the ok button of the view, you should see a simple ASPX page with the below HTML code snippet. In the below HTML code snippet I have added “This is my first MVC application”. <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Index</title> </head> <body> <div> This is my first MVC application </div> </body> </html>

Step 4:- Run the application If you do a CNTRL + F5 you should see an error as shown in the below figure. This error is obvious because we have not invoked the appropriate controller / action.

If you append controller and action name on the URL you should be able to see the proper view.

Lab2:- Passing data between controllers and views Now that we have created a simple MVC hello world, it’s time to see how we can pass data from controllers to views.

The controller gets the first hit and loads the model. Most of the time we would like to pass the model to the view for display purpose.

As an ASP.NET developer your choice would be to use,  Session variables  View state  Or some other ASP.NET state management mechanism like application object, cache, etc.

The problem with these object is the scope. ASP.NET session objects have session scope and view state has page scope. For MVC we would like to see scope limited to controller and the view. In other words we would like to maintain data when the hit comes to controller and reaches the view and after that the scope of the data should expire.

17

Learn MVC step by step

Thatâ&#x20AC;&#x2122;s where the new session management technique has been introduced in ASP.NET MVC framework i.e. ViewData.

Step1:- Create project and set view data So the first step is to create a project and a controller. In the controller set the viewdata variable as shown in the below code snippet and kick of the view. public class DisplayTimeController : Controller { // GET: /DisplayTime/ public ActionResult Index() { ViewData["CurrentTime"] = DateTime.Now.ToString(); return View(); } }

Step 2:- Display view data in the view.

The next thing is to display data in the view by using the percentage tag. One important point to note is the view does not have a behind code. So to display the view we need to use the <%: tag in the aspx page as shown in the below code snippet. <body> <div> <%: ViewData["CurrentTime"] %> </div> </body>

So whatâ&#x20AC;&#x2122;s in the next Lab? So now that we know how to pass data using view data, the next lab is to create a simple model and see all the 3 components MVC (i.e. model, view and controller) in action.

Lab3:- Creating a simple model using MVC In this lab we will create a simple customer model, flourish the same with some data and display the same in a view.

Step1:- Create a simple class file The first step is to create a simple customer model which is nothing but a class with 3 properties code, name and amount. Create a simple MVC project, right click on the model folder and click on add new item as shown in the below figure.

From the templates select a simple class and name it as customer.

Create the class with 3 properties as shown in the below the code snippet. public class Customer { public string Code {set;get;} public string Name {set; get;} public double Amount {set; get;}

18

Learn MVC step by step

}

Step2:- Define the controller with action The next step is to add the controller and create a simple action display customer as shown in the below code snippet. Import the model namespace in the controller class. In the action we created the object of the customer class, flourished with some data and passed the same to a view named as “DisplayCustomer”. public class CustomerController : Controller { ….. …. public ViewResult DisplayCustomer() { Customer objCustomer = new Customer(); objCustomer.Id = 12; objCustomer.CustomerCode = "1001"; objCustomer.Amount = 90.34; return View("DisplayCustomer",objCustomer); } }

Step3:- Create strongly typed view using the class We need to now join the points of MVC by creating views. So right click on the view folder and click add view. You should see a drop down as shown in the figure. Give a view name, check create a strongly typed view and bind this view to the customer class using the dropdown as shown in the figure.

The advantage of creating a strong typed view is you can now get the properties of class in the view by typing the model and “.” as shown in the figure.

Below is the view code which displays the customer property value.

We also have if condition which displays the customer as privileged customer if above 100 and normal customer if below 100. <body> <div> The customer id is <%= Model.Id %><br /> The customer Code is <%= Model.CustomerCode %><br /> <% if (Model.Amount > 100) {%> This is a priveleged customer <% } else{ %> This is a normal customer <%} %> </div> </body>

Step 4:- Run your application Hitcontrol + F5 and pat yourself for one more lab success.

19

Learn MVC step by step

Lab 4:- Creating simple MVC data entry screen Every project small or big needs data entry screens. In this lab we will create a simple customer data entry screen as shown in the figure using MVC template.

Step1:- Creating your data entry ASPX page The first step is to create the data entry page using the simple HTML form action tag as shown in the below code snippet. One thing which we should notice is, action is pointing to the controller action i.e. ‘DisplayCustomer’. <form action="DisplayCustomer" method="post"> Enter customer id :- <input type="text" name="Id" /><br /> Enter customer code :- <input type="text" name="CustomerCode" /><br /> Enter customer Amount :-<input type="text" name="Amount" /><br /> <input type="submit" value="Submit customer data" /> </form>

Step2:- Creating the controller Below is the code snippet of displaycustomer which flourishes the customer object by collecting data from request.form and sends the object to the view ‘displaycustomer. public class CustomerController : Controller { ….

[HttpPost] public ViewResult DisplayCustomer() { Customer objCustomer = new Customer(); objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString()); objCustomer.CustomerCode = Request.Form["Id"].ToString(); objCustomer.Amount =Convert.ToDouble(Request.Form["Amount"].ToString()); ; return View("DisplayCustomer", objCustomer); } }

Step3:- Create the view to display the customer object (Same as Lab 3)

Step 4:- Finally run the project Final step is to run the project and see the output.

(You should be also able to test above 100 and below 100 scenarios)

Lab 5:- using HTML helper to create views faster Now there are two big issues with above lab: The complete HTML code was written manually. In other words, less productive. It’s like going back to dark ages where developers used to write HTML tags in notepad. <form action="DisplayCustomer" method="post">

20

Learn MVC step by step

Enter customer id :- <input type="text" name="Id" /><br /> Enter customer code :- <input type="text" name="CustomerCode" /><br /> Enter customer Amount :-<input type="text" name="Amount" /><br /> <input type="submit" value="Submit customer data" /> </form>



Lots of manual code was written in the controller to flourish the object and send data to the MVC view.

public class CustomerController : Controller { …

[HttpPost] public ViewResult DisplayCustomer() { Customer objCustomer = new Customer(); objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString()); objCustomer.CustomerCode = Request.Form["Id"].ToString(); objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ; return View("DisplayCustomer", objCustomer); } }

In this lab we will see how to use MVC HTML helper classes to minimize the above manual code and increase productivity.

Step 1:- Create the Customer class Create a simple customer class, please refer Lab 5 for the same.

Step2:- Creating the input HTML form using helper classes HTML helper classes have readymade functions by which you can create HTML controls with ease. Go to any MVC view and see the intellisense for HTML helper class you should see something as shown in the figure.

By using HTML helper class you can create any HTML control like textbox, labels, list box etc. just by invoking the appropriate function.

In order to create the form tag for HTML we need to use “Html.BeginForm”. <% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post)) {%> -- HTML input fields will go here <%} %>

The above code will generate the below HTML <form action="DisplayCustomer" method="post"> ….. ….. </form>

The HTML helper’s “beginform” takes three input parameters action name (Method inside the controller), controller name (actual controller name) and HTTP posting methodology (Post or GET).

If you want to create a text box, simply use the “TextBox” function of html helper class as shown in the below code. In this way you can create any HTML controls using the HTML helper class functions.

Enter customer id :- <%= Html.TextBoxFor(x=>x.Id)%><br />

The above code snippet will generate the below HTML code.

Enter customer id :- <input type="text" name="Id" /><br />

21

Learn MVC step by step

To create a data entry screen like the one shown in figure we need to the use the below code snippet. <% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post)) { %> Enter customer id :- <%= Html.TextBoxFor(x=>x.Id)%><br /> Enter customer code :- <%= Html.TextBoxFor(x=>x.CustomerCode) %><br /> Enter customer Amount :- <%= Html.TextBoxFor(x=>x.Amount) %><br /> <input type="submit" value="Submit customer data" /> <%} %>

Step 3:- Create a strong typed view by using the customer class So once you have created the view using the HTML helper classes it’s time to attach the customer class with view, please refer lab 5 for the same.

Step4:- Creating the controller class.

The final thing is the controller code. The controller code now becomes very simple. The customer objectwill be auto flourished as we have used the HTML helper classes. You will create the controller class as we did in Lab 4 but we do not need to write any kind of code for connecting the HTML screens with controller, it’s all hidden and automated.

[HttpPost] public ActionResult DisplayCustomer(Customer obj) { return View(obj); }

Enjoy your output for different condition of customer amount entered.

Mode HTML Element Helpers for your reference:          

Html.TextBoxFor() Html.TextAreaFor() Html.DropDownListFor() Html.CheckboxFor() Html.RadioButtonFor() Html.ListBoxFor() Html.PasswordFor() Html.HiddenFor() Html.LabelFor()

Html.BeginForm

Lab 6:- Unit test MVC projects Just a quick recap, if we need to unit test the method “BtnSave_click” (written in the ASP.NET code behind), we have the following problems:   

How do we create the sender and EventArgs object?

The code runs under HttpContext object, how do I mimic them?

What about ASP.NET UI controls, how do I access them?

What about other ASP.NET object like session object, application, how do I access them?

Note - Many developers would talk about mock test, rhino mocks etc. but still its cryptic and the complication increases with session variables, view data objects, ASP.NET UI controls creating further confusion.

22

Learn MVC step by step

So what we will do in this section is we will create a simple MVC application and we will do unit using VSTS unit test framework.

Step1:- Create the simple display customer screen project The first step is to create a simple MVC project. We will use the same project which we have discussed in Chapter 2.

The controller class at the end of the day is a simple .NET class. For instance if you watch your project code closely, you can easily see the customer controller class as shown below. public class CustomerController : Controller { .... public ViewResult DisplayCustomer() { Customer objCustomer = new Customer(); objCustomer.Id = 12; objCustomer.CustomerCode = "1001"; objCustomer.Amount = 90.34; return View("DisplayCustomer",objCustomer); } }

In simple words because this is a simple .NET class we can easily instantiate the class and create automated unit tests for the same. Thatâ&#x20AC;&#x2122;s what exactly we are going to do in our next steps.

Step 2:- Add a simple unit test project Letâ&#x20AC;&#x2122;s use our VSTS unit test framework to test the controller class.

Note:In case you are a complete fresher to VSTS unit testing we would request to see the basic unit testing video from the DVD where we have discussed how to unit test the simple .net class library.

Step 3:- Add appropriate project references We need to add reference to the MVC application in our unit test project so that we can get hold of the controller class.

Once you add the references you should see MVC application in your project references

the as

23

Learn MVC step by step

shown in the below figure.

Step 4:- Write the unit test Once you have added the references open the unit test class i.e. ‘UnitTest1.cs’. In this class, create a simple test method called as ‘DisplayCustomer’ which is attributed by ‘TestMethod’ attribute as shown in the code snippet.

Inside Test Method we are creating object of the controller class, invoking the controller action i.e. ‘DisplayCustomer’ and then checking if the view name is ‘DisplayCustomer’. If they are equal that means the test passes or else it fails.

[TestMethod] public void DisplayCustomer() { CustomerController obj = new CustomerController(); var varresult = obj.DisplayCustomer(); Assert.AreEqual("DisplayCustomer", varresult.ViewName); }

Step 5:- Finally run the unit test It’s time to run the test case by clicking on menu Test>>windows and then clicking test view.

On the test view right click on the test and run the selected test case as shown in the figure.

If everything goes well you should see green color indicating that the test has passed or else you should see a red color with details regarding why the test failed.

Lab 7:- Understanding MVC outbound URLs Introduction When we talk about web applications end users would like to navigate from one page to other page. So as a simple developer your first thought would be to just give page names as shown in the figure.

So for example if you want to go and browse from home.aspx to about.aspx give the anchor hyper link page name and things should be fine.

By doing that you are violating MVC principles.

MVC principle says that hit should first come to the controller but by specifying <a href=”Home.aspx”> the first hit comes to the

24

Learn MVC step by step

view. This bypasses your controller logic completely and your MVC architecture falls flat.

Ideally the actions should direct which page should be invoked. So the hyperlink should have actions in the anchor tags and not the page names (view name).

Step 1:- Create views Let’s create three views as shown in the below figure “Home”, “About” and “Product”.

Step 2:- Create controller for the views Next step is to define controller actions which will invoke these views. In the below code snippet we have defined 3 actions “GotoHome” (for home view), “AboutUs” (for about view) and “SeeProduct” (for product view). public class SiteController { public ActionResult public ActionResult public ActionResult }

: Controller GotoHome(){return View("Home");} AboutUs(){return View("About");} SeeProduct(){return View("Product");}

Step 3:- Provide actions in the link To invoke the actions rather than the views we need to specify the actions in the anchor tag as shown in the below code snippet.

This is products <a href="GotoHome">Go Home</a><br /> <a href="Aboutus">About us</a><br />

If you want to create the anchor links using the HTML helper classes you can use the action link function as shown in the below code snippet. <%= Html.ActionLink("Home","Gotohome") %>

The above code was for the products page, you can do the same type of navigations for the about us and the home page.

This is About us <a href="GotoHome">Go Home</a><br /> <a href="SeeProduct">See Product</a><br /> This is home page <br /> <a href="SeeProduct">See Product</a><br /> <a href="Aboutus">About us</a><br />

Step 4:- Enjoy your navigation Execute the application and enjoy your navigationbetween home, about and product page.

25

Learn MVC step by step

Lab 8:- Understanding MVC routing Introduction MVC Routing helps us to provide simplified and custom URL. MVC URL naming convention by default depends on Controller class names and action names. If you see the previous labs of MVC the way we were invoking MVC pages was by typing “ControllerName/ActionName”.

So for example if we have a controller class with name “clsProductDetails” and action as “getProduct” , your URL ends up with a format http://localhost/clsProductDetails/getProduct . Now how user friendly is that URL for simple end users? - It is absolutely not.

MVC routing maps your browser URL request to the controller’s and actions. So when any request is sent to a MVC site it first hits the routing collection and then depending on the values of URL appropriate controller and action is invoked. By default MVC has a route collection defined which maps the URL to default controller and action name.

Let’s go step by step exploring first the default routes provided and in the later steps we will customize the URL structure with user friendly URL names.

Step 1:- Open the Global.asax.cs file To see default mapping code, let’s take the same customer project we had discussed in the previous section and open the “global.asax.cs”.

You will see the below code which specifies default mappings:routes.MapRoute( "Default", // Parameter 1 "{controller}/{action}/{id}", // Parameter - 2 new { controller = "Home", action = "Index", id = UrlParameter.Optional }// - Parameter - 3 );

Let us try to understand the above default code:routes.MapRoute :- “routes” is a global collection in which all routes are stored. This collection belongs to the namespace “System.Web.Routing”. To add a route to the routes collection we need to use the “maproute” function. “maproute” function needs three parameters to add a route to the collection route name ( name) , structure of the URL ( url) and controller / action mapping.

Parameter 1, Route key name: - The first value in the “maproute” function is the key name (name). This value identifies the map in the collection using this keyname. This name should be unique throughout the collection.

Parameter 2, Route structure: - The second value in the “maproute” is the route structure. By default the value is "{controller}/ {action}/ {id}". This indicates that the user needs to send URL exactly like controller class name and action method name. The last “Id” indicates that it can have input values as well.

Parameter 3, Controller and actions: - The third value specifies the controller class name and the action name which will invoked depending on the URL structure provided. To provide controller and action names we need to specify “new ,controller = "Home", action = "Index", id = UrlParameter.Optional}”. In this syntax the controller specifies the controller name, action specifies the action name and id specifies whether this parameter is compulsory or optional.

26

Learn MVC step by step

Step 2:- Customizing the URL’s In our current project we are calling the “Customer” controller and the “DisplayCustomer” action using http://localhost/Customer/DisplayCustomer. Let’s say we want to customize this URL structure to more friendly structure like http://localhost/View/ViewCustomer/. To achieve the same we need to change the parameter 2 in the above format. routes.MapRoute( "View", // Route name "View/ViewCustomer/{id}", // -- parameter 2 new { controller = "Customer", action = "DisplayCustomer", id = UrlParameter.Optional }); // Parameter defaults

Below is the action function “DisplayCustomer” which will be invoked. public ViewResult DisplayCustomer() { Customer objCustomer = new Customer(){Id = 12,CustomerCode = "1001,Amount = 90.34}; return View("DisplayCustomer",objCustomer); }

Step 3:- Run the application If you run the application with above defined URL structure you should see the below display.

So what’s in the next Lab In the next lab we will discuss how to validate MVC URL. All actions to MVC come via MVC URL and even data is fed via MVC URL. So in the next section we will see how we can validate the data passed in the MVC URL.

Lab 9:- Validating and setting default values to MVC URLS In the previous lab we have seen how to simplify the URL structure. But with simplified URL structure we would also like to put validations. For example for this URL http://localhost/Customer/ViewCustomer/1001 we would like to ensure that “customercode” – “1001” as numeric .In other words anyone entering a MVC URL like http://localhost/Customer/ViewCustomer/Shiv is invalid.

MVC framework provides a validation mechanism by which we can check on the URL itself if the data is appropriate. In this lab we will see how to validate data which is entered on the MVC URL.

Step 1:- Create a simple customer model The first is to create a simple customer class model which will be invoked by the controller. public class Customer { public int Id { set; get; } public string CustomerCode { set; get; } public double Amount { set; get; } }

Step 2:- Create the controller class The next step is to create a simple controller class which has a collection of customer model object which was created in step 1. public class CustomerController : Controller { List<Customer> Customers = new List<Customer>(); public CustomerController() { Customer obj1 = new Customer(); obj1.Id = 12; obj1.CustomerCode = "1001"; obj1.Amount = 90.34;

27

Learn MVC step by step

Customers.Add(obj1); obj1 = new Customer(); obj1.Id = 11; obj1.CustomerCode = "1002"; obj1.Amount = 91; Customers.Add(obj1); } [HttpGet] public ViewResult DisplayCustomer(int id) { Customer objCustomer = Customers[id]; return View("DisplayCustomer",objCustomer); } }

The controller has a simple ‘DisplayCustomer’ function which displays the customer using the ‘id’ value. This function takes the ‘id’ value and looks up through the customer collection. Below is the downsized reposted code of the function.

[HttpGet] public ViewResult DisplayCustomer(int id) { Customer objCustomer = Customers[id]; return View("DisplayCustomer",objCustomer); }

If you look at the ‘DisplayCustomer’ function it takes an ‘id’ value which is numeric. We would like put a validation on this id field with the following constraints: Id should always be numeric.



It should be between 0 and 99.

We want the above validations to fire when the MVC URL is invoked with data.

Step 3:- Apply validation using regex on the MVC routes The validation described in the step 2 can be achieved by applying regular expression on the route map. If you go to global.asax file and see the maproute function on the inputs to this function is the constraint as shown in the below figure.

So in order to accommodate the numeric validation we need to the specify the regex constraint i.e. ‘\d,1,2-’ in the ‘maproute’ function as shown below. ‘\d,1,2-’ in regex means that the input should be numeric and should be maximum of length 1 or 2 , i.e. between 0 to 99.

You can specify default values by saying id=0 as shown in the below code snippet. So just in case if someone does not specify the value to the id it will take the value as zero by default. routes.MapRoute( "View", // Route name "View/ViewCustomer/{id}", // URL with parameters new { controller = "Customer", action = "DisplayCustomer", id = 0 }, new { id = @"\d{1,2}" }); // Parameter defaults

Step 4:- Test if it works So now that we are done with the validation using the ‘maproute’ functions, it’s time to test if these validations work.

So in the first test we have specified valid 1 and we see that the controller is hit and the data is displayed.

28

Learn MVC step by step

If you try to specify value more than 100 you would get error as shown below. Please note that the error is confusing but it’s the effect of the regex validation which is specified on the maproute function.

If you try to specify a non-numeric value you should again get the same error which confirms that our regex validation is working properly.

The most important point to note is that these validations are executed even before the request reaches the controller functions.

Lab 10:- Partial views When we talk about web application reusability is the key. So as a MVC developer we would like to create reusable views. For instance we would like to create reusable views like footer and header views and use them inside one big MVC view.

Reusable views can be achieved by creating “Partial views”.

Step 1:- Create a simple view with controller The first step would be to create a simple view with a controller. You can see from the below snapshot, I have created a simple view called as “Index.aspx” which will be invoked via “Homecontroller.cs”.

Step 2:- Create a simple partial view Now that we have created the main view it’s time to create a partial view which can be consumed inside the “Index” view. In order to create a partial view , right click on the view folder and mark the check box “Create a partial view” as shown in the below figure.

Step 3:- Put something in partial view Put some text or logic in your partial view. <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %> This is reusable view

Step 4:- Call the partial view in the main Finally call the partial view in the main view using “Html.RenderPartial” function and pass the view name in the function as shown in the below code snippet. <body> <div> <% Html.RenderPartial("MyView"); %> </div> </body>

Also ensure that the partial view is in the same folder where your main view is. In case it’s not then you need to also pass the path in the “RenderPartial” function. You can see in the below figure I have moved the partial view in the main “Views” folder.

29

Learn MVC step by step

Step 5:- Run the program and see the action.

Finally do a CNTRL + f5, put the proper controller path and see your hard work result. Below is the snapshot of how things should look like.

Lab 11:- Validation using Data Annotation Validating data is one of the key things in any web application. As a developer you would like to run validation both on the client side (browser) and also on the server side.

So you would probably like to write the validation once and then expect the validation framework to generate the validation logic on both the ends.

Good news, In MVC this is possible by using data annotations.

In MVC you validate model values. So once the data comes inside the model you would like to question the model saying, is the data provided proper? Are values in range? etc.

Data annotations are nothing but the metadata which you can apply on the model and the MVC framework will validate using the metadata provided.

In this lab let’s enforce validation by using data annotation. So the first thing is use Lab 4 and create a simple model and a strong typed data entry view.

So assuming you have created the model and the strong typed view, let’s start applying data annotations.

Note: - The view created should be a strong typed view.

Step 1:- Decorate model with data annotation Import the data annotation namespace as shown in the code snippet below. using System.ComponentModel.DataAnnotations;

Let say we have a customer model and we want to ensure that the customer code field is compulsory. So you can apply attribute “Required” as shown in the below code snippet. If the validation fails and you would like to display some error message, you can pass the “ErrorMessage” also. public class Customer { [Required(ErrorMessage="Customer code is required")] public string CustomerCode { set; get; } }

Step 2:- Change the ASPX code Now there are some code changes we would be doing in the ASPX code as compared to our previous lab. Inside the body we would like to display error message if the data is not proper. This is done by using the below code snippet. <%= Html.ValidationSummary() %>

We also need to our HTML form to input data. Below is the code snippet for the same <% using (Html.BeginForm("PostCustomer", "Home", FormMethod.Post)) { %> <%=Html.TextBoxFor(m => m.CustomerCode)%> <%=Html.ValidationMessageFor(m => m.CustomerCode)%> <input type="submit" value="Submit customer data" /> <%}%>

30

Learn MVC step by step

Step 3:- Enable Client validation As said previously we would like to fire validation on both server and client side. In order to fire validations on the client side, we need to refer three JavaScript files as shown in the below code snippet. <head runat="server"> <script src="<%= Url.Content("~/Scripts/jquery-1.5.1.js") %>" type="text/javascript"></script> <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script> <script src="<%= Url.Content("~/Scripts/jquery.validate.unobtrusive.js") %>" type="text/javascript"></script> <% Html.EnableClientValidation(); %> </head>

Also note the call to “EnableClientValidation” method due to which client side validations are enabled. <% Html.EnableClientValidation(); %>

Step 4:- Write your controller logic From the UI when the form calls a post on the controller, you would like to know if the model state is proper or not. This can be done by checking the “ModelState.IsValid” property. So if this property is valid then call the save method and call the thanks view or else go back to the customer view.

[HttpPost] public ActionResult PostCustomer(Customer obj) { if (ModelState.IsValid) { obj.Save(); return View("Thanks"); } else { return View("Customer"); } }

Step 5:- Run your application to see the action Finally run your application and see the data annotation in action.

Summary of other data annotation attributes There are other data annotation attributes which makes complex validation a breeze. Below are list of some of them:If you want to check string length, you can use “StringLength”.

[StringLength(160)] public string FirstName { get; set; }

In case you want to use regular expression, you can use “RegularExpression” attribute.

[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")] public string Email { get; set; }

If you want to check whether the numbers are in range, you can use the “Range” attribute.

[Range(10,25)] public int Age { get; set; }

Some time you would like to compare value of one field with other field, we can use the “Compare” attribute. public string Password { get; set; } [Compare("Password")] public string ConfirmPass { get; set; }

31

Learn MVC step by step

In case you want to get a particular error message, you can use the “Errors” collection. var ErrMessage = ModelState["Email"].Errors[0].ErrorMessage;

If you have created the model object yourself you can explicitly call “TryUpdateModel” in your controller to check if the object is valid or not.

TryUpdateModel(NewCustomer);

In case you want add errors in the controller you can use “AddModelError” function.

ModelState.AddModelError("FirstName", "This is my server-side error.");

Lab 12:- MVC 3:- Razor Change is a part of human life and same stands true for MVC as well.In this lab we will leave Aspx view engine in the behind and start with razor, In case you have not installed MVC 3 template, you can get it fromhttp://www.asp.net/mvc/mvc3

Developers demanded for a clean, light weight view and with less syntactic noise: - Answer was RAZOR. So let’s create a simple lab to demonstrate use of Razor views.

Step 1:- Install MVC 3 and create a project using the same Install MVC 3 template from http://www.asp.net/mvc/mvc3and create a project selecting the MVC 3 template below.

Step 2:- Select Razor The next screen which pops up what kind of application you want to create.  

The Empty option creates a project with least amount of files.

The Internet Application option creates a shell application which includes user registration and authentication, navigation, and a consistent visual style.  The Intranet Application option is very much same as Internet Application with the only difference that the authentication takes place through domain/Active Directory infrastructure.

For now let’s keep life simple and let’s select the empty option. The second thing which we need to select is what kind of view we want, so let’s select Razor and move ahead.

Once the project is created you can see the Razor file with the name “.cshtml”. Now the “_ViewStart” page is nothing but it’s a common page which will be used by views for common things like layouting and common code.

32

Learn MVC step by step

Step 3:- Add a view and invoke the same from controller.

Now go ahead and add a new view and invoke this view from the controller. Adding and invoking the view from controller remains same as discussed in the previous labs. Just remember to select the view as Razor view. public class StartController : Controller { // // GET: /Start/ public ActionResult Index() { return View("MyView"); } }

Step 4:- Practice Razor syntaxes Now that we have the basic project and view ready lets run through some common razor syntaxes and try to get a feel how easy RAZOR is as compared to ASPX views.

Practice 1:- Single line code If you want to just display a simple variable you can do something as shown below. All razor syntaxes start with @. If you have just single line of code you do not need “,“. Razor figures out the ending logically.

Todays date

@DateTime.Now

If you compare the above syntax with ASPX view you need to type the below code, so isn’t the syntax much simpler, neat and light weight. <%= DateTime.Now%>

Practice 2:- Multiple lines of code If you have multiple line of code you can use “@” followed by “,“as shown in the below code snippet. @{ List<string>MyCollections = new List<string>(); obj.Add("Mumbai"); obj.Add("Pune"); obj.Add("Banglore"); obj.Add("Lucknow"); }

Practice 3:- For each loop and IF conditions For loops and if conditions again become simpler as shown in the below lines of code. @foreach (string MyString in MyCollections) { <b>@MyString</b><br /> }

@if (DateTime.Now.Year.Equals(2011)) { // Some code here }

33

Learn MVC step by step

Practice 4:- Do not worry about @ If you are thinking that razor will get confusedbetween“@ of Razor” and “@ of your email address” then you are wrong. For example in the below code razor will execute first line as a code and second line as an email address. @DateTime.Now questpond@yahoo.com

Practice 5:- To display @ In case you want to display “@” just type it twice as shown in the below code snippet the display will be something as shown in the image below.

Tweet me @@Shivkoirala

Practice 6:- HTML display with razor In case you want to display HTML on the browser. For instance below is a simple variable called as link which has HTML code? I am displaying the variable data on the browser. @{ var link = "<a href='http://www.questpond.com'>Click here</a>"; } @link;

If you execute the above code you would be surprised to see that it does not display as HTML but as a simple display as shown below. Now that’s not what we expect? , we were expecting a proper HTML display. This is done by razor to avoid XSS attacks (I will discuss about the same in later sections).

But no worries razor team has taken care of it. You can use the “Html.Raw” to display the same as shown in the below code snippet. @{ var link = "<a href='http://www.questpond.com'> Click here</a>"; } @Html.Raw(link);

Lab 13:- MVC Security (Windows Authentication) Security is one of the most important things in any application irrespective you develop them in any technology, same holds true from MVC. Before we start this lab one thing we need to understand that MVC at the end of the day stands on ASP.NET engine. In other words MVC uses the same security methods which are applicable for ASP.NET i.e. Windows and Forms authentication.

Now one way to implement windows authentication is by creating project using the intranet application option. As said previously intranet application option is enabled to authenticate users from windows active directory.

For now we will not use the empty application option and create from scratch so that we can understand better.

Step 1:- Enable Windows Authentication Once you have created the project the first step is to go and enable windows authentication using the <authentication> and <authorization> tag as shown below. <authentication mode="Windows"/>

34

Learn MVC step by step

<authorization> <deny users="?"/> </authorization>

Step 2:- Just some defects In MVC 3 template there is a small defect. It runs the forms authentication by default. Set the below tags in appsettings tag to avoid problems. It took me 2 hours to figure this out, what a waste. <add key="autoFormsAuthentication" value="false" /> <add key="enableSimpleMembership" value="false"/> <appSettings> <add key="webpages:Version" value="1.0.0.0"/> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> <add key="autoFormsAuthentication" value="false" /> <add key="enableSimpleMembership" value="false"/> </appSettings>

Step 3:- Apply Authorize tags on your controllers / actions.

Once you have enabled windows authentication use the “*Authorize+” tag and specify which users can have access to the controllers and actions. You can also specify roles if you wish.

[Authorize(Users= @"WIN-3LI600MWLQN\Administrator")] public class StartController : Controller { // // GET: /Start/ [Authorize(Users = @"WIN-3LI600MWLQN\Administrator")] public ActionResult Index() { return View("MyView"); } }

Please note the user should be present in your windows AD or local user group. Like in my case Administrator is present in my local windows user group.

Step 4:- Create setup Now it’s times to go and publish this solution on IIS so that we can test if windows authentication works. In order to do the same we need to have the necessary MVC DLL’s also posted to the server. So right click on the project and select “Add deployable dependencies”.

In the next screen its will prompt which dependencies you want to include.

For now I have razor view so I have selected both the options.

Once you can see the dependent DLL’s been added to the project.

35

Learn MVC step by step

Step 5:- Create IIS application Next step is to create an IIS application with only windows authentication enabled as shown in the figure.

Step 6:- Publish Once you have created the IIS application, it’s time to publish your application to the web application folder. So click on build and publish as shown in the below figure. I have used “File system” as the publish method, you can use your choice.

Step 7:- Run the controller and action Finally run the controller and action and see how windows authentication box pops up for User Name and Password.

If credentials are entered appropriately you should be able to see the view.

Lab 14:- MVC Security (Forms Authentication) In the previous lab we saw how to do windows authentication. Windows authentication is great for intranet websites. But as soon as we talk about internet websites, creating and validating users from Windows ADS / work groups is not a feasible option.

So in those kind of scenarios “Forms authentication” is the way to go.

Step 1:- Define the Login page controller The first thing we need to do is define the controller which will invoke the login view. So I have created a simple index action which invokes a view called as Index. This index view will take inputs like username and password. public ActionResult Index() { return View(); }

36

Learn MVC step by step

Step 2:- Create the index view The next step is to create the login form which will take User Name and Password. To create the form we have used razor view and the HTML helper classes.

This HTML form is making a post to the action “Login” which is currently in “Home” controller and its using HTTP POST method.

So when the user presses submit, it will hit the “Login” action. The next thing after this is to create the “Login” action which will validate the username and password. @{Html.BeginForm("Login", "Home", FormMethod.Post);} User Name :- @Html.TextBox("txtUserName") <br /> Password :- @Html.TextBox("txtPassword") <br /> <input type="submit" value="Login" /><br /> @{ Html.EndForm(); }

Step 3:- Validate credentials In the login action the first thing we need to do is check if the user is proper or not. For now I have hardcoded the validation of username and passwords. This can always be replaced by querying from SQL Server or from some other source. if ((Request.Form["txtUserName"] == "Shiv") && (Request.Form["txtPassword"] == "Shiv@123")) { ….. }

Once we have checked the credentials the next step is to use the famous “FormsAuthentication” class and set the cookie saying that this user is proper.

So that in the next request when the user comes he will not be validated again and again. After the cookie is set redirect to the “About” view or else just stand on the “Index” view. public ActionResult Login() { if ((Request.Form["txtUserName"] == "Shiv") && (Request.Form["txtPassword"] == "Shiv@123")) { FormsAuthentication.SetAuthCookie("Shiv",true); return View("About"); } else { return View("Index"); } }

My about view is just a simple page as shown below. @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>About</title> </head> <body> <div> This is About us </div> </body> </html>

37

Learn MVC step by step

Step 4:- Authorize attribute We also need to use put the “*Authorize+” attribute on controllers which we want to restrict from unauthorized users. For instance you can see in the below code snippet, “Default” and “About” actions are decorated using “*Authorize+” attribute.

So if any user who is unauthorized, directly hits any one of these controller’s they will be sent back to the “Index” view i.e. back to Login screen.

[Authorize] public ActionResult Default() { return View(); } [Authorize] public ActionResult About() { return View(); }

Step 5:- Change “Web.config” file Finally we need to make the famous change in the “web.config”, i.e. Enabling “Forms” security. The most important part in the below code snippet to note is the “LoginUrl” property.

Normally in ASP.NET this login URL points to an ASP.NET page, but in MVC it points to an action i.e. “/Home/Index”. This action invokes the login credentials page. <authentication mode="Forms"> <forms loginUrl="~/Home/Index" </authentication>

timeout="2880"/>

Step 6:- See Forms authentication in action With those above 5 steps you are now completely ready to go. If you now try to call the “About” action directly, it will show up the below screen. This test proves that “Forms” authentication is working. It has automatically detected that the user is not valid and redirected the same to the “Index” action which further invoked the “Login” form.

Lab 15:- JSON, MVC and JQuery So in this lab we will expose a simple “Customer” object from MVC in JSON format and consume the same using JQuery.

For this lab please ensure that the project is created by using basic project template so that the necessary JQuery libraries are included with the MVC project.

Step 1:- Create a simple Customer model So the first step is to create a simple “Customer” class in the MVC project. public class Customer { private string _CustomerCode; public string CustomerCode { get { return _CustomerCode; } set { _CustomerCode = value; } }

38

Learn MVC step by step

}

Step 2:- Expose Customer object as JSON To expose the customer object in JSON format we need to use “JsonResult” as shown in the below code snippet. public JsonResult getJson() { Customer obj = new Customer(); obj.CustomerCode = "c001"; return Json(obj,JsonRequestBehavior.AllowGet); }

Please do once run the controller with the above JSON action to check if the JSON result is displayed properly. If you are using chrome the display comes on the browser, if its internet explorer it spits out a file.

Step 3:- Consume the JSON controller in jQuery In case you are new to jQuery, please read this what is jQuery?

The next step is to consume the JSON data in jQuery using MVC view. So go ahead and add a view for example my view name is “LearnJquery.aspx”.

First thing add the jQuery library at the top of the ASPX page. In case you do not find jQuery library in your project that means you have not created the MVC project using the basic template. <script src="../../Scripts/jquery-1.8.2.js"></script>

You can then make a call the controller which is exposing in JSON format using “getJson” method as shown below. Its takes three parameters: The first parameter in “getJson” is the MVC JSON URL with complete controller/action path format.  The second parameter is the data to be passed. For now it’s NULL as we are more interesting in getting JSON data rather posting data.  The last parameter is the call back method (“Display”) which will be invoked once we get the JSON data from the controller. The “Display” function is also available in the below code snippet. I am just putting an alert with the property name. FYI you can see how I have just typed “data.CustomerCode” , no parsing nothing the JSON data is automatically translated to javascript object. $.getJSON("/Json/getJson", null, Display); function Display(data) { alert(data.CustomerCode); }

The complete MVC view HTML looks as shown below. I have created a simple HTML button and on the click event I am calling a “getJson” JavaScript method which makes a call to the JSON controller and displays the JSON data in a JavaScript alert. <script language="javascript"> function getJson() { $.getJSON("/Json/getJson", null, Display); return true; } function Display(data) { alert(data.CustomerCode); } </script> <input type="button" value="See Json data" onclick="return getJson();"/>

This view I have invoked by using “DisplayJson” action. public class JsonController : Controller { public ActionResult DisplayJson() {

39

Learn MVC step by step

return View("LearnJquery"); } }

Step 4:- Run the application and see the data After you have done all the hardwork its time to hit the “DisplayJson” action to see the beauty running.

Lab 16:- Session management in MVC (ViewData,ViewBag,TempData and session variables) The primary goal of MVC is to create web applications and web applications use HTTP protocol. Now HTTP protocol is a stateless by nature. So when you send a request to MVC application it serves the request and forgets about the request. Next time when the same user sends the request MVC treats that as a complete new request.

Now think about the below situation:    

End user sends request to a MVC site.

MVC sends a login page.

User enters proper details and sends data to the MVC application.

MVC validates the user and sends home page of the site. MVC application now forgets everything about the user as it’s stateless.

Now user clicks on one of the home page links. This is sent to the MVC application and because MVC application has forgotten everything about the user, he sends a login page again for authentication….User would feel Weird…

In short we need to have some kind of mechanism which will help us to remember states between request and response of MVC. There are 3 ways of maintaining states in MVC and these ways can be used depending from which layer to which layer you navigate.

Temp data: - Helps to maintain data on redirects for a single request and response. Now the redirects can be from controller to controller or from controller to view.

View data: - Helps to maintain data when you move from controller to view.

View Bag: - It’s a dynamic wrapper around view data.

When you use “Viewbag” type casting is not required. It uses the dynamic keyword internally.

Session variables: - By using session variables we can maintain data until the browser closes.

Let’s demonstrate the above fundamental with a demo.

40

Learn MVC step by step

Step 1:- Create two controllers “DefaultController1” and “DefaultController2”.

Add two controllers “DefaultController1” and “DefaultController2”.

Step 2:- Set Session,tempdata, viewdata and viewbag In the “Default1Controller” in “Action1” we set session,tempdata,viewdata and viewbag values as shown in the below code snippet. Once we set the values we do a redirect to the action “SomeOtherAction” which belongs to “Controller2”. public class Default1Controller : Controller { // GET: /Default1/ public ActionResult Action1() { Session["Session1"] = "UntilBrowserCloses"; TempData["FortheFullRequest"] = "FortheFullRequest"; ViewData["Myval"] = "ControllertoView"; ViewBag.MyVal = "ControllertoView"; return RedirectToAction("SomeOtherAction","Default2"); } }

Step 3:- Read Session, tempdata , viewdata and viewbag values In “Default2Controller” we will try to read values set in “Default1Controller”. Once the values are read we invoke a view called as “SomeView”.

Please note I am setting “ViewData” and “ViewBag” before redirecting to the view. public class Default2Controller : Controller { // GET: /Default2/ public ActionResult SomeOtherAction() { string str = Convert.ToString(TempData["FortheFullRequest"]); string str2 = Session["Session1"].ToString(); string str3 = Convert.ToString(ViewData["Myval"]); ViewData["Myval"] = "ControllertoView"; ViewBag.MyVal = "ControllertoViewCollection"; return View("SomeView"); } }

The “SomeView” view just displays the data present in “TempData” ,”ViewData” , “ViewBag” and “Session” . <%= TempData["FortheFullRequest"] %><br /> <%= ViewData["Myval"] %><br /> <%= Session["Session1"] %> <%= ViewBag.MyVal %> <a href="/Default1/Action1">Click</a>

So let’s put debug points in both the controller actions and let’s hit Default1 controller and Action1 action http://localhost:1203/Default1/Action1 . So in this action session, tempdata , viewdata and viewbag are loaded. Below is how the watch window looks with data.

Now from here we are redirecting to controller2 action “SomeOtherAction”.

41

Learn MVC step by step

In controller2 you can see get “TempData” and “Session” variables but not “ViewBag” and “ViewData” (See “str3” and “str4” are set to null). In other words “ViewData” and “ViewBag” do not persist data in redirects while “TempData” and “Session” variables do.

I have set “ViewData” and “ViewBag” with some data again before invoking the view “SomeView”.

When the view gets invoked we can see all the data. In other words “ViewData” and “ViewBag” persist data from controller to view. And also tempdata and session have persisted data.

As you can see in the view we have a simple hyper link which will invoke “ActionNew” in “ControllerNew” action.

When we click on the link. All the other variables go off only session variables persist, see the below figure. It means “Session” variables can persist between requests Below is a summary table which shows different mechanism of persistence.

Maintains data between ViewData/ViewBag TempData ( For single request)

Session

Controller to Controller

No

Yes

Yes

Controller to View

Yes

Yes

Yes

View to Controller

No

No

Yes

Lab 17:- Asynch controllers MVC applications at the end of the day are web applications which are hosted inside IIS.Now when any request comes to MVC controller it pulls up a thread from thread pool and serves that request. In other words IIS web server maintains a pool of threads rather than creating threads from scratch again and again to gain performance benefits.

Let’s assume that a web server has a thread pool size of 2. Now this is just an assumption because a pool size of two is very much hypothetical. But to make things simple consider that the thread pool size is 2.

So let’s say first request comes to the site, IIS pulls up a readymade thread object from the thread pool and starts serving that request. In the meantime let’s say second request comes in so again IIS pulls up a thread from the thread pool and starts serving the second request.

Now the fun starts when third request comes in. The IIS webserver does not have any more thread objects in the pool as those are already serving “request1” and “request2”. So he just moves the third request in to a waiting mode or the server can send “503 busy” message to the client.

42

Learn MVC step by step

This situation is termed as “Thread Starvation”. Thread starvation situations can be overcome by making the request “Asynchronous”. So the request comes in and immediately the request is processed in an “Asynch” manner and releasing the thread serving the request immediately.

So to avoid this we can achieve the same by making our controllers “Asynch”.

Note: Please watch the video from DVD and learn more about MVC Thread starvation.

So let’s understand step by step how to implement MVC Asynch controllers.

Step 1:- Inherit from AsyncController class Consider the below controller class “HeavyController” which has an action “SomeHeavyMethod” and this action waits for 20 seconds. So let understand how we can make this simple controller anasync controller. public class HeavyController : Controller { // GET: /Heavy/ public ActionResult SomeHeavyMethod() { Thread.Sleep(20000); return View(); } }

So the first step is to inherit from “AsyncController” class. public class HeavyController : AsyncController { }

Step 2:- Mark methods with Async appended The next step is to append “Async” word after the methods. So you can see “SomeHeavyMethod” has been changed to “SomeHeavyMethodAsync”.

The heavy logic code i.e. “Thread.Sleep” is moved to a different method and that method is invoked using task parallel library from the “SomeHeavyMethodAsync”.

Every time a “Task” or a “Thread” is started we increment the outstanding operations counter by using “AsynchManager” and every time a multi-threaded task is completed we decrement the counter. public class HeavyController : AsyncController { public void SomeHeavyMethodAsync() { AsyncManager.OutstandingOperations.Increment(); Task.Run(new Action(Heavy)); } public void Heavy() { Thread.Sleep(20000); AsyncManager.OutstandingOperations.Decrement(); } }

Step 3:- Create the completed method Now once all the multi-threaded tasks complete and the outstanding operations are zero we need to return the view. So for the same we need to create an action result method with “Completed” word appended. This method gets called when all outstanding operations are zero. public ActionResult SomeHeavyMethodCompleted() { return View(); }

43

Learn MVC step by step

Step 4:- Ensure to create “SomeHeavyMethod.aspx” view Also ensure you add “SomeHeavyMethod” view with some text on it. <html> <head runat="server"> <meta name="viewport" content="width=device-width" /> <title>Some heavy method</title> </head> <body> <div> This is loaded after some time.... </div> </body> </html>

Step 5:- Run and enjoy Now try hitting “Heavy/SomeHeavyMethod” and see the output.

Lab 18:- MVC bundling and Minification In simple words Bundling and Minification helps us to increase performance.

Understanding Bundling Web projects always need CSS and script files.Bundling helps us to combine multiple JavaScriptor CSS files into a single entity during runtime thus combining multiple requests in to a single request which in turn helps to improve performance.

For example consider the below web request to a page. (Note: request are recorded by using chrome developer tools.) This page consumes two JavaScript files “Javascript1.js” and “Javascript2.js”. So when this page is requested it makes three request calls: 

One for the “Index” page.

Two requests for the other two JavaScript files “Javascript1.js” and “Javascript2.js”.

Just try to imagine a situation when we have lots of JavaScript file. Itleads to multiple requests thus decreases performance.

Solution will be combine all the JS files into single bundle and request it in a single request as a single unit. This process is termed as bundling.

44

Learn MVC step by step

Understanding Minification Minification reduces the size of script and CSS files by removing blank spaces, comments etc. For example below is a simple JavaScript code with comments. // This var x = x = x + x = x *

is test 0; 1; 2;

After implementing Minification the JavaScript code looks something as below. You can see how whitespaces and comments are removed to minimize file size and thus increasing performance as the file size has become smaller and compressed. var x=0;x=x+1;x=x*2;

So let’s demonstrate a simple example of bundling and Minification with MVC 4.0 step by step.

Step 1:- Create a MVC project with Empty template So to understand bundling and Minification, let’s go ahead and create an empty MVC project. In that let’s add a “Script” folder and inside”Script” folder , lets add two javascript files as shown in the below figure.

Below is the code for “Javascript1” file. // This var x = x = x + x = x *

is test 0; 1; 2;

Below is the code for “Javascript2” file. alert("Hello");

Step 2:- Create a controller which invokes a view Now let’s go ahead and create a controller which invokes a view called as “MyView” which consumes both the JavaScript files. public class SomeController : Controller { // // GET: /Some public ActionResult MyView() { return View(); } }

Below is the ASPX view which consumes both javascript files. <html> <script src="../../Scripts/JavaScript1.js"></script> <script src="../../Scripts/JavaScript2.js"></script> <head> </head> <body> <div> This is a view. </div> </body> </html>

Step 3:- Run and see how multiple calls are made.

45

Learn MVC step by step

Now run the MVC application in Google chrome, press CNTRL + SHIFT + I keyboard keys to see the below output.

You can see there are three requests:-

 

First request is to the view “MyView”.

The other two requests fetch “javascript1” and “javascript2” respectively.

Now bundling is all about making those two JavaScript call’s in to one.

Step 4:- Referencing “System.Web.Optimization” Bundling and Minification is done by “System.Web.Optimization” namespace. Now this DLL is not a part of .NET or ASP.NET framework. We need to use NUGET to download this DLL. So go to NUGET and search for “ASPNETWebOptimization”.

Once the package appears in the Nuget window, click on install. It will add the optimization dll into reference.

Note:In DVD we have added one video about NUGET in detail. If you are willing to learn NUGET in detail please go through it

Step 5:- The BundleConfig file Add ‘BundleConfig” class file and create a “RegisterBundles” method as shown in the below code. public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/Bundles").Include("~/Scripts/*.js")); BundleTable.EnableOptimizations = true; } }

As you can see “bundles.add” combine all the JavaScript files (in the “Scripts” folder) in to one bundle called “Bundles”.

Note: - Do not forget to import “using System.Web.Optimization;” in the class file or else you will end up with errors.

Step 6:- Call the bundle config file from global.asax.cs file Open the global.asax.cs file and in the application start call the “RegisterBundles” method as shown in the below code. protected void Application_Start() { …

BundleConfig.RegisterBundles(BundleTable.Bundles);

46

Learn MVC step by step

}

Step 7:- Render the bundles in the view Once the bundling is done we will remove the “script” tag and call the Scripts.Render method in “Optmization” dll to render the bundle. <!-- Remove following lines --> <script src="../../Scripts/JavaScript1.js"></script> <script src="../../Scripts/JavaScript2.js"></script> <!-- Add following line --> <%= System.Web.Optimization.Scripts.Render("~/Bundles")

%>

Below is the complete bundling code called inside the MVC view? <%= System.Web.Optimization.Scripts.Render("~/Bundles") <head runat="server"> <meta name="viewport" content="width=device-width" /> <title>MyView</title> </head> <body> <div> This is a view. </div> </body> </html>

%>

Step 8:- Watch your Bundling and Minification in real So now that you are all set, it’s time to see the bundling and Minification in real. So run google chrome, press CNTRL + SHIFT + I and you can see the magic there is only one call for both the JavaScript files.

If you click on the preview tab you can see both the JavaScript files have been unified and…. GUESS, yes Minification has also taken place.

Lab 19:- MVC View Model A view model is a simple class which represents data to be displayed on the view.

For example below is a simple customer model object with “CustomerName” and “Amount” property.

CustomerViewModel obj = new CustomerViewModel(); obj.Customer.CustomerName = "Shiv"; obj.Customer.Amount = 1000;

But when this “Customer” model object is displayed on the MVC view it looks something as shown in the figure. It has “CustomerName”, “Amount” plus “Customer Buying Level” fields on the view / screen. “Customer buying Level” is a color indication which indicates how aggressive the customer is in buying.

“Customer buying level” color depends on the value of the “Amount property. If the amount is greater than 2000 then color is red, if amount is greater than 1500 but less than 200 then color is orange or else the color is yellow.

In other words “Customer buying level” is an extra property which is calculated on the basis of amount.

So the Customer ViewModel class has three properties

47

Learn MVC step by step

  

“TxtCustomerName” textbox takes data from “CustomerName” property as it is.

“TxtAmount” textbox takes data from “Amount” property of model as it is.

“CustomerBuyingLevelColor” displays color value depending on the “Amount “value.

Customer Model CustomerName Amount

Customer ViewModel TxtCustomerName TxtAmount CustomerBuyingLevelColor

What kind of logic view model class will contain?

So the view model class can have following kind of logics: 

 

Color transformation logic: - For example you have a “Grade” property in model and you would like your UI to display “red” color for high level grade, “yellow” color for low level grade and “green” color of ok grade.

Data format transformation logic: -Your model has a property “Status” with “Married” and “Unmarried” value. In the UI you would like to display it as a checkbox which is checked if “married” and unchecked if “unmarried”. (In short we want Boolean value in return).

Aggregation logic: - You have two different Customer and Address model classes and you have view which displays both “Customer” and “Address” data on one go.

Structure downsizing logic: - You have “Customer” model with “customerCode” and “CustomerName” and you want to display just “CustomerName”. So you can create a wrapper around model and expose the necessary properties.

Let’s do a small lab to understand MVC view model concept using the scenariodiscussed previously.

Step 1:- Create the Customer model So let’s go ahead and create a “Customer” model with the below properties. Because this is a view model I have avoided the color property in the below class. public class CustomerModel { public string CustomerName {get;set;} public double Amount {get;set;} }

Step 2:- Creating the view model The next thing is to create a view model class which will wrap “Customer” model and add UI properties. So let’s create a folder “ViewModels” and in that add a class “CustomerViewModel”.

Below are some important points to note about the view model class: 

You can see in the below class how “CustomerViewModel” class wraps “CustomerModel” class.

Now for the most important, watch the code for “CustomerLevelColor” property, it displays color depending on the amount of customer sales.

public class CustomerViewModel { private CustomerModel Customer = new CustomerModel(); public string TxtName { get { return Customer.CustomerName; } set { Customer.CustomerName = value; }

48

Learn MVC step by step

} public string TxtAmount { get { return Customer.Amount.ToString(); } set { Customer.Amount = Convert.ToDouble(value); } } public string CustomerLevelColor { get { if (Customer.Amount > 2000) { return "red"; } else if (Customer.Amount > 1500) { return "orange"; } else { return "yellow"; } } } }

Step 3:- Consume view model in the view The next step is to create a strongly typed MVC view where we can consume the view model class.

If you see the view it is now decorated or you can say binded with view model class.

The most important thing to watch is your view is CLEAN. It does not have decision making code for color coding. Those gel codes have gone inside the view model class.

This is what makes VIEW MODEL a very essential component of MVC. <table class="auto-style1"> <tr> <td class="auto-style2">Customer Name :-</td> <td class="auto-style3"><%= Model.TxtName %></td> </tr> <tr> <td class="auto-style2">Amount</td> <td class="auto-style3"><%= Model.TxtName %></td> </tr> <tr> <td class="auto-style2">Customer buying level</td> <td class="auto-style3"><div style="background-color: <%= Model.CustomerLevelColor %>; width: 228px; height: 27px;"></td> </tr> </table>

This view can be invoked from a controller which passes some dummy data as shown in the below code. public class CustomerController : Controller { // // GET: /Customer/ public ActionResult DisplayCustomer() { CustomerViewModel obj = new CustomerViewModel(); obj.Customer.CustomerName = "Shiv";

49

Learn MVC step by step

obj.Customer.Amount = 1000; return View(obj); } }

Should VM be composed or inherited.

Lot of architects make mistakes of creating a view model class by inheriting. If you see the above view model class it is created by composition and not inheritance.

So why does composition make more sense? If you visualize we never say “This Screen is a child of Business objects”, that would be a weird statement.

We always say “This screen uses those models”. So it’s very clear it’s a using relationship and not an IS A (child parent) relationship.

Some of the scenarios where inheritance will fail are: 

When you DO NOT want some properties from the model in your view When you have a view which uses multiple models.

So do not get lured with the thought of creating a view model by inheriting from a model you can end up in to a LISKOV issue It looks like a duck, quacks like a duck but it is not a duck. It looks like a model has properties like a model but it is not exactly a model.

Advantages of VM  

Reusability: - Now that my gel code has come in to a class. I can create the object of that class in any other UI technology (WPF, Windows etc.) easily.

Testing: - We do not need manual testers to test the UI look and feel now. Because our UI code has moved in to a class library (least denominator) we can create an object of that class and do unit testing. Below is a simple unit test code which demonstrates unit testing of UI look and feel logic. You can see how the color testing is done automatically rather than some manual tester testing it manually.

[TestMethod] public void TestCustomerLevelColor() { CustomerViewModel obj = new CustomerViewModel(); obj.TxtName = "Shiv"; obj.TxtAmount = "1000"; Assert.AreEqual("Red",obj.CustomerLevelColor); }

50

Learn MVC step by step

Lab 20:- MVC Exception Handling Initial setup for our lab Before we go and start our step by step demo on exception handling lets create a sample demo.

As you can see we have a simple MVC project with one controller called Testing.

It contains an action method called TestMethod which will throw DivideByZeroException at the end.We also have error.cshtml in the Shared folder which are expecting to see on every error.

51

Learn MVC step by step

Local level Exception Handling 1.

Simply Tryâ&#x20AC;ŚCatch approach

public ActionResult TestMethod() { try { //.... return View(); } catch (Exception e) { //Handle Exception; return View("Error"); } }

Limitation:Problem with the above approach is we cannot reuse the exception handling logic across multiple action methods.

That where our second approach comes to picture.

2.

Override OnException method in controller

protected override void OnException(ExceptionContext filterContext) { Exception e = filterContext.Exception; //Log Exception e filterContext.ExceptionHandled=true; filterContext.Result = new ViewResult(){ViewName = "Error"}; }

Advantage:Now we can share error handling logic across all the actions in a controller Limitation:Problem with the above approach is we cannot reuse the exception handling logic across multiple controllers. That where global error handling comes to picture.

Global level Exception Handling Step 1 In Web.Config simply enable custom error as follows and execute our application. <customErrors mode="On"></customErrors>

Output

It seems that only step 1 done all the work, but how? We have not specified the error page (view) name anywhere, still in response we get error view whenever error occurs. Letâ&#x20AC;&#x2122;s understand how?

FilterConfig class public class FilterConfig { public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new HandleErrorAttribute()); } }

52

Learn MVC step by step

As you can see HandleErrorAttrubute is added to global filter collection.

Where RegisterGlobalFilters method is invoked?

In Global.asax file in Applicaion_Start RegisterGlobalFilters method is invoked.

What it does?

It handles all the exceptions raised by all action methods in all the controllers and return error view present inside shared folder.

HandleError at controller level?

1. Remove the code written in FilterConfig class 2. Add HandleErrorAttribute to Controller class as follows, Now errors raised by all action methods present inside TestingController method will be handled. Other exceptions will be considered as unhandled exceptions.

HandleError at Action level Add HandleErrorAttribute to Action method as shown in figure,

Displaying error detail in Error view For that we will make our error view strongly typed view of model System.Web.Mvc.HandleErrorInfo and then as usual using @Model keyword we can access the members. One of the member is Exception object.

Different views for Different Exceptions For that we will use overloaded version of HandleErrorAttribute constructor as follows.

Limitations of HandleErrorAttribute 1.

2.

3.

Error won’t get logged anywhere.

Exceptions raised outside controllers will not be handled. Example- exception raised because of invalid url won’t be handled.

Exception Handling based on scenario is not possible. Example – So one error page when request comes via ajax and different one when comes via normal request.

53

Learn MVC step by step

Extending HandleErrorAttribute Some of the above limitations can be overcame by extending the default HandleErrorAttribute as follow. public class MyExceptionFilter: HandleErrorAttribute { private bool IsAjax(ExceptionContext filterContext) { return filterContext.HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest"; } public override void OnException(ExceptionContext filterContext) { if (filterContext.ExceptionHandled || !filterContext.HttpContext.IsCustomErrorEnabled) { return; } // if the request is AJAX return JSON else view. if (IsAjax(filterContext)) { filterContext.Result = new JsonResult(){Data=filterContext.Exception.Message, JsonRequestBehavior=JsonRequestBehavior.AllowGet}; filterContext.ExceptionHandled = true; filterContext.HttpContext.Response.Clear(); } else { //Normal requests will be handled in default manner base.OnException(filterContext); } // Write error logging code here if you wish. //if want to get different parts of the request //var currentController = (string)filterContext.RouteData.Values["controller"]; //var currentActionName = (string)filterContext.RouteData.Values["action"]; } }

Now instead of HandleError we will use MyExceptionFilter across. //At Global level public class FilterConfig { public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new MyExceptionFilter()); } } … //OR At Controller level [MyExceptionFilter] public class TestingController:Controller {…} ….

OR At Action level At Controller level public class TestingController:Controller { …

[MyExceptionFilter] public ActionResult TestMethod(){…} }

54

Learn MVC step by step

Advantages of extending Handle Error Attribute 1. Now we can log errors.

2. More control over exception handling. Now we have full control over exception handling code so we can simply check whether it’s an Ajax request or normal request and proceed accordingly.

“Resource cannot be found” Exception This is the one which cannot be handled by neither HandleErroAttribute nor CustomHandleErrorAttribute.

But we can follow the traditional web.config approach as follows. <customErrors mode="On"> <error statusCode="404" redirect="~/Testing/NoPageFound"/> </customErrors>

How Global level HandleErrorAttribute is different from Application_Error?

Application_Error is an application level event, we define in the global.asax file. It will be executed whenever there is an unhandled exception in the application.

If this is the point, why we won’t use Application_Error always?

Here are the advantages of HandleError over Application_Error, 1. With HandleErrorAttribute we get more control over exception handling. HandleError allow us to handle error differently for different controllers and actions easily where in Application_Error to get this feature we take the help of switch loop.

2. Once you are into Application_Error you are out of MVC and you will lose ControllerContext and then we cannot do much things which will easily possible with HandleError.

Lab 21:- Areas in MVC What is Area and Why Area?

In Asp.Net MVC we have a concept of Areas using which we can break our system into modules.

Let’s talk about a situation.

We have system which consist of 2 modules Customer and Order Processing. Normally when we create Asp.Net MVC Project our structure consist of 3 folders – Controllers, Model and Views. So Project structure will be something like this.

As you can see nothing is organized. When it comes to code management it will be very difficult.

Above image is the structure of the project when we had 2 modules, imagine a situation when we have hundreds of modules in single system.

55

Learn MVC step by step

Examples for Areas in real world Country is divided into states to make development and management easy.

Just like real world we use the concept of area in Asp.Net MVC to break single system into modules. One area represents one module by means of logical grouping of controllers, Models and Views.

How to use Areas?

Step1 Right click your project and say Add>>Area

Step 2 Enter Area Name and say add

Step 3 Put all your related files into respected folders.

So here we have it.

Note: Area is logical grouping not physical, so no separate dlls will be created for every area.

Areas vs. Folders?

One can ask a question why we should use Areas for breaking system into modules when we can just use folders. In simple words, answer for this question is â&#x20AC;&#x153;To avoid of huge manual workâ&#x20AC;?

In order to achieve same functionality using simple folder you have to do following things.

1. Create module structure manually. a. One folder for every module. b. Three Folder inside every module folder naming Controller, Models and Views. c. One Web.Config file for every module (to store settings related to that module).

2. Create one custom route for every module Controllers.

56

Learn MVC step by step

3.

Create Custom View Engine for every module which will search for the view in customized locations instead of predefined locations (Views/{Controlles} or Views/Shared ) Default View Search

Customized View Search

57

Learn MVC step by step

Interview Preparation What is MVC? MVC is an architectural pattern which separates the representation and the user interaction.

It’s divided in to three broader sections, “Model”, “View” and “Controller”. Below is how each one of them handles the task.  The “View” is responsible for look and feel.  “Model” represents the real world object and provides data to the “View”.  The “Controller” is responsible to take the end user request and load the appropriate “Model” and “View”.

Can you explain the complete flow of MVC? Below are the steps how control flows in MVC (Model, view and controller) architecture: All end user requests are first sent to the controller.  The controller depending on the request decides which model to load. The controller loads the model and attaches the model with the appropriate view.  The final view is then attached with the model data and sent as a response to the end user on the browser.

Is MVC suitable for both windows and web application?

MVC architecture is suited for web application than windows. For window application MVP i.e. “Model view presenter” is more applicable.IfyouareusingWPFandSLMVVMismoresuitableduetobindings.

What are the benefits of using MVC? There are two big benefits of MVC: Separation of concerns is achieved as we are moving the code behind to a separate class file. By moving the binding code to a separate class file we can reuse the code to a great extent.  Automated UI testing is possible because now the behind code (UI interaction code) has moved to a simple.NET class.

This gives us opportunity to write unit tests and automate manual testing.

Is MVC different from a 3 layered architecture?

MVC is an evolution of a 3 layered traditional architecture. Many components of 3 layered architecture are part of MVC. So below is how the mapping goes.

Functionality

3-layer/tier

MVC

Look and Feel

User interface.

View.

UI logic

User interface.

Controller

Business logic/ validations Request is first sent to

Middle layer

Model.

User interface

Controller.

Accessing data

Data access layer.

Data access layer.

What is the latest version of MVC? When this note was written, four versions where released of MVC. MVC 1, MVC 2, MVC 3 and MVC 4. So the latest is MVC 5.

58

Learn MVC step by step

59

What is the difference between each version of MVC? Below is a detail table of differences. But during interview it’s difficult to talk about all of them due to time limitation. So I have highlighted important differences which you can run through before the interviewer.

MVC 2 MVC 3 MVC 4  Client-Side Validation  Razor  ASP.NET Web API Templated Helpers  Readymade project  Refreshed and modernized  Areas templates default project templates  Asynchronous Controllers  HTML 5 enabled templates  New mobile project template  Html.ValidationSummary Helper  Support for Multiple View  Many new features to support Method Engines mobile apps  DefaultValueAttribute in Action JavaScript and Ajax  Enhanced support for Method Parameters asynchronous methods  Model Validation  Binding Binary Data with Model Binders Improvements  DataAnnotations Attributes  Model-Validator Providers  New RequireHttpsAttribute Action Filter  Templated Helpers  Display Model-Level Errors

What are HTML helpers in MVC? HTML helpers help you to render HTML controls in the view. For instance if you want to display a HTML textbox on the view, below is the HTML helper code. <%= Html.TextBox("LastName") %>

For checkbox below is the HTML helper code. In this way we have HTML helper methods for every HTML control that exists. <%= Html.CheckBox("Married") %>

What is the difference between “HTML.TextBox” vs “HTML.TextBoxFor”?

Both of them provide the same HTML output, “HTML.TextBoxFor” is strongly typed while “HTML.TextBox” isn’t.

Below is a simple HTML code which just creates a simple textbox with “CustomerCode” as name.

Html.TextBox("CustomerCode")

Below is “Html.TextBoxFor” code which creates HTML textbox using the property name ‘CustomerCode” from object “m”.

Html.TextBoxFor(m => m.CustomerCode)

In the same way we have for other HTML controls like for checkbox we have “Html.CheckBox” and “Html.CheckBoxFor”.

What are routing in MVC? Routing helps you to define a URL structure and map the URL with the controller.

For instance let’s say we want that when any user types “http://localhost/View/ViewCustomer/” , it goes to the “Customer” Controller and invokes “DisplayCustomer” action. This is defined by adding an entry in to the “routes” collection using the “maproute” function. Below is the under lined code which shows how the URL structure and mapping with controller and action is defined. routes.MapRoute( "View", // Route name "View/ViewCustomer/{id}", // URL with parameters new { controller = "Customer", action = "DisplayCustomer", id = UrlParameter.Optional }); // Parameter defaults

Where is the route mapping code written?

The route mapping code is written in the “global.asax” file.

Learn MVC step by step

Can we map multiple URL’s to the same action?

Yes, you can, you just need to make two entries with different key names and specify the same controller and action.

How can we navigate from one view to other view using hyperlink?

By using “ActionLink” method as shown in the below code. The below code will create a simple URL which help to navigate to the “Home” controller and invoke the “GotoHome” action. <%= Html.ActionLink("Home","Gotohome") %>

How can we restrict MVC actions to be invoked only by GET or POST? We can decorate the MVC action by “HttpGet” or “HttpPost” attribute to restrict the type of HTTP calls. For instance you can see in the below code snippet the “DisplayCustomer” action can only be invoked by “HttpGet”. If we try to make Http post on “DisplayCustomer” it will throw an error.

[HttpGet] public ViewResult DisplayCustomer(int id) { Customer objCustomer = Customers[id]; return View("DisplayCustomer",objCustomer); }

How can we maintain session in MVC? Sessions can be maintained in MVC by 3 ways tempdata , viewdata and viewbag.

What is the difference between tempdata , viewdata and viewbag?

Temp data: -Helps to maintain data when you move from one controller to other controller or from one action to other action. In other words when you redirect, “tempdata” helps to maintain data between those redirects. It internally uses session variables.

View data: - Helps to maintain data when you move from controller to view.

View Bag: - It’s a dynamic wrapper around view data. When you use “Viewbag” type casting is not required. It uses the dynamic keyword internally.

Session variables: - By using session variables we can maintain data from any entity to any entity.

Hidden fields and HTML controls: - Helps to maintain data from UI to controller only. So you can send data from HTML controls or hidden fields to the controller using POST or GET HTTP methods.

Below is a summary table which shows different mechanism of persistence.

Maintains data between ViewData/ViewBag TempData

Hidden fields

Session

Controller to Controller

No

Yes

No

Yes

Controller to View

Yes

No

No

Yes

View to Controller

No

No

Yes

Yes

What are partial views in MVC? Partial view is a reusable view (like a user control) which can be embedded inside other view. For example let’s say all your pages of your site have a standard structure with left menu, header and footer as shown in the image below.

For every page you would like to reuse the left menu, header and footer controls. So you can go and create partial views for each of these items and then you call that partial view in the

60

Learn MVC step by step

mainview.

How did you create partial view and consume the same?

When you add a view to your project you need to check the “Create partial view” check box.

Once the partial view is created you can then call the partial view in the main view using “Html.RenderPartial” method as shown in the below code snippet. <body> <div> <% Html.RenderPartial("MyView"); %> </div> </body>

How can we do validations in MVC? One of the easy ways of doing validation in MVC is by using data annotations. Data annotations are nothing but attributes which you can be applied on the model properties. For example in the below code snippet we have a simple “customer” class with a property “customercode”.

This”CustomerCode” property is tagged with a “Required” data annotation attribute. In other words if this model is not provided customer code it will not accept the same. public class Customer { [Required(ErrorMessage="Customer code is required")] public string CustomerCode { set; get; } }

In order to display the validation error message we need to use “ValidateMessageFor” method which belongs to the “Html” helper class. <% using (Html.BeginForm("PostCustomer", "Home", FormMethod.Post)) { %> <%=Html.TextBoxFor(m => m.CustomerCode)%> <%=Html.ValidationMessageFor(m => m.CustomerCode)%> <input type="submit" value="Submit customer data" /> <%}%>

Later in the controller we can check if the model is proper or not by using “ModelState.IsValid” property and accordingly we can take actions. public ActionResult PostCustomer(Customer obj) { if (ModelState.IsValid) { obj.Save(); return View("Thanks"); } else { return View("Customer");

61

Learn MVC step by step

} }

Below is a simple view of how the error message is displayed on the view.

Can we display all errors in one go?

Yes we can, use “ValidationSummary” method from HTML helper class. <%= Html.ValidationSummary() %>

What are the other data annotation attributes for validation in MVC? If you want to check string length, you can use “StringLength”.

[StringLength(160)] public string FirstName { get; set; }

In case you want to use regular expression, you can use “RegularExpression” attribute.

[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")] public string Email { get; set; }

If you want to check whether the numbers are in range, you can use the “Range” attribute.

[Range(10,25)] public int Age { get; set; }

Some time you would like to compare value of one field with other field, we can use the “Compare” attribute. public string Password { get; set; } [Compare("Password")] public string ConfirmPass { get; set; }

In case you want to get a particular error message, you can use the “Errors” collection. var ErrMessage = ModelState["Email"].Errors[0].ErrorMessage;

If you have created the model object yourself you can explicitly call “TryUpdateModel” in your controller to check if the object is valid or not.

TryUpdateModel(NewCustomer);

In case you want add errors in the controller you can use “AddModelError” function.

ModelState.AddModelError("FirstName", "This is my server-side error.");

How can we enable data annotation validation on client side?

It’s a two-step process first reference the necessary jQuery files. <script src="<%= Url.Content("~/Scripts/jquery-1.5.1.js") %>" type="text/javascript"></script> <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script> <script src="<%= Url.Content("~/Scripts/jquery.validate.unobtrusive.js") %>" type="text/javascript"></script>

Second step is to call “EnableClientValidation” method. <% Html.EnableClientValidation(); %>

62

Learn MVC step by step

Explain Areas in MVC? Areas help you to group functionalities in to independent modules thus making your project more organized. For example in the below MVC project we have four controller classes and as time passes by if more controller classes are added it will be difficult to manage. In bigger projects you will end up with 100’s of controller classes making life hell for maintenance.

If we can group controller classes in to logical section like “Invoicing” and “Accounting” that would make life easier and that’s what “Area” are meant to.

You can add an area by right clicking on the MVC solution and clicking on “Area” menu as shown in the below figure.

In the image we have two “Areas” created “Account” and “Invoicing” and in that I have put the respective controllers. You can see how the project is looking more organized as compared to the previous state.

What is razor in MVC? It’s a light weight view engine. Till MVC we had only one view type i.e.ASPX, Razor was introduced in MVC 3.

Why razor when we already had ASPX? Razor is clean, lightweight and syntaxes are easy as compared to ASPX. For example in ASPX to display simple time we need to write. <%=DateTime.Now%>

In Razor it’s just one line of code. @DateTime.Now

So which is a better fit Razor or ASPX? As per Microsoft razor is more preferred because it’s light weight and has simple syntaxes. But my suggestion would be to answer more real-time….

How can you do authentication and authorization in MVC? You can use windows or forms authentication for MVC.

How to implement windows authentication for MVC? For windows authentication you need to go and modify the “web.config” file and set authentication mode to windows. <authentication mode="Windows"/> <authorization> <deny users="?"/> </authorization>

63

Learn MVC step by step

Then in the controller or on the action you can use the “Authorize” attribute which specifies which users have access to these controllers and actions. Below is the code snippet for the same. Now only the users specified in the controller and action can access the same.

[Authorize(Users= @"WIN-3LI600MWLQN\Administrator")] public class StartController : Controller { // GET: /Start/ [Authorize(Users = @"WIN-3LI600MWLQN\Administrator")] public ActionResult Index() { return View("MyView"); } }

How do you implement forms authentication in MVC? Forms authentication is implemented the same way as we do in ASP.NET. So the first step is to set authentication mode equal to forms. The “loginUrl” points to a controller here rather than page. <authentication mode="Forms"> <forms loginUrl="~/Home/Login" </authentication>

timeout="2880"/>

We also need to create a controller where we will check the user is proper or not. If the user is proper we will set the cookie value. public ActionResult Login() { if ((Request.Form["txtUserName"] == "Shiv") && (Request.Form["txtPassword"] == "Shiv@123")) { FormsAuthentication.SetAuthCookie("Shiv",true); return View("About"); } else { return View("Index"); } }

All the other actions need to be attributed with “Authorize” attribute so that any unauthorized user if he makes a call to these controllers it will redirect to the controller ( in this case the controller is “Login”) which will do authentication.

[Authorize] publicActionResult Default() { return View(); } [Authorize] publicActionResult About() { return View(); }

How to implement Ajax in MVC? You can implement Ajax in two ways in MVC: Ajax libraries  Jquery

64

Learn MVC step by step

Below is a simple sample of how to implement Ajax by using “Ajax” helper library. In the below code you can see we have a simple form which is created by using “Ajax.BeginForm” syntax. This form calls a controller action called as “getCustomer”. So now the submit action click will be an asynchronous Ajax call. <script language="javascript"> function OnSuccess(data1) { // Do something here } </script> <div> <% var AjaxOpt = new AjaxOptions{OnSuccess="OnSuccess"}; %> <% using (Ajax.BeginForm("getCustomer","MyAjax",AjaxOpt)) { %> <input id="txtCustomerCode" type="text" /><br /> <input id="txtCustomerName" type="text" /><br /> <input id="Submit2" type="submit" value="submit"/></div> <%} %>

In case you want to make ajax calls on hyperlink clicks you can use “Ajax.ActionLink” function as shown in the image.

So if you want to create Ajax asynchronous hyperlink by name “GetDate” which calls the “GetDate” function on the controller, below is the code for the same. Once the controller responds this data is displayed in the HTML DIV tag by name “DateDiv”. <span id="DateDiv" /> <%: Ajax.ActionLink("Get Date","GetDate", new AjaxOptions {UpdateTargetId = "DateDiv" }) %>

Below is the controller code. You can see how “GetDate” function has a pause of 10 seconds. public class Default1Controller : Controller { public string GetDate() { Thread.Sleep(10000); return DateTime.Now.ToString(); } }

The second way of making Ajax call in MVC is by using Jquery. In the below code you can see we are making an ajax POST call to a URL “/MyAjax/getCustomer”. This is done by using “$.post”. All this logic is put in to a function called as “GetData” and you can make a call to the “GetData” function on a button or a hyper link click event as you want. function GetData() { var url = "/MyAjax/getCustomer"; $.post(url, function (data) { $("#txtCustomerCode").val(data.CustomerCode); $("#txtCustomerName").val(data.CustomerName); }) }

65

Learn MVC step by step

What kind of events can be tracked in AJAX?

What is the difference between “ActionResult” and “ViewResult”?

“ActionResult” is an abstract class while “ViewResult” derives from “ActionResult” class. “ActionResult” has several derived classes like “ViewResult” ,”JsonResult” , “FileStreamResult” and so on.

“ActionResult” can be used to exploit polymorphism and dynamism. So if you are returning different types of view dynamically “ActionResult” is the best thing. For example in the below code snippet you can see we have a simple action called as “DynamicView”. Depending on the flag (“IsHtmlView”) it will either return “ViewResult” or “JsonResult”. public ActionResult DynamicView(bool IsHtmlView) { if (IsHtmlView) return View(); // returns simple ViewResult else return Json(); // returns JsonResult view }

What are the different types of results in MVC? Note:-It’s difficult to remember all the 12 types. But some important ones you can remember for the interview are “ActionResult”, “ViewResult” and “JsonResult”. Below is a detailed list for your interest.

There 12 kinds of results in MVC, at the top is “ActionResult”class which is a base class that canhave 11subtypes’sas listed below 1. ViewResult - Renders a specified view to the response stream 2. PartialViewResult - Renders a specified partial view to the response stream 3. EmptyResult - An empty response is returned 4. RedirectResult - Performs an HTTP redirection to a specified URL 5. RedirectToRouteResult - Performs an HTTP redirection to a URL that is determined by the routing engine, based on given route data 6. JsonResult - Serializes a given ViewData object to JSON format 7. JavaScriptResult - Returns a piece of JavaScript code that can be executed on the client 8. ContentResult - Writes content to the response stream without requiring a view 9. FileContentResult - Returns a file to the client 10. FileStreamResult - Returns a file to the client, which is provided by a Stream 11. FilePathResult - Returns a file to the client

What are “ActionFilters”in MVC? “ActionFilters” helps you to perform logic while MVC action is executing or after a MVC action has executed.

Action filters are useful in the following scenarios:1. Implement post-processinglogic beforethe action happens.

2. Cancel a current execution.

3. Inspect the returned value.

4. Provide extra data to the action.

You can create action filters by two ways: Inline action filter.  Creating an “ActionFilter” attribute.

66

Learn MVC step by step

To create an inline action attribute we need to implement “IActionFilter” interface.The “IActionFilter” interface has two methods “OnActionExecuted” and “OnActionExecuting”. We can implement pre-processing logic or cancellation logic in these methods. public class Default1Controller : Controller , IActionFilter { public ActionResult Index(Customer obj) { return View(obj); } void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext) { Trace.WriteLine("Action Executed"); } void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext) { Trace.WriteLine("Action is executing"); } }

The problem with inline action attribute is that it cannot be reused across controllers. So we can convert the inline action filter to an action filter attribute. To create an action filter attribute we need to inherit from “ActionFilterAttribute” and implement “IActionFilter” interface as shown in the below code. public class MyActionAttribute : ActionFilterAttribute , IActionFilter { void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext) { Trace.WriteLine("Action Executed"); } void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext) { Trace.WriteLine("Action executing"); } }

Later we can decorate the controllers on which we want the action attribute to execute. You can see in the below code I have decorated the “Default1Controller” with “MyActionAttribute” class which was created in the previous code.

[MyActionAttribute] public class Default1Controller : Controller { public ActionResult Index(Customer obj) { return View(obj); } }

Can we create our custom view engine using MVC? Yes, we can create our own custom view engine in MVC. To create our own custom view engine we need to follow 3 steps:Let’ say we want to create a custom view engine where in the user can type a command like “<DateTime>” and it should display the current date and time.

Step 1:- We need to create a class which implements “IView” interface. In this class we should write the logic of how the view will be rendered in the “render” function. Below is a simple code snippet for the same. public class MyCustomView : IView { private string _FolderPath; // Define where public string FolderPath { get { return _FolderPath; } set { _FolderPath = value; }

our views are stored

67

Learn MVC step by step

}

public void Render(ViewContext viewContext, System.IO.TextWriter writer) { // Parsing logic <dateTime> // read the view file string strFileData = File.ReadAllText(_FolderPath); // we need to and replace <datetime> datetime.now value string strFinal = strFileData.Replace("<DateTime>", DateTime.Now.ToString()); // this replaced data has to sent for display writer.Write(strFinal); }

Step 2:-We need to create a class which inherits from “VirtualPathProviderViewEngine” and in this class we need to provide the folder path and the extension of the view name. For instance for razor the extension is “cshtml”, for aspx the view extension is “.aspx”, so in the same way for our custom view we need to provide an extension. Below is how the code looks like. You can see the “ViewLocationFormats” is set to the “Views” folder and the extension is “.myview”. public class MyViewEngineProvider : VirtualPathProviderViewEngine { // We will create the object of Mycustome view public MyViewEngineProvider() // constructor { // Define the location of the View file this.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.myview", "~/Views/Shared/{0}.myview" }; //location and extension of our views } protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath) { var physicalpath = controllerContext.HttpContext.Server.MapPath(viewPath); MyCustomView obj = new MyCustomView(); // Custom view engine class obj.FolderPath = physicalpath; // set the path where the views will be stored return obj; // returned this view paresing logic so that it can be registered in the view engine collection } protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath) { var physicalpath = controllerContext.HttpContext.Server.MapPath(partialPath); MyCustomView obj = new MyCustomView(); // Custom view engine class obj.FolderPath = physicalpath; // set the path where the views will be stored return obj; // returned this view paresing logic so that it can be registered in the view engine collection } }

Step 3:-We need to register the view in the custom view collection. The best place to register the custom view engine in the “ViewEngines” collection is the “global.asax” file. Below is the code snippet for the same. protected void Application_Start() { // Step3 :- register this object in the view engine collection ViewEngines.Engines.Add(new MyViewEngineProvider()); ….. }

Below is a simple output of the custom view written using the commands defined at the top.

If you invoke this view you

68

Learn MVC step by step

will see thisoutput.

How to send result back in JSON format in MVC? In MVC we have “JsonResult” class by which we can return back data in JSON format. Below is a simple sample code which returns back “Customer” object in JSON format using “JsonResult”. public JsonResult getCustomer() { Customer obj = new Customer(); obj.CustomerCode = "1001"; obj.CustomerName = "Shiv"; return Json(obj,JsonRequestBehavior.AllowGet); }

Below is the JSON output of the above code if you invoke the action via the browser.

What is “WebAPI”?

HTTP is the most used protocol. For past many years browser was the most preferred client by which we can consume data exposed over HTTP. But as years passed by client variety started spreading out. We have demand to consume data on HTTP from clients like mobile, JavaScript,windows application etc.

For satisfying the broad range of client “REST” was the proposed approach.

“WebAPI” is the technology by which you can expose data over HTTP following REST principles.

But WCF SOAP also does the same thing, so how does “WebAPI” differ?

SOAP

WEB API

Size

Heavy weight because of complicated WSDL structure.

Light weight, only the necessary information is transferred.

Protocol

Independent of protocols.

Only for HTTP protocol

Formats

To parse SOAP message, the client needs to understand WSDL format. Writing custom code for parsing WSDL is a heavy duty task. If your client is smart enough to create proxy objects like how we have in .NET (add reference) then SOAP is easier to consume and call.

Output of “WebAPI” are simple string message,JSON,Simple XML format etc. So writing parsing logic for the same in very easy.

Principles

SOAP follows WS-* specification.

WEB API follows REST principles. (Please refer about REST in WCF chapter).

With WCF also you can implement REST,So why "WebAPI"?

WCF was brought in to implement SOA, never the intention was to implement REST."WebAPI'" is built from scratch and the only goal is to create HTTP services using REST. Due to the one point focus for creating “REST” service “WebAPI” is more preferred.

How to implement “WebAPI” in MVC? Below are the steps to implement "webAPI”:Step1:-Create the project using the "WebAPI" template.

Step 2:- Once you have created the project you will notice that the controller now inherits from "ApiController" and you can now implement "post","get","put" and "delete" methods of HTTP protocol. public class ValuesController : ApiController {

69

Learn MVC step by step

// GET api/values public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; } // GET api/values/5 public string Get(int id) { return "value"; } // POST api/values public void Post([FromBody]string value) { } // PUT api/values/5 public void Put(int id, [FromBody]string value) { } // DELETE api/values/5 public void Delete(int id) { } }

Step 3:-If you make a HTTP GET call you should get the below results.

How can we detect that a MVC controller is called by POST or GET? To detect if the call on the controller is “POST” action or a “GET” action we can use “Request.HttpMethod” property as shown in the below code snippet. public ActionResult SomeAction() { if (Request.HttpMethod == "POST") { return View("SomePage"); } else { return View("SomeOtherPage"); } }

What is Bundling and Minification in MVC? Bundling and Minification helps us to improve request load time of a page thus increasing performance.

How does bundling and Minification increase performance?

Web projects always need CSS and script files. Bundling helps us to combine multiple JavaScript or CSS files into a single entity during runtime thus combining multiple requests in to a single request which in turn helps to improve performance.

70

Learn MVC step by step

Minification reduces the size of script and CSS files by removing blank spaces, comments etc. For example below is a simple JavaScript code with comments.

Note: Read in detail about Bundling in the Chapter 6

How can you test bundling in debug mode?

If you are in a debug mode you need to set “EnableOptimizations” to true in the “bundleconfig.cs” file or else you will not see the bundling effect in the page requests.

BundleTable.EnableOptimizations = true;

Explain the concept of View Model in MVC? In MVC Model represents Domain Data/Business Data. In simple words data related to our business.

MVC wont ends up here. We have to include one more layer in this architecture that is View Model. View Model will act as an intermediary between Model and View.

In View Model is View specific data. Controller when receives the request, Get the data in form of Model and then convert it into View Model and then bind it to view.

ViewModel may contain Color transformation logic, Data format transformation logic, Aggregation logic, Structure downsizing logic

What is the use of “AllowHTML” and “ValidateInput” attributes?

While working with MVC you may have noticed that MVC actions doesn’t allow posting HTML values. This is done to avoid cross site scripting security issues. Look at the following example where we are trying to post HTML to the MVC action.

But you can bypass this restriction by using one of the following 2 attributes 1) ValidateInput attribute at controller level or action level

2)

AllowHtml attribute at Mode Level

Explain unobtrusive JavaScript?

Unobtrusive JavaScript helps you to decouple presentation and behavior. Consider the below button code it has two parts one is the UI i.e. the button itself and second is the behavior i.e. “ShowAlert()”. <input type="button" onclick="ShowAlert()" id="btn" /> <script> function ShowAlert() { alert("Hello"); } </script>

In unobtrusive approach we write JavaScript in such a way that button JavaScript codewill be decoupled from the button’s html markup. It makes us change the behavior later in the stage without touching the markup. <script> function ShowAlert() { alert("Hello");

71

Learn MVC step by step

} var el = document.getElementById("btn"); el.onclick = ShowAlert; </script>

72