Академический Документы
Профессиональный Документы
Культура Документы
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
Whats next?
15
15
16
16
16
17
17
17
18
18
18
18
18
19
19
19
20
20
20
20
20
20
21
21
22
22
22
23
23
23
24
24
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
26
INTRODUCTION
STEP 1:- OPEN THE GLOBAL.ASAX.CS FILE
STEP 2:- CUSTOMIZING THE URLS
STEP 3:- RUN THE APPLICATION
SO WHATS IN THE NEXT LAB
26
26
27
27
27
27
27
27
28
28
29
29
29
29
29
30
30
30
30
31
31
31
31
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
34
34
34
34
35
35
35
36
36
36
36
36
37
37
38
38
38
38
38
39
39
40
Lab 16:- Session management in MVC (ViewData, ViewBag, TempData and session variables)
40
41
41
41
42
43
43
43
44
44
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
47
48
48
48
49
50
50
51
51
52
52
53
53
53
54
55
55
55
55
56
56
Interview Preparation
58
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 cant. I cant 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 cant 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.
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. Its a complete book for learning MVC practically as
well as for preparing for interviews.
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.
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.
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 whats 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 forms action attributes 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, its 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 Microsofts 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.
10
Advantages:
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 ViewStateStateless 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.
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
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.
12
SEO
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. Its 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.)
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).
Business rules, logic and data and will be independent of other parts of MVC (controller
and View).
short it handles the user interaction and input logic. It knows about both Model and
View.
13
ASP.NET doesnt have support for ViewState and server controls, so we get feel of old
web here.
Lets talk about Advantages and disadvantages of ASP.NET MVC
Advantages:
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.
3.
4.
14
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.)
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.
Whats next?
I think by now you would have got clear idea about Web Forms and MVC. So whats next? Lets do a step by step demo on MVC
and lets 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.
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
So once you have all your pre-requisite its time to start with the first lab.
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
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>
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
Thats where the new session management technique has been introduced in ASP.NET
MVC framework i.e. ViewData.
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
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>
19
20
Lots of manual code was written in the controller to flourish the object and send data to the MVC view.
[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.
The HTML helpers 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
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 its time to attach the customer class with view, please refer
lab 5 for the same.
Html.TextBoxFor()
Html.TextAreaFor()
Html.DropDownListFor()
Html.CheckboxFor()
Html.RadioButtonFor()
Html.ListBoxFor()
Html.PasswordFor()
Html.HiddenFor()
Html.LabelFor()
Html.BeginForm
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
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.
In simple words because this is a simple .NET class we can easily instantiate the class and create automated unit tests for the
same. Thats what exactly we are going to do in our next steps.
the
as
23
24
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).
: Controller
GotoHome(){return View("Home");}
AboutUs(){return View("About");}
SeeProduct(){return View("Product");}
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 />
25
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
27
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.
We want the above validations to fire when the MVC URL is invoked with data.
28
If you try to specify value more than 100 you would get error as shown below. Please note that the error is confusing but its
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.
Also ensure that the partial view is in the same folder where your main view is. In case its 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
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;
}
}
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
Also note the call to EnableClientValidation method due to which client side validations are enabled.
<% Html.EnableClientValidation(); %>
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
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.");
Developers demanded for a clean, light weight view and with less
syntactic noise: - Answer was RAZOR.
So lets 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.
Once the project is created you can see the Razor file with the name .cshtml. Now the
_ViewStart page is nothing but its a common page which will be used by views for
common things like layouting and common code.
32
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");
}
}
@DateTime.Now
If you compare the above syntax with ASPX view you need to type the below code, so isnt
the syntax much simpler, neat and light weight.
<%= DateTime.Now%>
@if (DateTime.Now.Year.Equals(2011))
{
// Some code here
}
33
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 thats 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);
34
<authorization>
<deny users="?"/>
</authorization>
Once you can see the dependent DLLs been added to the project.
35
36
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");
}
}
37
timeout="2880"/>
38
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.
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 its 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();"/>
39
return View("LearnJquery");
}
}
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.
Session variables: - By using session variables we can maintain data until the browser closes.
Lets demonstrate the above fundamental with a demo.
40
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 lets put debug points in both the controller actions and lets 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
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
42
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 lets understand step by step how to implement MVC Asynch controllers.
43
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:
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
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 lets demonstrate a simple example of bundling and Minification with MVC 4.0 step by step.
is test
0;
1;
2;
Step 3:- Run and see how multiple calls are made.
45
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:-
Now bundling is all about making those two JavaScript calls in to one.
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
%>
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>
%>
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
Customer ViewModel
TxtCustomerName
TxtAmount
CustomerBuyingLevelColor
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.
Lets do a small lab to understand MVC view model concept using the
scenariodiscussed previously.
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.
48
}
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";
}
}
}
}
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
obj.Customer.Amount = 1000;
return View(obj);
}
}
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
51
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.
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.
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. Lets understand how?
FilterConfig class
public class FilterConfig
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
}
}
52
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.
Limitations of HandleErrorAttribute
1.
2.
3.
53
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"];
}
}
[MyExceptionFilter]
public ActionResult TestMethod(){}
}
54
55
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.
56
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
57
Interview Preparation
What is MVC?
MVC is an architectural pattern which separates the representation and the user interaction.
Its 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.
3-layer/tier
MVC
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.
58
59
Client-Side Validation
Razor
Readymade project
Areas
templates
default project templates
Asynchronous Controllers
Html.ValidationSummary Helper
DefaultValueAttribute in Action
JavaScript and Ajax
Model Validation
DataAnnotations Attributes
Model-Validator Providers
Templated Helpers
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") %>
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.
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") %>
Hidden fields
Session
Controller to Controller
No
Yes
No
Yes
Controller to View
Yes
No
No
Yes
View to Controller
No
No
Yes
Yes
60
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>
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
}
}
Below is a simple view of how the error message is displayed on the view.
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.");
62
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.
63
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");
}
}
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();
}
Jquery
64
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
There 12 kinds of results in MVC, at the top is ActionResultclass which is a base class that canhave 11subtypessas 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
66
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);
}
}
67
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
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
Protocol
Independent of protocols.
Formats
Principles
69
// 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.
70
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
But you can bypass this restriction by using one of the following 2 attributes
1) ValidateInput attribute at controller level or action level
2)
In unobtrusive approach we write JavaScript in such a way that button JavaScript codewill be decoupled from the buttons html
markup. It makes us change the behavior later in the stage without touching the markup.
<script>
function ShowAlert()
{
alert("Hello");
71
}
var el = document.getElementById("btn");
el.onclick = ShowAlert;
</script>
72