Penyesuaian Tampilan pada Browser Mobile dengan ASP.NET MVC (id-ID)

Internet tidak hanya diakses orang melalui komputer desktop, kini banyak orang akses Internet melalui piranti genggam (handphone). Oleh sebab itu, untuk membuat aplikasi Internet, perlu dipertimbangkan supaya dapat ditampilkan dan diakses dengan baik melalui browser desktop maupun piranti genggam.

Pada ASP.NET MVC kita dapat membuat tampilan dapat disesuaikan dengan browser pengguna. Untuk ASP.NET MVC 3 dapat menambahkan paket MobileViewEngines, sedangkan pada ASP.NET MVC 4 sudah merupakan fitur bawaan. Untuk menggunakan MobileViewEngines diperlukan database yang berisi daftar browser yang beredar di pasaran. Database browser yang lumayan lengkap dapat diambil dari http://51degrees.mobi/ (dapat juga diambil dari CodePlex dan NuGet).

Berikut adalah langkah penerapan MobileViewEngines pada ASP.NET MVC.

Pada ASP.NET MVC 3, install MobileViewEngines menggunakan NuGet: PM> Install-Package MobileViewEngines. Untuk ASP.NET MVC 4 tidak perlu dilakukan karena sudah menjadi fitur di dalamnya.
Download database dari http://51degrees.mobi/ (dapat juga diambil dari CodePlex dan NuGet). Dan tempatkan di dalam App_Data

Download library FiftyOne dari 51Degrees.mobi Foundation. Dan tambahkan referensi library ke project.
Pada web.config tambahkan konfigurasi sebagai berikut.

  <configSections> <sectionGroup name="fiftyOne"> <section name="log" type="FiftyOne.Foundation.Mobile.Configuration.LogSection, FiftyOne.Foundation" requirePermission="false" allowDefinition="Everywhere" restartOnExternalChanges="false" allowExeDefinition="MachineToApplication"/> <section name="redirect" type="FiftyOne.Foundation.Mobile.Configuration.RedirectSection, FiftyOne.Foundation" requirePermission="false" allowDefinition="Everywhere" restartOnExternalChanges="false" allowExeDefinition="MachineToApplication"/> <section name="wurfl" type="FiftyOne.Foundation.Mobile.Detection.Wurfl.Configuration.WurflSection, FiftyOne.Foundation" requirePermission="false" allowDefinition="Everywhere" restartOnExternalChanges="false" allowExeDefinition="MachineToApplication"/> </sectionGroup> </configSections> <fiftyOne> <!--<log> element controls where and how much information should be recorded in the log. logFile The location of the log file. (Mandatory) logLevel Values include Debug|Info|Warn|Fatal and control the level of information logged. Detauls to Fatal if not specified. (Optional)--> <log logFile="~/App_Data/Log.txt"
         logLevel="Info"/> <!--<wurfl> element controls device data and new device handling. wurflFilePath is the path of the main wurfl file (mandatory). wurflPatches defines where any additional patch files can be located (optional). newDevicesURL provides a URL where new devices found on your server can be recorded (optional). newDeviceDetail can be "minimum" or "maximum" and controls the HTTP header information sent to location defined in newDevicesUrl (optional). useActualDeviceRoot When set to true only Wurfl devices marked with the attribute "actual_device_root" are used to provide capabilities. Child devices will continue to be used to for device matching but their capabilities will not be used. This is an advanced feature for those familiar with WURFL. (optional) capabilitiesWhiteList Using the capabilityName attribute of the add elements lists the Wurfl capabilities required by the mobile web application. Providing this list prevents the entire list of capabilities from being loaded slightly improving performance.--> <wurfl wurflFilePath="~/App_Data/wurfl.xml.gz"
           newDeviceDetail="maximum"
           newDevicesURL="http://devices.51degrees.mobi/new.ashx"
           useActualDeviceRoot="false"> <wurflPatches> <add name="browser_definitions"
               filePath="~/App_Data/web_browsers_patch.xml"
               enabled="true"/> </wurflPatches> </wurfl> </fiftyOne>

Pada Global.asax.cs, tambahkan baris berikut.

System.Web.Configuration.HttpCapabilitiesBase.BrowserCapabilitiesProvider =
    new FiftyOne.Foundation.Mobile.Detection.MobileCapabilitiesProvider();

Khusus untuk ASP.NET MVC 3, tambahkan baris berikut

ViewEngines.Engines.Remove(ViewEngines.Engines.OfType<RazorViewEngine>().First());
ViewEngines.Engines.Add(new MobileCapableRazorViewEngine()); 
ViewEngines.Engines.Remove(ViewEngines.Engines.OfType<WebFormViewEngine>().First()); 
ViewEngines.Engines.Add(new MobileCapableWebFormViewEngine());

Tambahkan satu mobile template pada masing-masing file View dengan akhiran mobile.cshtml. Template inilah yang nantinya akan jadi tampilan di piranti genggam. Jadi ketika user mengakses dari browser desktop, maka template .cshtml yang akan dirender, ketika diakses melalui piranti genggam maka template .mobile.cshtml yang akan dirender.