Log in to like this post! Reach further with IgniteUI jQuery Mobile controls and ASP.NET MVC Damyan Petev / Monday, November 5, 2012 Out of the new and exciting things happening around IgniteUI is the enhancement of the mobile toolset. These controls are based on jQuery Mobile rather than jQuery UI, as it provides optimizations for mobile devices. Applications built using them meet the demands of phones and tablets when it comes to usability and design. Windows (Phone) 8, iOS and Android devices are everywhere and the flavor of the year word is TOUCH - support for that and responsive design both come out-of-the-box. But this isn’t the first time we’re taking on the subject – some time ago (in 12.1) we released the mobile ListView and Rating where some parts were covered. Even though for now I’ll keep to the present and show you some of the new stuff, leave a comment if you have some thoughts on anything else. Also make sure to check out the topmost link for a list of all IgniteUI changes. So, possibly the biggest change introduced with 12.2 now is for all of you ASP.NET MVC lovers :) We’ve devoted effort to enrich the mobile toolset by adding 17 ‘new’ controls by providing what we call “re-assurance” wrappers around existing jQuery Mobile controls. What this means is that you get not only Infragistics support for them, but hey, as part of our suite you can bet on each of them having a model for neat ASP.NET MVC Helper action! Yup – means you can code jQuery Mobile based applications with Razor syntax in C# or VB.NET! Also you get enhancements such as the control model themselves so they can be configured outside the View as well for maximum control and when in the View – the option to create strongly-typed controls! What are the goodies? With the latest additions the IgniteUI package is capable of delivering an application in its entirety all in the comfort of the IDE and language you feel accustomed with. But it’s not just the controls that grew in numbers – to truly provide a full-fledged end-user experiences we also added themes for Android (whole 3 of them) and two for Windows Phone! And there’s even support for adaptive theming to match the device platform feel! I’ll try to demonstrate different themes along the way and you can always hit up our samples and see for yourself! There are also a number of benefits you get – the mobile jQuery controls now have their own section in the IgniteUI Documentation/Online Help with very useful mobile-centric Deployment guide and detailed control documentation. You should totally check that one out as well. In addition to what I mentioned above ( the comfort of your IDE and language, strongly-typed) the MVC wrappers bring quite a bit more – having server model of your client controls lets you define them without requiring the knowledge of their HTML structure and with IntelliSense support. They will also prefill defaults for you, the ones that matter the most – required for the control to be initialized, automatic element IDs and in the case of strongly-typed controls like above the proper model property will be set as both ‘id’ and ‘name’ attribute of the elements in order to be properly picked up and sent upon form submits. In case you think typed models of controls will take away the freedom you can have with just HTML, you can rest assured that is not the case as all the models accept extra settings via the HtmlAttributes method. Getting started with mobile controls Let’s see just how easy it is to create basic mobile applications. Make sure you have followed the Deployment guide above and referenced the jQuery mobile recourses and IgniteUI ones or the mobile version of the loader widget. The most basic control you could use is the TextBox that supports different modes such as password, multiline and search. @Html.InfragisticsMobile().TextBox().Mode(TextEditorTextMode.Search).Render() And this in the Android “Holo Light-Dark” theme comes out as: Then you can have Buttons of course! Notable properties of the buttons are the icons (with related positioning properties) along with the ability to define them as inline (otherwise to ensure fit for small screens jQuery Mobile elements are usually displayed in block, as in a new line): @Html.InfragisticsMobile().Button().HtmlAttributes(new Dictionary<string, object> { { "class", "pop" } }).Text("button").Mini(true).Icon("gear").Render() @Html.InfragisticsMobile().Button().IsSubmitButton(true).Text("submit").Inline(true).Render() @Html.InfragisticsMobile().Button().Text("cancel").Inline(true).Render() <style> .pop { text-decoration: none; line-height: 1.5em; background-color: #ACACAC; color: #fff; border: none; } .pop:hover { background-color: #007FAF; } .pop:active { background-color: #00AEEF; } </style> I’ve also added the style in here so you can see that you can even make use of the html attributes to add class and apply custom styling: That doesn’t really fit, but oh well :) Next up is the Slider so let’s see how you can set it up on the server using the model: using Infragistics.Web.Mvc.Mobile; SliderModel slider = new SliderModel(); slider.NumericInputDisplayMode = DisplayMode.Inline; slider.MinValue = 0; slider.MaxValue = 100; slider.Value = 30; slider.Label = "Progress:"; slider.LabelAlignment = Alignment.Top; ViewBag.Slider = slider; You can pass the model itself if you will, but I’m actually using the dynamic ViewBag because I have more then one model for that view. The Helper as always comes with an overload taking a ready control model: @Html.InfragisticsMobile().Slider(ViewBag.Slider as SliderModel) Moving on with the all-time favorite Toggle switch. It’s one of those mobile specific controls that is very easily recognized. The two states of the control are called on and off and you can specify text for both, as well as initial state. With all controls you can also apply themes (or swatches as they are defined within the jQuery Mobile styling): @( Html.InfragisticsMobile().ToggleSwitch().Render() ) @( Html.InfragisticsMobile().ToggleSwitch().ID("test2").OffText("disabled").OnText("enabled") .SwitchedState(true).Width("10em").Theme("b").Render() ) Those are the Android-styled toggles. Another very mobile-oriented control would be the Select Menu – very much behaving like a select but with enhanced popup-like modal selection for better mobile experience. Much like other selects and combo boxes, it supports both single and multiple selection, the option to use native menus ( don’t know why would you punish users like that, but it’s there) and a collection of items: @Html.InfragisticsMobile().SelectMenu().Multiple(true).Label("Favorite language:").NativeMenu(false).Items(s => { s.MenuItems.Add(new SelectMenuItem { Text = "JavaScript", Selected = true}); s.MenuItems.Add(new SelectMenuItem { Text = "C#", Value = "CSharp" }); s.MenuItems.Add(new SelectMenuItem { Text = "TypeScript"}); s.MenuItems.Add(new SelectMenuItem { Text = "VB.NET" }); }).Render() The interesting part is that it would also display a counter if multiple are selected(if you want it to naturally – as with most it is customizable): Speaking of selection there are two more well-known user-selection that the above menu is really based on. First are the Checkbox and Checkbox Group – fairly simple two-state input element, that when used in group allows for multiple selection. The checkbox can be used as stand-alone as expected or as part of the group model’s collection of items: CheckBoxGroupModel cbgrp = new CheckBoxGroupModel(); cbgrp.ID = "chkBoxGrp"; cbgrp.Items.Add(new CheckBoxModel() { Checked = true, ID = "opt1", Text = "Option1"}); cbgrp.Items.Add(new CheckBoxModel() { ID = "opt2", Text = "Option2"}); cbgrp.Items.Add(new CheckBoxModel() { ID = "opt3", Text = "Option3"}); ViewBag.ChbxGrp = cbgrp; @Html.InfragisticsMobile().CheckBoxGroup(ViewBag.ChbxGrp as CheckBoxGroupModel) And if you set the ‘Horizontal’ property to true you get a single line button or also called toggle set: The other selection option in the toolset is the Radio Button Group – with the difference that radio buttons make no sense outside of a group and when grouped only a single one can be selected. Again as you’ve seen above you can set initial selection, but the group model itself can be assigned a ‘SelectionIndex’ (but keep in mind it is overridden by selection assigned on the radio elements themselves). Also, much like above the the group can be set up as horizontal button set: @( Html.InfragisticsMobile() .RadioButtonGroup() .ID("ageRange") .SelectedIndex(1) .Items(item => { item.RadioButton().ID("grp1").Text("18-25"); item.RadioButton().ID("grp2").Text("26-35"); item.RadioButton().ID("grp3").Text("36-45"); item.RadioButton().ID("grp4").Text("45+"); }) .Render() ) As form elements Since in this article the main focus is on input elements, I feel it’s important to explain a bit how they work in the context of HTML forms. Usually you will be working with all familiar elements, however as mentioned above some controls provide the ability to use native ones – what does it mean? Well, even though there are probably default UI elements available, in jQuery mobile standard elements are primarily built out of spans. This ensures no browser enforces its own default UI or behavior and therefore cross-browser compatibility. This applies to things such as buttons, checkboxes, radio elements and so on. However, in the interest of remaining with a functional application when jQuery mobile is not supported (simple HTML mode, no JavaScript - although I have no idea where you'd find that except for those that turn it off on purpose), buttons (and other inputs) intended to perform the default browser submit functionality will be created as styled standard input of type submit. Also a very important part is that the IgniteUI ASP.NET MVC wrappers will create the proper markup (such as intended to be used with jQuery mobile) that would create native browser elements and assign them the proper ‘id’ or ‘name’. Those contain the actual values and are the ones picked by the browser on submits. However, when jQuery mobile is functional they will remain hidden, while the user interacts with the enhanced mobile controls. That also means in case something goes wrong the application will have this whole set of active controls and will perform as expected, but with reduced usability. Again this is something you won’t have to worry about, but it’s good to know. TL;DR | Summary We’ve looked into mobile controls that assist with user input and help you create immersive mobile experiences that implement cross-browser and cross-platform responsive design and go beyond – while optimized for touch and mobile, jQuery mobile applications actually look and work beautifully on desktop browsers! There’s a very extensive list of supported platforms and let’s just say the A-grade list is impressive. But there’s more – the IgniteUI mobile toolset will also provide you with a number of wrappers around layout elements to help you build your application that much easier in a familiar way and environment. So stay tuned for the upcoming blog demonstrating those, demos and more! In the meantime you can always try it for yourself: And as always, you can follow us on Twitter @DamyanPetev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!