Last post Aug 16, 2011 07:32 PM by BKirk
Aug 16, 2011 01:26 AM|BKirk|LINK
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)
2) HTML front end pages using .ajax (JSON or XML) requests to .aspx.cs code behind pages
Aug 16, 2011 01:39 AMfirstname.lastname@example.org|LINK
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).
Aug 16, 2011 01:44 AM|BKirk|LINK
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.
Aug 16, 2011 02:39 AMemail@example.com|LINK
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
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
/// Gets the current mobile theme (e.g. darkOrange)
public string WorkingMobileTheme
string defaultTheme = IoC.Resolve<ISettingManager>().GetSettingValue("Display.MobileTheme");
this.Theme = NopContext.Current.WorkingTheme;
private static bool isMobileBrowser()
//GETS THE CURRENT USER CONTEXT
HttpContext context = HttpContext.Current;
if (context == null)
//FIRST TRY BUILT IN ASP.NT CHECK
//THEN TRY CHECKING FOR THE HTTP_X_WAP_PROFILE HEADER
if (context.Request.ServerVariables["HTTP_X_WAP_PROFILE"] != null)
//THEN TRY CHECKING THAT HTTP_ACCEPT EXISTS AND CONTAINS WAP
if (context.Request.ServerVariables["HTTP_ACCEPT"] != null &&
//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();
"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",
}).Any(x => agent.Contains(x));
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...
Aug 16, 2011 07:32 PM|BKirk|LINK
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.