51Degrees.mobiandASP.NETMVC4.0

The annual Build conference announced and showcased many exciting innovations from Microsoft, but what interests us the most is the latest version of MVC.

Many of the changes to MVC4 are trying to make it more mobile friendly. As can be seen from PhilHaack’s presentation at Build, MVC now has jQuery Mobile in the box and allows multiple views for each controller depending on the device the server detected; and as Phil said at his talk, "Device detection is not trivial...[51Degrees]... adds a ton of device info to the browser files".

So exactly how would you integrate 51Degrees with MVC4? The Nuget repository along with the manner in which Views can be configured makes the whole process a breeze. This guide describes how to install 51Degrees from Nuget and then how to setup a view for a mobile device.

创新互联公司2013年至今，是专业互联网技术服务公司，拥有项目成都网站建设、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元义马做网站,已为上家服务,为义马各地企业和个人服务,联系电话:18982081108

But first we need to get MVC4.

1. Installing MVC4

MVC4 and Visual Studio 11 haven’t been officially released but previews have been made available for free download so developers can get a feel for the new tools available to them. Visual Studio 11 Developer Preview can be found here, and MVC4 can be found here. In my development I have been using Visual Studio 11 but an MVC4 installer is also available for Visual Studio 2010.

The first step is to create an MVC4 mobile web application. Open a new project and select ASP.NET MVC 4 Web Application from the Visual C#/web template (or Visual Basic, but this guide uses C#). If it isn’t listed make sure you’re viewing .NET Framework 4.5.

51Degrees.mobi and ASP.NET MVC 4.0

You should now have an MVC 4 web application that will compile to show a basic website. Before adding extra views as Phil Haack demonstrated, we’ll be installing 51Degrees.mobi Foundation.

2. Installing the Foundation

To install the Foundation we’ll be using Nuget. It is a content delievery system that is now bundled with Visual Studio 11, but if you’re using Visual Studio 2010 the plugin can be downloaded here.

Right click on your project in the Solution Explorer and select ‘Manage Nuget Packages…’, then search for 51Degrees.

51Degrees.mobi and ASP.NET MVC 4.0

51Degress maintains two packages on Nuget, one for ASP.NET and the other specifically for Microsoft WebMatrix. Choose the regular package. It will download the 51Degrees configuration,datafiles for detection and an example aspx page to show how to access device properties programmatically.

3. Configuring the Foundation

By default the Foundation redirects mobiles to an aspx page that lists their features. This page can be found at Mobile/Default.aspx. This can be deleted. The Foundation also has a separate xml configuration that can be accessed at App_Data/51degrees.mobi.config. In the App_Data you’ll also find two data files, wurfl.xml.gz and web_browser_patch.xml. Both of these are vital to the Foundation as they contain all the device data.

To use the new features of MVC4 you’ll need to remove some of the configuration from 51Degrees.mobi.config. Open the file and remove the entire ‘redirect’ section from ‘fiftyOne’. Device based redirection is no longer needed when multiple views are used.

4. Configuring your MVC Application

A view can be assigned to run under different conditions by adding a suffix before the file extension.

51Degrees.mobi and ASP.NET MVC 4.0

This is how the Solution Explorer looks in the MVC4 Mobile Template. By creating new view pages (or copying the old ones) and naming them in this way you are creating 4 separate views for Index that all use the same Model and Controller. The following screen shot shows views created forAndroid, iPhone and generic mobile.

51Degrees.mobi and ASP.NET MVC 4.0

To set the conditions for which view is used for which purpose some code needs to go into theApplication_Start event. Open the global.asax file and you should see this method:

protected void Application_Start()

{

AreaRegistration.RegisterAllAreas();

RegisterGlobalFilters(GlobalFilters.Filters);

RegisterRoutes(RouteTable.Routes);

}

It is in this method that you’ll need to register all the views you have and under what conditions and the priority they should be used in.

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("android")

{

ContextCondition = Context => Context.Request.Browser.Platform == "Android"

});

The “android” in the first line specifies the suffix that the DisplayMode will use and must correspond with the name used before the extension of the view page. The number before that specifies the priority, where 0 has the most importance. The third line specifies the condition, in this case if the device operating system is Android.

To create view conditions for all our views (Android, iPhone and mobiles) we need this code:

protected void Application_Start()

{

AreaRegistration.RegisterAllAreas();

//The Android view

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("android")

{

ContextCondition = Context => Context.Request.Browser.Platform =="Android"

});

//The iPhone view

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iphone")

{

ContextCondition = Context => Context.Request.Browser.MobileDeviceModel == "iPhone"

});

//The mobile view

//This has a lower priority than the other two so will only be used by a mobile device

//that isn't Android or iPhone

DisplayModes.Modes.Insert(1, new DefaultDisplayMode("mobile")

{

ContextCondition = Context => Context.Request.Browser.IsMobileDevice

});

RegisterGlobalFilters(GlobalFilters.Filters);

RegisterRoutes(RouteTable.Routes);

}

And that’s all you need to do. Your MCV4 application will now inspect each device for those conditions and send them to the right view. This feature is very powerful as you can have as many views as you like to cater to each devices needs without having to worry about breaking your site as MVC will choose the best view available.

The below screen shots show the pages rendered in pc browser:

The below screen shots show the pages rendered in Opera mobile Emulator and FireFox User Agent Switcher(iphone):

5. Conclusion

51Degrees.mobi with MVC4 provides a powerful solution to display optimised web pages based on 1000s of relevant device characteristics such as screen size, platform, input method or accepted content types particularly video.

Source code:http://www.kuaipan.cn/index.php?ac=file&oid=4876720616244128

网站名称：51Degrees.mobiandASP.NETMVC4.0
标题来源：https://www.cdcxhl.com/article2/pceeic.html

成都网站建设公司_创新互联，为您提供网站策划、外贸建站、网站制作、品牌网站制作、服务器托管、电子商务

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容