locked
jQuery Mobile and dynamic data RRS feed

  • Question

  • User1123965013 posted

    What is the best model to use for dynamic data (SQL) being pulled from Server side code and represented in the jQuery Mobile framework for mobile devices?

    I have a few options i am considering:

    1) .aspx and .aspx.cs pages entirely. (ie. master pages (.aspx) with content placeholders wrapped in jQuery header, content and footer sections)

    OR

    2) HTML front end pages using .ajax (JSON or XML) requests to .aspx.cs code behind pages

    Tuesday, August 16, 2011 1:26 AM

Answers

  • User-1757793930 posted

    I wouldnt personally trust NopCommerce in a jQuery mobile state, that application relies heavily on the postback model and I have never tested the shopping cart in a mobile enviroment.

    Now there is a company mobi-cart (i am not affiliated) that we have used in the past for easy mobile applications iphone/android. Now I didnt do the customization or integration but may be worth checking out. This is an app not a web-mobile store, if you used it you could write a detection script that detects the mobile browser and shows a splash page to download your app. Or continue to the full webstore....

    Back to your questions.

    Now if you tried to create your own ajax html system you may have some issues especially in the shopping cart. Remeber everything in nopCommerce is based on the user session. (nopContext) which is a real pain in ... when trying to integrate into another system. 

    If a mobile app is not a decent solution this is the path I would take for rapid development.

    Create a theme that is mobile friendly stripping out all the non-important details ie. flash banners (not supported on iPhones), heavy background graphics, large sidebars, and focus on quick touch friendly menus that are not intrusive.

    Create a store splash page with links to download the mobile applications and show this when the user first comes to the store by a small banner at the top of the page (with an option to hide) -> Remeber if you have a mobile application on the users phone this opens you up to MUCH more traffic as they are more likely to come back if they have an app for it.. We love apps.

    Then go back and trim more fat..

    Once it is nice and skinny put the web theme set your application back to your regular site theme. 

    The next step will actually override the current handeling of the themes in NopCommerce. Nop Commerce has, burried deep in a BasePage, a method that sets the theme to the current theme for your store. What we will do is create a property in your nop context, and create a setting for your mobile theme. The reason for this is if we do it right in the first place it works in the future

    • Login to your store administration portal and go to Configuration -> All Settings
    • Now click the Add New button and lets add the setting Display.MobileTheme and set the value to the name of your mobile Theme (name not path) and click add
    • Now open the source in visual studio and locate the file Nop.BusinessLogic.NopContext.cs and locate the property WorkingTheme and create a new property below such as
    /// <summary>
            /// Gets the current mobile theme (e.g. darkOrange)
            /// </summary>
            public string WorkingMobileTheme
            {
                get
                {
                    string defaultTheme = IoC.Resolve<ISettingManager>().GetSettingValue("Display.MobileTheme");
                    if (!String.IsNullOrEmpty(defaultTheme))
                        return defaultTheme;
                    return this.WorkingTheme;
                }
            }
    • Now that we have a property in the NopContext this is accessible from all pages etc and will follow the same singleton pattern of all other properties, including using the IoC controllers.
    • Next we need to detect mobile browsers when the user is viewing the page. Luckily all NopCommerce front end pages inherit a base page located at NopCommerceStore.Controls.BaseNopFrontendPage.cs, locate the Pre_Init event handler scrolling to the very end of the method where you find the following code
    if (!String.IsNullOrEmpty(NopContext.Current.WorkingTheme))
                {
                    this.Theme = NopContext.Current.WorkingTheme;
                }

    • This is the code that tells the current handler (Page) which theme to run [across all front end pages :)]. Create the following method after the pre-init handler. This method will attempt to detect a mobile browser.
    private static bool isMobileBrowser()
            {
                //GETS THE CURRENT USER CONTEXT
                HttpContext context = HttpContext.Current;
    
                if (context == null)
                    return false;
    
                //FIRST TRY BUILT IN ASP.NT CHECK
                if (context.Request.Browser.IsMobileDevice)
                {
                    return true;
                }
                //THEN TRY CHECKING FOR THE HTTP_X_WAP_PROFILE HEADER
                if (context.Request.ServerVariables["HTTP_X_WAP_PROFILE"] != null)
                {
                    return true;
                }
                //THEN TRY CHECKING THAT HTTP_ACCEPT EXISTS AND CONTAINS WAP
                if (context.Request.ServerVariables["HTTP_ACCEPT"] != null &&
                    context.Request.ServerVariables["HTTP_ACCEPT"].ToLower().Contains("wap"))
                {
                    return true;
                }
                //AND FINALLY CHECK THE HTTP_USER_AGENT 
                //HEADER VARIABLE FOR ANY ONE OF THE FOLLOWING
                if (context.Request.ServerVariables["HTTP_USER_AGENT"] != null)
                {
                    //Create a list of all mobile types
    
                    var agent = context.Request.ServerVariables["HTTP_USER_AGENT"].ToLower();
    
                    return (new[]
                    {
                        "midp", "j2me", "avant", "docomo", 
                        "novarra", "palmos", "palmsource", 
                        "240x320", "opwv", "chtml",
                        "pda", "windows ce", "mmp/", 
                        "blackberry", "mib/", "symbian", 
                        "wireless", "nokia", "hand", "mobi",
                        "phone", "cdm", "up.b", "audio", 
                        "SIE-", "SEC-", "samsung", "HTC", 
                        "mot-", "mitsu", "sagem", "sony"
                        , "alcatel", "lg", "eric", "vx", 
                        "NEC", "philips", "mmm", "xx", 
                        "panasonic", "sharp", "wap", "sch",
                        "rover", "pocket", "benq", "java", 
                        "pt", "pg", "vox", "amoi", 
                        "bird", "compal", "kg", "voda",
                        "sany", "kdd", "dbt", "sendo", 
                        "sgh", "gradi", "jb", "dddi", 
                        "moto", "iphone"
                    }).Any(x => agent.Contains(x));
    
                }
    
                return false;
            }
    • Now you may have to update the array at the end of the method as it may be outdated but at first glance has all the major guys.
    • With your method in place we will need to run an override for the theme setting method. So in our pre_init handler replace the theme switching code with something like below
    if (isMobileBrowser() && !string.IsNullOrWhiteSpace(NopContext.Current.WorkingMobileTheme))
                {
                    this.Theme = NopContext.Current.WorkingMobileTheme;
                }
                else if (!String.IsNullOrEmpty(NopContext.Current.WorkingTheme))
                {
                    this.Theme = NopContext.Current.WorkingTheme;
                }

    This should do it, now any mobile browser that comes along will be directed to your mobile theme and any regular browser will be directed to you main theme.

    Once you have completed those steps which shouldnt take more than a day to complete (as you have to build the theme) I would look into how you can enhance your system using jQuery mobile. 

    I hope this helps a bit...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 16, 2011 2:39 AM

All replies

  • User-1757793930 posted

    If I was personally going to build this sort of system I would go down the MVC3 Razor route. 

    When jQuery mobile creates pages it add elements to the page via ajax. So when you click a link it loads the page into the mobile device browser in the form of "Pages" which are really containers of your pages. The advantage of when a user navigates around the pages are loaded \ hidden \ shown depending on the current state of your request.

    Now why do I recommend mvc? 

    Well simply put the MVC model is NOT geared around Postback model but around the HTML model, view controller framework. This especially helpful when you start looking into multiple forms on the page, routing requests to the correct handlers.

    I have fought using the jQuery mobile framework with webforms (not saying it cant be done) but when i switched over to MVC the framework and pages flowed really nicely.

    Now when developing a mobile application it is important to keep the weight of your requests at an absolute minimum. This isnt so much of a framework choice tip but more of a general design rule.

    When loading your HTML keep your elements as minimal as possible, use proper CSS and try not to pack the browser full of useless code (as a poorly managed webforms application does easily).

    Tuesday, August 16, 2011 1:39 AM
  • User1123965013 posted

    Thanks for that advice. It also confirms what i have read in a lot of forums including jQuery mobile itself.

    The only problem is that i am dealing with an existing project (nopcommerce customised) that does not run as an MVC3 website. It is asp.net 4.0 web forms.

    I am not that familiar with programming in MVC3, but can you create an MVC3 mobile section within a web forms website project and still use the same business logic layers and DAL from nopcommerce?

    Hence why i think i might be stuck within web forms and HTML, .aspx & .aspx.cs pages.

    Tuesday, August 16, 2011 1:44 AM
  • User-1757793930 posted

    I wouldnt personally trust NopCommerce in a jQuery mobile state, that application relies heavily on the postback model and I have never tested the shopping cart in a mobile enviroment.

    Now there is a company mobi-cart (i am not affiliated) that we have used in the past for easy mobile applications iphone/android. Now I didnt do the customization or integration but may be worth checking out. This is an app not a web-mobile store, if you used it you could write a detection script that detects the mobile browser and shows a splash page to download your app. Or continue to the full webstore....

    Back to your questions.

    Now if you tried to create your own ajax html system you may have some issues especially in the shopping cart. Remeber everything in nopCommerce is based on the user session. (nopContext) which is a real pain in ... when trying to integrate into another system. 

    If a mobile app is not a decent solution this is the path I would take for rapid development.

    Create a theme that is mobile friendly stripping out all the non-important details ie. flash banners (not supported on iPhones), heavy background graphics, large sidebars, and focus on quick touch friendly menus that are not intrusive.

    Create a store splash page with links to download the mobile applications and show this when the user first comes to the store by a small banner at the top of the page (with an option to hide) -> Remeber if you have a mobile application on the users phone this opens you up to MUCH more traffic as they are more likely to come back if they have an app for it.. We love apps.

    Then go back and trim more fat..

    Once it is nice and skinny put the web theme set your application back to your regular site theme. 

    The next step will actually override the current handeling of the themes in NopCommerce. Nop Commerce has, burried deep in a BasePage, a method that sets the theme to the current theme for your store. What we will do is create a property in your nop context, and create a setting for your mobile theme. The reason for this is if we do it right in the first place it works in the future

    • Login to your store administration portal and go to Configuration -> All Settings
    • Now click the Add New button and lets add the setting Display.MobileTheme and set the value to the name of your mobile Theme (name not path) and click add
    • Now open the source in visual studio and locate the file Nop.BusinessLogic.NopContext.cs and locate the property WorkingTheme and create a new property below such as
    /// <summary>
            /// Gets the current mobile theme (e.g. darkOrange)
            /// </summary>
            public string WorkingMobileTheme
            {
                get
                {
                    string defaultTheme = IoC.Resolve<ISettingManager>().GetSettingValue("Display.MobileTheme");
                    if (!String.IsNullOrEmpty(defaultTheme))
                        return defaultTheme;
                    return this.WorkingTheme;
                }
            }
    • Now that we have a property in the NopContext this is accessible from all pages etc and will follow the same singleton pattern of all other properties, including using the IoC controllers.
    • Next we need to detect mobile browsers when the user is viewing the page. Luckily all NopCommerce front end pages inherit a base page located at NopCommerceStore.Controls.BaseNopFrontendPage.cs, locate the Pre_Init event handler scrolling to the very end of the method where you find the following code
    if (!String.IsNullOrEmpty(NopContext.Current.WorkingTheme))
                {
                    this.Theme = NopContext.Current.WorkingTheme;
                }

    • This is the code that tells the current handler (Page) which theme to run [across all front end pages :)]. Create the following method after the pre-init handler. This method will attempt to detect a mobile browser.
    private static bool isMobileBrowser()
            {
                //GETS THE CURRENT USER CONTEXT
                HttpContext context = HttpContext.Current;
    
                if (context == null)
                    return false;
    
                //FIRST TRY BUILT IN ASP.NT CHECK
                if (context.Request.Browser.IsMobileDevice)
                {
                    return true;
                }
                //THEN TRY CHECKING FOR THE HTTP_X_WAP_PROFILE HEADER
                if (context.Request.ServerVariables["HTTP_X_WAP_PROFILE"] != null)
                {
                    return true;
                }
                //THEN TRY CHECKING THAT HTTP_ACCEPT EXISTS AND CONTAINS WAP
                if (context.Request.ServerVariables["HTTP_ACCEPT"] != null &&
                    context.Request.ServerVariables["HTTP_ACCEPT"].ToLower().Contains("wap"))
                {
                    return true;
                }
                //AND FINALLY CHECK THE HTTP_USER_AGENT 
                //HEADER VARIABLE FOR ANY ONE OF THE FOLLOWING
                if (context.Request.ServerVariables["HTTP_USER_AGENT"] != null)
                {
                    //Create a list of all mobile types
    
                    var agent = context.Request.ServerVariables["HTTP_USER_AGENT"].ToLower();
    
                    return (new[]
                    {
                        "midp", "j2me", "avant", "docomo", 
                        "novarra", "palmos", "palmsource", 
                        "240x320", "opwv", "chtml",
                        "pda", "windows ce", "mmp/", 
                        "blackberry", "mib/", "symbian", 
                        "wireless", "nokia", "hand", "mobi",
                        "phone", "cdm", "up.b", "audio", 
                        "SIE-", "SEC-", "samsung", "HTC", 
                        "mot-", "mitsu", "sagem", "sony"
                        , "alcatel", "lg", "eric", "vx", 
                        "NEC", "philips", "mmm", "xx", 
                        "panasonic", "sharp", "wap", "sch",
                        "rover", "pocket", "benq", "java", 
                        "pt", "pg", "vox", "amoi", 
                        "bird", "compal", "kg", "voda",
                        "sany", "kdd", "dbt", "sendo", 
                        "sgh", "gradi", "jb", "dddi", 
                        "moto", "iphone"
                    }).Any(x => agent.Contains(x));
    
                }
    
                return false;
            }
    • Now you may have to update the array at the end of the method as it may be outdated but at first glance has all the major guys.
    • With your method in place we will need to run an override for the theme setting method. So in our pre_init handler replace the theme switching code with something like below
    if (isMobileBrowser() && !string.IsNullOrWhiteSpace(NopContext.Current.WorkingMobileTheme))
                {
                    this.Theme = NopContext.Current.WorkingMobileTheme;
                }
                else if (!String.IsNullOrEmpty(NopContext.Current.WorkingTheme))
                {
                    this.Theme = NopContext.Current.WorkingTheme;
                }

    This should do it, now any mobile browser that comes along will be directed to your mobile theme and any regular browser will be directed to you main theme.

    Once you have completed those steps which shouldnt take more than a day to complete (as you have to build the theme) I would look into how you can enhance your system using jQuery mobile. 

    I hope this helps a bit...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 16, 2011 2:39 AM
  • User1123965013 posted

    Wow you are a guru! Thanks.

    This is a great detection method for theming i hadn't thought about doing but will definately implement shortly.

    As for the application side of things, we are limited to the mobile website only at this stage but will be looking to enhance the mobile app later in the project.

    The jQuery pages will not be using the shopping cart and checkout system as this is a custom solution so we probably have a lot of clearance  here. We have developed a lot of our own custom methods and classes we wish to use in a jQuery mobile theme for AJAX controls to make it look and feel more like an app.

    As for the AJAX calls i was more interested in whether i should create our own HTML pages with .ajax calls to code behind pages, or just build the website using your mobile theme technique above inside existing .aspx/aspx.cs pages.

    Excellent help on the nopcontext idea as well. You've given me another couple of thoughts for some more custom solutions we want to  provide.

    Tuesday, August 16, 2011 7:32 PM