A Lap around ASP.NET MVC 4 Beta(Web API) for Mobile in VS 11 Beta Ultimate on Windows 8 Consumer Preview


While releaseing the concept of Windows 8 Developer Preview, the architecture & features of .NET framework 4.5 & ASP.NET 4.5 has already focused. With VS 11 Beta ultimate , the concept of asynchronus programming in ASP.NET 4.5 has started with its Asynchronus HTTP Request/Response paradigm. Now to start programming in MVC 4 beta for Mobile , you will have immense & inbuilt support of JQuery Mobile(JQuery.mobile.js , jquery.css files), HTML5 adaptive markups & CSS 3 media queries. To enable Mobile MVC 4 Web programming for fancy, VS 11 Beta includes inbuilt Page inspector support to examine the markup details, JScript rendering, CSS 3 style queries.

  • Next, to build up a MVC 4 Beta web project for ASP.NET 4.5 , create a new project from templates in VS 11 beta ultimate.

  • Select the Mobile Web from the selected templates & choose Razor /ASPX View according to  your selection.

  • Create the default project & examine the new file created called Packages.Config  which a inbuilt VS file containing all the .dll settings details along with their original version information installed in GAC of .NET 4.5.

  • Next , check the MVC 4 Web in IE10 with advanced JQuery , HTML 5 & CSS 3 media queries support.

  • Open the .cshtml pages in Page Inspector which is inbuilt with VS 11 beta Ultimate to examine the HTML5, CSS 3 styles  , javascript debugging features.

  • Enable the Page Inspector settings & check the live preview of your Web in Visual Studio 11 Beta  .

  • Now, the publish the Web in IIS 7.5 Express. Note though Windows 8 Consumer Preview has IIS 8 support but VS 11 Beta still works with IIS 7.5 express as local IIS. So deploy MVC 4 beta website in IIS 7.5 express via web deploy.

  • Now , check the MVC 4 Web URL in iOS 5 devices & check ASP.NET MVC 4 Web API Mobile web appearence.

 

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

14 Responses to A Lap around ASP.NET MVC 4 Beta(Web API) for Mobile in VS 11 Beta Ultimate on Windows 8 Consumer Preview

  1. bkdprakash says:

    Hi, This is Prakash, working on HTML5 app implementing Manifest file for Offline feature. My app is working fine in Google Chrome with PC , but not working on Firefox (10.0.2 version) . and also not working in mobile devices like iPhone, Android. Is there any specific standards need to follow while implementing manifest file for the browsers like Firefox , Safari and soon. Please reply asap. Thanks

    • imcuteani says:

      To find the Offline Application Cache folder for firefox. Open a new tab window of Firefox and enter about:cache as an URL.
      Take note of the Firefox cache folder path specified in Cache Directory: and browse to this folder with Windows Explorer.

      C:\Documents and Settings\pc-user-name\Local Settings\Application Data\Mozilla\Firefox\Profiles\tg397oja.default\OfflineCache.
      To set Firefox cache folder maximum storage size,
      Click Tools -> Option -> Advanced -> Network
      Determine in Offline storage that how much in MBs you want to be stored at local drive

      Offline application cache works well with iPhone & Android.
      Please check out the following links for more details: iPhone: http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone

      Android: http://programming4.us/mobile/1580.aspx

      Hope this helps.

      Thanks,
      Anindita

  2. bkdprakash says:

    Thank you Anindita. Now I’m using asp.net MVC design pattern for implementing apps. Is there any standard architecture for implementing htlm5 mobile apps? Could you please suggest or guide me if any architecture.

    • imcuteani says:

      To work with HTML 5 , there ‘s itself no defined design patterns itself. But basically it’s great to implement MVC / Web API using HTML 5, JQuery/Dojo for Mobile Web development. It’s cross – platform & all most supported by all HTML friendly mobile browsers.

      Thanks,
      Anindita

  3. bkdprakash says:

    Hi Anindita, I have Employee list and displaying employee detailed in a gridview using Offline app. When the page is loading first time, it is fetching data fom the server ( means I’m getting latest data). Once It is saved in Cache, even if I insert a new record, every time the page is loading from cache and not getting new records.
    For this, I tried to insert whole data into one sqlite table like IndexDB. But still I’m facing same problem.
    Could you please provide any solution for this.

  4. bkdprakash says:

    bkdprakash :
    Hi Anindita, I have Employee list and displaying employee detailed in a gridview using Offline app. When the page is loading first time, it is fetching data fom the server ( means I’m getting latest data). Once It is saved in Cache, even if I insert a new record, every time the page is loading from cache and not getting new records.
    For this, I tried to insert whole data into one sqlite table like IndexDB. But still I’m facing same problem.
    Could you please provide any solution for this. Thanks

    • imcuteani says:

      While your app is offline , then in order to access the resources of your app, you nee Offline Application Cache. But while you update the resources (.aspx, .css, db) , you need to update the manifest cache itself.

      To programmatically update the cache, first call applicationCache.update(). This will attempt to update the user’s cache (which requires the manifest file to have changed). Finally, when the applicationCache.status is in its UPDATEREADY state, calling applicationCache.swapCache() will swap the old cache for the new one.

      var appCache = window.applicationCache;

      appCache.update(); // Attempt to update the user’s cache.

      if (appCache.status == window.applicationCache.UPDATEREADY) {
      appCache.swapCache(); // The fetch was successful, swap in the new cache.
      }

      Details: http://www.html5rocks.com/en/tutorials/appcache/beginner/

      • bkdprakash says:

        Thanks for reply. I have done same thing previously. This is the code which I have used in my app. But it was not working properly. Could you please help me.

        $(document).ready(function () {debugger
        var appCache = window.applicationCache;
        appCache.update();

        switch (appCache.status) {
        case appCache.UNCACHED: // UNCACHED == 0
        return ‘UNCACHED’;
        break;
        case appCache.IDLE: // IDLE == 1
        return ‘IDLE’;
        break;
        case appCache.CHECKING: // CHECKING == 2
        return ‘CHECKING’;
        break;
        case appCache.DOWNLOADING: // DOWNLOADING == 3
        return ‘DOWNLOADING’;
        break;
        case appCache.UPDATEREADY: // UPDATEREADY == 4
        return ‘UPDATEREADY’;
        break;
        case appCache.OBSOLETE: // OBSOLETE == 5
        return ‘OBSOLETE’;
        break;
        default:
        return ‘UKNOWN CACHE STATUS’;
        break;
        };

        if (appCache.status == window.applicationCache.UPDATEREADY) {
        appCache.swapCache(); // The fetch was successful, swap in the new cache.
        }
        });

      • imcuteani says:

        The code given here is looking fine. Have to check other steps followed. Could you please test the offline app cache in a real device’s browser?

        Thanks,
        Anindita

  5. meera999 says:

    Hi Anindita,

    This is Meera, i am new to MVC4 Mobile Web Site design. I have created a sample web site using VS2010 MVC4. I am able to test my mobile web site using Windows Phone Emulator and it looks awesome. But my client wants to test with iPhone and Android.

    Could you please let me know how to test my http://localhost:507 URL in iPhone and Android?

    Appreciate your help!!!

    Thanks
    Meera

  6. bkdprakash says:

    Hi Anindita, i have a asp.net page with some list. That list will bind dynamically. Whenever I select any item from the list, then that page will redirect to target page based on selectedItemId (right now I’m using Querystring for passing selectedItemId). This functionality is working fine in Online. Coming to Offline, how can we handle these dynamic page in manifest file? How can we maintain IDs in manifest?

    • imcuteani says:

      Hi Prakash,

      There is still now no such way to maintain dynamic pages in cache.manifest. One thing is can be done to include the IDs in info.plist for php or .ashx files for asp.net.

      Offline app cache is built to provide a response to client in absence of network. You can provide any standard web page/ img as offline response.

      Thanks,
      Anindita

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: