Infragistics ASP.NET controls

Emulating iPhone, iPad, and Opera devices to debug mobile ASP.NET MVC4 apps with VS 2012 and WebMatrix 2.

Visual Studio 2012RC and ASP.NET MVC4 Mobile sites

I've recently downloaded Visual Studio 2012 RC to experiment with the latest and greatest that .NET 4.5 has to offer.  The installation took around an hour and a half.

What's new in .NET 4.5 you ask?  Here's a comprehensive list from (sorry Scott!) http://msdn.microsoft.com/en-us/library/ms171868(v=vs.110).aspx .

 

ASP.NET MVC4 mobile sites

I started by launching VS 2012 and clicking on new project and then browsing to samples.  I clicked on c#, my language of choice and I browsed through many of the interesting samples until I came across the ASP.NET MVC 4 Mobile features sample.

Once the sample loaded, I noticed a nice feature of VS 2012.  The IDE allows you to choose the browser in which  to debug your ASP.NET applications.  Since we are dealing with an ASP.NET MVC 4 Mobile application, I thought it was only natural for me to seek out mobile device emulators to use to view the websites.  It turns out Visual Studio 2012 makes this easy.

 

 

You start by clicking the browser drop down list located next to the green "play" (debug) button.


 

How to add custom emulators


I'm sure you've noticed from the screenshot that I have a few emulators loaded in my browser list.  These aren't

there by default, however, it's easy to add them.

 

Opera Mobile Emulator

The Opera mobile emulator can be downloaded from the following address 

http://www.opera.com/developer/tools/mobile/

 

Once you've installed the emulator, all you have to do is click on the browser drop down in VS 2012 and

click "Browse With"

 

You are then prompted with the Browse With dialog box that lists all available browsers.  

Next, you click on Add and you are then prompted with the add program prompt.

 

Add program

 

You simply browse to locate the Opera Emulator executable and enter a friendly display name.  

If you used the default installation settings, the executable can be found in 

C:\Program Files (x86)\Opera Mobile Emulator\OperaMobileEmu.exe.

 

The iPhone and iPad emulators.

In order to add the iPhone and iPad emulators, you basically have to follow the same set of steps.  

you must set the application arguments associated with the emulator mode that you wish to operate in.  

To install the emulator, I used WebMatrix 2.  You can find WebMatrix2 in the Microsoft Web Platform Installer 4.0

located at http://www.microsoft.com/web/downloads/platform.aspx

 

I found the following instructions under this blog entry by Scott Hanselman 

http://www.hanselman.com/blog/SimulatingAnIPhoneOrIPadBrowserForASPNETMobileWebDevelopmentWithWebMatrix2OrVisualStudio2012.aspx 

From the Run menu, select Add new...From here, you'll go to the Browser Extension

area where you can add the iPhone and iPad emulators to your system.

  

 

Once you've installed the emulators, you use the same VS 2012 browse and

add directions as before to add the iPad and iPhone emulators to your VS 2012 browser list.


Here are the configurations for the iPad and iPhone.

 

iPhone settings

 

path 

C:\Users\budbjames\AppData\Local\Microsoft\WebMatrix\Extensions\20RC\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe

 

 

iPad configuration

 

path 

C:\Users\budbjames\AppData\Local\Microsoft\WebMatrix\Extensions\20RC\iPadSimulator\ElectricMobileSim\ElectricMobileSim.exe

 

 

Once you've added the emulators, you can browse the mobile site sample

application using the device of your choice.

 

Here are some screenshots for your reference.

 

Opera mobile emulator

 

 

iPad

 

 

 

iPhone

 



Conclusion

And that's it!  That's all it takes to view an ASP.NET MVC 4 mobile app in

3 different emulators.  I'm very excited about VS 2012 and the possibilities that it

and the .NET 4.5 framework have created.

I plan to post more articles related to .NET 4.5 as I evaluate the framework.  

I'm particularly interested in the added improvements regarding parallel computing.

I'd like to give a special thanks to Scott Hanselman for his post regarding WebMatrix 2.

Stay tuned and thanks for reading! 

~/Buddy James

www.refactorthis.net

http://www.twitter.com/budbjames

kick it on DotNetKicks.com  



Comments (1) -

Hannes
Hannes
5/28/2013 6:42:56 AM #

Very good article. Im using opera now.

<a href="http://www.google.de/">g</a>; - http://www.google.de/

Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About the author

My name is Buddy James.  I'm a Microsoft Certified Solutions Developer from the Nashville, TN area.  I'm a Software Engineer, an author, a blogger (http://www.refactorthis.net), a mentor, a thought leader, a technologist, a data scientist, and a husband.  I enjoy working with design patterns, data mining, c#, WPF, Silverlight, WinRT, XAML, ASP.NET, python, CouchDB, RavenDB, Hadoop, Android(MonoDroid), iOS (MonoTouch), and Machine Learning. I love technology and I love to develop software, collect data, analyze the data, and learn from the data.  When I'm not coding,  I'm determined to make a difference in the world by using data and machine learning techniques. (follow me at @budbjames).  

Related links

Month List