MVC (ModelViewController) is the popular Microsoft technology which enables you to build dynamic, datadriven, mobile websites, TDD site. HandsOn with ASP.NET MVC is not only written for those who are going to have affair with MVC for the 1st time, rather it is written in such a way that even experienced professional will love reading this book. This book covers all the tiny steps on using MVC at its best. With complete practical tutorials to illustrate the concepts, you will step by step build one End to End application which covers below mentioned techniques – Controllers, Views, Models, Forms and HTML helpers, Data annotation and Validation, Membership, Authorization, Security rather you will also learn how to bootstrap your design, then how to host the app in AZURE, Web API and Dependency Injection. It also covers MVC 5 and MVC 6 features like, • Mobile optimization, • Improved Scaffolding, • ASP.Net Identity, • One ASP.Net, Bootstrap • Common framework for MVC, • Web API and WebPages, • Self hosting, • Cloud Optimized, • No Build Dependency, • Cross platform support, •
1 Learn MVC step by step 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 9 TALK ABOUT VISUAL 9 WEB TECHNOLOGIES 9 VISUAL IN WEB 10 WHAT IS ASP.NET? 10 WHAT IS WEB FORMS? 10 ASP.NET 4.0 13 WHAT IS MVC? 13 WHAT IS ASP.NET MVC? 14 WHY ASP.NET WEB FORMS AND WHY ASP.NET MVC? 15 CONCLUSION 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 16 STEP 2:- ADD CONTROLLER 16 STEP 3:- ADD VIEW 17 STEP 4:- RUN THE APPLICATION 17 Lab2:- Passing data between controllers and views 17 STEP 1:- CREATE PROJECT AND SET VIEW DATA 18 2 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 18 STEP 2:- DEFINE THE CONTROLLER WITH ACTION 19 STEP 3:- CREATE STRONGLY TYPED VIEW USING THE CLASS 19 STEP 4:- RUN YOUR APPLICATION 19 Lab 4:- Creating simple MVC data entry screen 20 STEP 1:- CREATING YOUR DATA ENTRY ASPX PAGE 20 STEP 2:- CREATING THE CONTROLLER 20 STEP 3:- CREATE THE VIEW TO DISPLAY THE CUSTOMER OBJECT 20 STEP 4:- FINALLY RUN THE PROJECT 20 Lab 5:- using HTML helper to create views faster 20 STEP 1:- CREATE THE CUSTOMER CLASS 21 STEP 2:- CREATING THE INPUT HTML FORM USING HELPER CLASSES 21 STEP 3:- CREATE A STRONG TYPED VIEW BY USING THE CUSTOMER CLASS 22 STEP 4:- CREATING THE CONTROLLER CLASS. 22 Lab 6:- Unit test MVC projects 22 STEP 1:- CREATE THE SIMPLE DISPLAY CUSTOMER SCREEN PROJECT 23 STEP 2:- ADD A SIMPLE UNIT TEST PROJECT 23 STEP 3:- ADD APPROPRIATE PROJECT REFERENCES 23 STEP 4:- WRITE THE UNIT TEST 24 STEP 5:- FINALLY RUN THE UNIT TEST 24 Lab 7:- Understanding MVC outbound URLs 24 INTRODUCTION 24 STEP 1:- CREATE VIEWS 25 STEP 2:- CREATE CONTROLLER FOR THE VIEWS 25 STEP 3:- PROVIDE ACTIONS IN THE LINK 25 STEP 4:- ENJOY YOUR NAVIGATION 25 3 Learn MVC step by step Lab 8:- Understanding MVC routing 26 INTRODUCTION 26 STEP 1:- OPEN THE GLOBAL.ASAX.CS FILE 26 STEP 2:- CUSTOMIZING THE URL’S 27 STEP 3:- RUN THE APPLICATION 27 SO WHAT’S IN THE NEXT LAB 27 Lab 9:- Validating and setting default values to MVC URLS 27 STEP 1:- CREATE A SIMPLE CUSTOMER MODEL 27 STEP 2:- CREATE THE CONTROLLER CLASS 27 STEP 3:- APPLY VALIDATION USING REGEX ON THE MVC ROUTES 28 STEP 4:- TEST IF IT WORKS 28 Lab 10:- Partial views 29 STEP 1:- CREATE A SIMPLE VIEW WITH CONTROLLER 29 STEP 2:- CREATE A SIMPLE PARTIAL VIEW 29 STEP 3:- PUT SOMETHING IN PARTIAL VIEW 29 STEP 4:- CALL THE PARTIAL VIEW IN THE MAIN 29 STEP 5:- RUN THE PROGRAM AND SEE THE ACTION. 30 Lab 11:- Validation using Data Annotation 30 STEP 1:- DECORATE MODEL WITH DATA ANNOTATION 30 STEP 2:- CHANGE THE ASPX CODE 30 STEP 3:- ENABLE CLIENT VALIDATION 31 STEP 4:- WRITE YOUR CONTROLLER LOGIC 31 STEP 5:- RUN YOUR APPLICATION TO SEE THE ACTION 31 SUMMARY OF OTHER DATA ANNOTATION ATTRIBUTES 31 Lab 12:- MVC 3:- Razor 32 STEP 1:- INSTALL MVC 3 AND CREATE A PROJECT USING THE SAME 32 STEP 2:- SELECT RAZOR 32 STEP 3:- ADD A VIEW AND INVOKE THE SAME FROM CONTROLLER. 33 STEP 4:- PRACTICE RAZOR SYNTAXES 33 PRACTICE 1:- SINGLE LINE CODE 33 PRACTICE 2:- MULTIPLE LINES OF CODE 33 PRACTICE 3:- FOR EACH LOOP AND IF CONDITIONS 33 PRACTICE 4:- DO NOT WORRY ABOUT @ 34 4 Learn MVC step by step PRACTICE 5:- TO DISPLAY @ 34 PRACTICE 6:- HTML DISPLAY WITH RAZOR 34 Lab 13:- MVC Security (Windows Authentication) 34 STEP 1:- ENABLE WINDOWS AUTHENTICATION 34 STEP 2:- JUST SOME DEFECTS 35 STEP 3:- APPLY AUTHORIZE TAGS ON YOUR CONTROLLERS / ACTIONS. 35 STEP 4:- CREATE SETUP 35 STEP 5:- CREATE IIS APPLICATION 36 STEP 6:- PUBLISH 36 STEP 7:- RUN THE CONTROLLER AND ACTION 36 Lab 14:- MVC Security (Forms Authentication) 36 STEP 1:- DEFINE THE LOGIN PAGE CONTROLLER 36 STEP 2:- CREATE THE INDEX VIEW 37 STEP 3:- VALIDATE CREDENTIALS 37 STEP 4:- AUTHORIZE ATTRIBUTE 38 STEP 5:- CHANGE “WEB.CONFIG” FILE 38 STEP 6:- SEE FORMS AUTHENTICATION IN ACTION 38 Lab 15:- JSON, MVC and JQuery 38 STEP 1:- CREATE A SIMPLE CUSTOMER MODEL 38 STEP 2:- EXPOSE CUSTOMER OBJECT AS JSON 39 STEP 3:- CONSUME THE JSON CONTROLLER IN JQUERY 39 STEP 4:- RUN THE APPLICATION AND SEE THE DATA 40 Lab 16:- Session management in MVC (ViewData, ViewBag, TempData and session variables) 40 STEP 1:- CREATE TWO CONTROLLERS “DEFAULTCONTROLLER1” AND “DEFAULTCONTROLLER2”. 41 STEP 2:- SET SESSION, TEMPDATA, VIEWDATA AND VIEWBAG 41 STEP 3:- READ SESSION, TEMPDATA , VIEWDATA AND VIEWBAG VALUES 41 Lab 17:- Asynch controllers 42 STEP 1:- INHERIT FROM ASYNCCONTROLLER CLASS 43 STEP 2:- MARK METHODS WITH ASYNC APPENDED 43 STEP 3:- CREATE THE COMPLETED METHOD 43 STEP 4:- ENSURE TO CREATE “SOMEHEAVYMETHOD.ASPX” VIEW 44 5 Learn MVC step by step STEP 5:- RUN AND ENJOY 44 Lab 18:- MVC bundling and Minification 44 UNDERSTANDING MINIFICATION 45 STEP 1:- CREATE A MVC PROJECT WITH EMPTY TEMPLATE 45 STEP 2:- CREATE A CONTROLLER WHICH INVOKES A VIEW 45 STEP 3:- RUN AND SEE HOW MULTIPLE CALLS ARE MADE. 45 STEP 4:- REFERENCING “SYSTEM.WEB.OPTIMIZATION” 46 STEP 5:- THE BUNDLECONFIG FILE 46 STEP 6:- CALL THE BUNDLE CONFIG FILE FROM GLOBAL.ASAX.CS FILE 46 STEP 7:- RENDER THE BUNDLES IN THE VIEW 47 STEP 8:- WATCH YOUR BUNDLING AND MINIFICATION IN REAL 47 Lab 19:- MVC View Model 47 WHAT KIND OF LOGIC VIEW MODEL CLASS WILL CONTAIN? 48 STEP 1:- CREATE THE CUSTOMER MODEL 48 STEP 2:- CREATING THE VIEW MODEL 48 STEP 3:- CONSUME VIEW MODEL IN THE VIEW 49 SHOULD VM BE COMPOSED OR INHERITED. 50 ADVANTAGES OF VM 50 Lab 20:- MVC Exception Handling 51 INITIAL SETUP FOR OUR LAB 51 LOCAL LEVEL EXCEPTION HANDLING 52 GLOBAL LEVEL EXCEPTION HANDLING 52 DISPLAYING ERROR DETAIL IN ERROR VIEW 53 DIFFERENT VIEWS FOR DIFFERENT EXCEPTIONS 53 LIMITATIONS OF HANDLEERRORATTRIBUTE 53 EXTENDING HANDLEERRORATTRIBUTE 54 “RESOURCE CANNOT BE FOUND” EXCEPTION 55 HOW GLOBAL LEVEL HANDLEERRORATTRIBUTE IS DIFFERENT FROM APPLICATION_ERROR? 55 Lab 21:- Areas in MVC 55 WHAT IS AREA AND WHY AREA? 55 HOW TO USE AREAS? 56 AREAS VS. FOLDERS? 56 Interview Preparation 58 6 Learn MVC step by step 7 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 t one thing to him . My sister Ujjwala Kadu d everything . 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 m 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. 8 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. 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. 9 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 Many people say ASP.NET MVC replaced ASP.NET Web Forms. 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. 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. 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. 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? 10 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. 1. First make the self- 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, 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? 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 line of code. With Web Forms Microsoft tried to bring the Visual Basic model into web. [...]... 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... /> 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. .. principles MVC principle says that hit should first come to the controller but by specifying 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. .. 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... 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... 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 and tag as shown below 34 Learn MVC step by step Step 2:- Just some defects In MVC 3 template there is a small... 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... 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’s where the new session management technique has been introduced in ASP.NET MVC framework i.e ViewData Step1 :- Create project and... 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:-... 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