Hi Emil and Megatron,
Thanks for the update.
Essential Studio JavaScript controls can’t auto initialize as Web or Mobile controls depends on the browser/device in which the application is loaded, since we have separate helpers for Web(EJ) and Mobile(EJMobile). Instead, we can create separate cshtml pages for Mobile and Web, and redirect the view pages depends on the browser/device in which the application is loaded.
Refer the following steps to achieve your requirement.
Step 1: Create mobile.cshtml and desktop.cshtml in the views section.
Step 2: In the mobile.cshtml, render the mobile controls and in desktop.cshtml render the web controls.
Step 3: Load the
ej.widgets.all.min.js script in the scripts section, since ej.widgets.all.min.js contains
both mobile and web components, and also refer ej.mobile.all.min.css and ej.web.all.min.css in the theme section of Layout.cshtml. Refer to the following screenshot.
Since ejm controls gets auto initialized (which is explained in one of our earlier responses) while loading, hence we need to prevent the auto initialization by adding the below script in the _layout.cshtml page.
[_Layout.cshtml]
<script>
App.renderEJMControlsByDef = false;
</script>
|
Step 4: We need to redirect the view (index) page, depending on the userAgent. Add the following code example in the controller to redirect view page according to web/mobile.
[C#]
//Useragent string of the devices
var exp = new Regex("mobile|tablet|android|kindle");
|
And also add
using System.Text.RegularExpressions; namespace to support regex in controller. Refer to the following screenshot.
Step 5: Redirect the view to mobile.cshtml, if the user agent string matches the regex expression (for mobile devices), else redirect to desktop.cshtml.
Step 6: Now, build and run the project. If it is loaded in desktop browsers, Web(ej) controls gets rendered, else Mobile(ejm) controls gets loaded.
We have also created the simple sample for the requirement. Refer to the sample in the following attachment.
Sample
Regards,
Dhinesh R
