MVC

ViewEngines in MVC are responsible for generating the HTML from the view ,it does this
by locating the view and rendering it.Views in MVC are templates which contains code and markup. ViewEngines search for the views in specific locations.This is an example of convention over configuration which means that if we follow certain conventions then our application just works.

So the ViewEngine expects the view files to be located in specific folders.ViewEngine searches for a view in the following order:

∼/Views/Controller/ViewName.cshtml
∼/Views/Controller/ViewName.vbhtml
∼/Views/Shared/ViewName.cshtml
∼/Views/Shared/ViewName.vbhtml

After locating the view it is rendered and is returned to the browser.One important thing to remember about views is that the view files are compiled into c# or vb classes at run time.

Two of the main View Engines in MVC are:

• ASPX or WebForms view engine
• Razor View Engine

Both have different syntax.While the web forms views have syntax which is similar to the webforms in ASP.NET ,razor has a more fluent syntax though and is mostly used.Razor is the default view engine in MVC.

We can select the view engine for our view whiling adding a new view in our application

Razor Syntax

Razor has a fluent syntax which allows us to easily transition  between code and markup.So while writing code in a razor view we are not forced to use unnecessary language elements.There are few important ways using which we can write code in a razor view.

Code blocks

In razor @ is an important character and is used frequently when writing code.

Code blocks are used to contain single or multiple statements in the view.The code declared in the code block gets executed.The code is contained within the @{ and } as @{ code goes here }

@{
@*razor code block*@
var message = "Hello world!";
}

Notice that each of the statements in the code block ends with a semicolon.

We do not require opening and closing braces { and } while using loops such as foreach

@foreach(var item in lst)
{
@item
}

Inline expressions

Unlike code blocks which executes code, expressions does not execute any code and returns some value which is rendered in the output.Expressions does not end with a semicolon and are often mixed with markup.

<p>
Today is @DateTime.Now.Date and time is @DateTime.Now.TimeOfDay
</p>

An important feature of the output rendered by razor is that it is HTML encoded.This prevents security vulnerabilities such as cross site scripting attacks.If we do not want to HTML encode the output then we can use the Raw() method as:

@Html.TextBoxFor(m=> m.EmployeeName)

Comments

We can use comments to add additional information to the code or to prevent some code from executing.The comments are not included in the response that is sent to the end user and thus remains only on the server.

To comment some portion of code or markup we use the @* characters:

@* This is a razor comment*@

Apart from using this razor syntax for commenting the code we can use the commenting syntax provided by a specific language.

/*This is a c# comment in a razor view*/

Creating strongly typed view

To create a view which is based on a particular model we use the @model declarations as:

@model IEnumerable<Employees>

Notice that the model starts with lowercase “m”.And when referring to the model we have declared in the view we write @Model as:

@foreach(Employee emp in @Model)
{
@emp
}

Notice that the Model here starts with uppercase “M” unlike the @model statement which we use to define the model for our view.

Importing namespaces in razor view

We can import the required namespaces in the view with Using statement as:

@using System

Special View files

Views/_ViewStart.cshtml             The code in this file is executed prior to the code in any view.If we look at the default  _ViewStart.cshtml file it contains the following code block:

@{
Layout = “~/Views/Shared/_Layout.cshtml”;
}

The above code sets the Layout section.Since the code in this file is executed prior to the code in any view ,in effect this means that the Layout for every view is set to the above value.This avoids repeating the common code in every view.

Views/Shared/_Layout.cshtml   This file defines the common layout for our views.Its similar to the master pages in WebForms

Advantages of Razor

As we have seen razor provides few advantages over other view engines

• We can easily transition between markup and code
• Less typing is required
• Code is easy to read and understand

Follow on:

In ASP.NET MVC applications routes are used to map the URL which browser requests with the action methods and controllers.This mapping is the responsibility of the routing system.The routes are defined in the RouteConfig.cs file in the App_Start folder of the application.

If we look in the  file this is the default route defined

 public static void RegisterRoutes(RouteCollection routes)
   {
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

);

  }

The above route will map the requested URL with the controller and action methods and will use the default if none of the values are specified in the URL.

So the URL pattern in the route maps the request to the action method and controller.But what if we want to further restrict the matched URL by defining additional matching conditions.We can do so using the route constraints in MVC.

We will add a new route called “HomePage” which will match the controller and action methods to the URL.

routes.MapRoute(
name: "HomePage",
url: "{controller}/{action}",
defaults: new { controller = "HomePage", action = "Welcome" },
constraints: new { action="^Welcome$"}

If we run the application we will get the expected response in the browser.

But now if we change the last segment in the URL to “x” and make the request we will get the following response in the browser.

This is because we have not defined any action method called “x” in the HomePageController class.Our HomePageController class only defines the Welcome action method so far.This is where constraints are used in routing.We can restrict the URL’s from matching our routes using constraints.Constraints are defined in an anonymous type as a parameter to the MapRoute() method.

We can prevent the URL’s  which consists of non-existing action methods from matching this route using constraints

routes.MapRoute(
name: "HomePage",
url: "{controller}/{action}",
defaults: new { controller = "HomePage", action = "Welcome" },
constraints: new { action="^Welcome$"}
);

The above constraint will restrict the URL’s to match our route only when the action segment variable contains the value “Welcome”.

We can also separate multiple values using the “|” character as:

action="^Welcome$|^Details$"

Instead of defining a specific constraint value for a segment we can also use regular expressions so any pattern matching the expression will satisfy the constraint.For example the following will match any url in which action segment starts with “H”

action= “^H.*”

There are also constraint classes using which we can check if a segment variable is of specific data type.The common constraint classes are:

Constraint	Description
DoubleRouteConstraint()	Matches if segment value can be converted to a double
FloatRouteConstraint()	Matches if segment value can be converted to a float
IntRouteConstraint()	Matches if segment value can be converted to a int
RangeRouteConstraint(min, max)	Matches if segment value can be converted to a int and lies between the specified range

 

Follow on:

Websites today are accessed from many different types of devices.So unlike the web applications of the past which were accessed mainly from the desktop browser ,web applications of today needs to be designed considering how the web site will appear and work on different devices and screen sizes.

While considering mobile device support ,”user agent” is an important browser setting to consider.Websites determine the browser and the device the browser is running on using the user agent setting.Our website can easily determine the type of the device or platform on which browser is running and then return the appropriate HTML and css.
For example a mobile device has a smaller screen size than a desktop.The navigation and user input controls which works well on a desktop might not be user friendly on a mobile device.

So it is the responsibility of our website to generate web pages which the user can access easily on the device he is using making the request.Fortunately MVC supports creating such applications.

MVC provides support for creating web sites which target different devices.We can uses HTML5 and CSS3 features for creating multitargeted sites.Although we can create applications which target different types of devices such as iOS and Windows ,this requires learning native application development for different platforms.So using MVC we can create one site which targets different devices instead of creating separate applications for different platforms.

Two important ways which we can use to develop MVC applications targeting different devices are:

1.Adaptive rendering This means the website is displayed differently depending on the device making the request.For example we can apply different styles depending on the device making the request.

2.Display Modes   Unlike adaptive rendering in which we change the style based on the browser making the request using Display Modes we can send completely different markup based on the browser.This uses convention based approach to select the mobile views.

Adaptive Rendering

This uses two important concepts

ViewPort Meta tag    Viewport meta tag is an important part of creating cross device website or a website that is flexible enough to work on different devices.
To understand the use of viewport we need to think what happens when we request a web page from a mobile device.

The browser on the mobile device assumes that we are making a request from a desktop and wants to see entire page at a time ,as will be the case when we make the request from the desktop browser.That is why the page displayed may not be much readable on a mobile device and needs to be zoomed in and out if our web site doesn’t support mobile devices.

We can specify to the browser the size we want it to use to display our page using the ViewPort Meta tag.So user can read our page on the mobile device browser without zooming in and out.We can specify the width using the ViewPort meta tag as

 <meta name="viewport" content="width=device-width">

 CSS Media Queries    CSS media queries are a feature of  CSS3 and defines the scope of the css style by using media features such as width and height.Media queries consists of expressions which are evaluated to true or false.So the style will be applied only if the expression evaluates to true.

For example using CSS media queries we can specify a css rule which will be applied only if the screen size falls within a certain range.The following css query will be applied only when device screen size is less than 600px ,which is usual for mobile devices.

@media only screen and (max-width: 600px) {
 .header {
 display: none;
 }
}

 Display Modes

We can create different versions of the views to render on different devices.For example we can create one view for a desktop browser and another view for a mobile browser.

So if we request the Login view from a mobile device then Login.Mobile.cshtml view will be rendered while if we make the request from a desktop browser then the Login.cshtml view will be rendered.The appropriate view is selected by the MVC framework using the convention that the view with “.Mobile” suffix will be used to serve the request to a mobile browser.

This feature gives us a lot of flexibility as we can design the view specific to a mobile device.For example we can create a view specific to iOS or Android.

We can set displaymode for devices in the global.asax ,at application startup.So we can set the display modes for windows phone and iphone as

windows phone

DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("WP") 
{ 
ContextCondition = (ctx => ctx.GetOverriddenUserAgent() 
.IndexOf("Windows Phone OS", StringComparison.OrdinalIgnoreCase) > 0) 
});

iphone

DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("iPhone") 
{ 
ContextCondition = (ctx => ctx.GetOverriddenUserAgent() 
.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) > 0) 
});

Now if we add the different views for windows and iphone,we just need to suffix the proper string and the appropriate view will be rendered depending upon the client’s OS.

• Login.WP.cshtml   for windows OS
• Login.Android.cshtml  for android OS.

Bootstrap framework

There is bootstrap framework available in MVC applications which helps us create responsive web applications.Responsive web applications are those which adjusts their style based on the clients viewport.Since MVC applications using bootstrap framework are responsive web applications so they adjust their layout depending on the client.

So as we have seen ASP.NET MVC Mobile Features helps it easy to create web sites which works efficiently on different devices.

Follow on:

ASP.NET MVC is an ideal platform for building web applications but in certain scenarios we need to access the data instead.For example we may write an ajax method and call the Action method which may return JSON response.This approach works but if our need is only accessing the data and the business logic then instead of using MVC ,WebAPI framework is a better option.Unlike the MVC framework which is supposed to return the HTML response ,WebAPI framework returns the data ,this is what we require in many scenarios such as when making ajax requests to update page content.

ASP.NET WebAPI uses many of the same concepts as the MVC framework like routes,controllers.But WebAPI differs from the MVC in the following ways

New Namespaces

In ASP.NET WebAPI instead of classes and interfaces being defined in the System.Web and System.Web.Mvc namespaces following two namespaces are used

• System.Web.Http   Provides WebAPI functionality
• System.Net.Http     Provides objects for implementing the HTTP in application

No Dependency on System.Web

System.Web is a monolithic assembly which contains much of the functionality of ASP.NET.It is used both by MVC and WebFoms.Since WebAPI was released after MVC and WebForms ,it’s classes and other types are not dependent on System.Web assembly.ASP.NET have been moving towards a design where developers can just select the required services and not enforced to include all the functionality.

In the following ASP.NET WebAPI example we will be creating a simple controller which returns the data to the client.

1)Select  File –>New –>Project option. In the new project dialog select ASP.NET MVC application item

2)In the Select  a template  dialog we select the WebAPI template and click OK.

If we look in the solution explorer ,most of project items are similar to the ones in a MVC project.

In the controller folder we can find a ValuesController class which has been automatically created. ValuesController class is a controller class.It differs from the MVC controller in the following ways.

• Instead of the Controller class it derives from the ApiController
• There are different methods in the class which corresponds to the HTTP methods POST,GET,PUT and DELETE.These methods are called based on the HTTP method used to make the request.

If we look in the WebApiConfig.cs file which contains the WebApiConfig class ,it defines a Register method.Register method defines the routes in the application.

public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}

Unlike the MapRoute() method in MVC ,WebAPI adds the routes using the MapHttpRoute() method.

There is one important difference to understand between WebAPI and MVC.Instead of explicitly mapping action methods using the routes ,the methods are called depending upon the HTTP verb being used to access the controller.For example if the verb used in the request is GET then the WebAPI will look for a method starting with GET.This is an example of convention over configuration.

We can call the Get method in the controller class using the following ajax method.

For Get requests we need to pass the type as “GET”

$.ajax({
url: "http://localhost:portNumber/api/Values",
type: "GET",
success: function (data) {
//success
}
});

If we need to call the POST method we need to pass the type as “POST” in the ajax method.

$.ajax({ 
url: 'http://localhost:portNumber/api/Values/', 
type: 'POST', 
data: JSON.stringify(data), 
contentType: "application/json;charset=utf-8", 
success: function (data) { 
//success
}, 
error: function () { 
//error
} 
});

 

Follow on: