Setting up for ASP.NET MVC 4 and Mobile Web Development
As I just started learning MVC 4 (in fact MVC bits), I thought to try MVC Mobile web with jQuery Mobile MVC framework for switchable template for mobile and normal desktop web. In my quest to setup this, I came across good resources and thought to summarize them all in this blog post that help beginner quickly get on to it.
Visual Studio Express 2012
I am using Visual Studio 2012 Ultimate. But you can also use Visual Studio Express 2012 For Web to develop MVC 4 web applications. This version can be downloaded from here:
https://www.microsoft.com/visualstudio/eng/products/visual-studio-express-for-web
Regarding various MVC 4 project templates, you can visit following link:
https://metroapp.wordpress.com/2012/08/17/a-glance-at-asp-net-mvc-4-project-templates-in-visual-studio-2012/
More information about this version can be read here:
https://msdn.microsoft.com/en-us/library/dd537667.aspx
Install jQuery Mobile MVC library
Following is the self explanatory link to install this library from NuGet gallery.
https://nuget.org/packages/jquery.mobile.mvc
Mobile Emulator
So first thing needed for mobile web testing is mobile emulator. I was to install Android SDK and Electric Plum iPhone simulator. Then I came across Opera Mobile Emulator and decided to use it. But following are the options that you can try when deciding upon emulator.
- Asp.net site has the good list of mobile simulator. Both paid and free. Visit this link for more info:
https://www.asp.net/mobile/device-simulators
- Asp.net MVC site has the good list plus link to article where you can use your desktop version of the browser say Safari, IE, Chrome or Firefox by changing User agent string.
https://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features
- I had trouble finding the Windows version of the Opera Mobile Emulator while ago. Here is the direct link to it. Though this problem is solved right now but just in case you need the link.
https://www.opera.com/download/get.pl?sub=++++&id=35131
Currently Windows, Mac and Linux version are available here:
https://www.opera.com/developer/mobile-emulator
- Other way of having all iPhone, iPad, & Windows Phone simulator is to install WebMatrix 2 and open your MVC site in it and use these simulators.
https://www.microsoft.com/web/webmatrix/
There is well written blog post for this approach here:
https://www.refactorthis.net/post/2012/08/14/Emulating-iPhone-iPad-and-Opera-devices-to-debug-mobile-ASPNET-MVC4-apps-with-VS-2012-and-WebMatrix-2.aspx
Keep in mind…
Opera Mobile Emulator and other browser based simulator are not actually an emulator, so you really do not get any hardware emulation experience nor you evaluate any performance indication using it. The prime purpose of such simulators is to see how your website is rendering and code is doing. These simulators can not be taken for any performance related measurement of your website. And at times your site may render different slightly in some cases just like the desktop web world. Than it is better to use respective emulator that comes with SDKs of the platform you are targeting.
I am planning next blog series on some good LoB MVC applications making good use of jQuery for both Web and Mobile world based on switchable template and also serve as a good learning base for beginners in MVC world. Stay tuned.