Techbubbles

Adaptive Rendering in ASP.NET 4.5

Adaptive Rendering also called responsive design taking the advantage of existing HTML markup and CSS to use inside the ASP.NET Web applications. This post outlines about Adaptive Rendering, display modes and out of the box ASP.NET MVC mobile template.What is unique about .NET 4.5 application templates that ships out-of-the box uses a technique called responsive design. Responsive design is functionality of CSS to redefine the layout properties of your page based on the web and devices that you are using,

image

The desktop experience of the default ASP.NET MVC4 application after running and resizing the browser windows looks as below

image

Once you are under 850 pixel width restriction, CSS will automatically compute with new set of rules for rendering the screen , it is standard CSS nothing specific to .NET.

image

Display Modes

Add a new view to your ASP.NET MVC 4 project called Index.mobile

image

Instead of building the mobile view from scratch, take index view mark up and paste in the new view and browse the view in mobile emulator and it will render you .index.mobile.cshtml page

image

what if you want to customise the view to specific type of device or model, you can do this inside Visual Studio. Open the Global.asax file and register the new view type with display mode provider as shown below

 

image

insert the display mode at the beginning of the stack.The contextcondition can be based on cookies, user context and headers as long as the result resolved to true or false. Now create a  new view index.WindowsPhone.cshtml in your project and change the header text so that you know it is your custom display mode, now run the application with browser you will get index.cshtml view, run with specific device emulator then you will get that index.windowsphone.cshtml view as shown below

image

so you can use the same URL to target different devices based on custom view and criteria.

Mobile Template

You have new template for Mobile Web applications in ASP.NET 4.5 MVC, create a new project and select the Mobile Template as shown below

image

Now run the application in browser for desktop view, you will notice that look is mobilish…. and then run in mobile emulator and it looks as below

image

It uses the JQuery UI to render the elements.If you open the index file then you will notice some html attributes that are specific to JQuery UI.

image

To read more details on Mobile Development and support follow http://www.asp.net/mobile.

Related Posts:

%d bloggers like this: