We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ASP MVC Mobile and Web in one project

Thread ID:

Created:

Updated:

Platform:

Replies:

121815 Jan 23,2016 03:07 PM Feb 1,2016 03:59 AM JavaScript 8
loading
Tags: ejmTab
Emil Yotov
Asked On January 23, 2016 03:07 PM

Is it possible to add the mobile version to the web version. How to make them both in one project? I need to add mobile controls to an existing web project.

Manikandan Mariappan [Syncfusion]
Replied On January 25, 2016 07:43 AM

Hi Emil,
 
Thanks for contacting Syncfusion support.
 
Yes, we can achieve your requirement “Add mobile controls to the existing web controls project” in a single project.
 
Please make use of the following code blocks (Script & Style references) in your application layout.cshtml page
 


     @*web components CSS styles reference*@

    <link rel='nofollow' href="@Url.Content("~/Content/ej/web/Default-theme/ej.widgets.all.min.css")" rel="stylesheet" />


    @*mobile components CSS styles reference*@

    <link rel='nofollow' href="@Url.Content("~/Content/ej/web/ej.mobile.all.min.css")" rel="stylesheet" />


    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>

    <script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>

    <script src="@Url.Content("~/Scripts/jquery.easing.1.3.min.js")"></script>


    @*web & mobile components combined script reference*@

    <script src="@Url.Content("~/Scripts/ej/ej.widgets.all.min.js")"></script>


  
To use the both Mobile and Web components in a single page, we need to made some changes to the script section.
 


    <script type="text/javascript">

        //To prevent input control auto initialization, we need to set this property

        App.renderEJMControlsByDef = false;

        //To prevent the initialization of AppView, we need to set this property

        App.preventAppviewInit = true;

       

    </script>



 
To know more information about this configuration please refer the below document link
 
https://www.syncfusion.com/kb/5912/how-to-prevent-auto-initialization-of-input-controls
 
We have prepared the sample based on your requirement, please find the sample from the below location.
 
Sample: Link
 
If still you face any difficulties, please let us know we will happy to assist you.
 
Regards,
Manikandan Mariappan

Emil Yotov
Replied On January 25, 2016 04:07 PM


Thank you. Everything is OK. I have 2 questions : 1. How do the height of the page is not the correct size ? Currently, the height is fixed. 2. How can I ask a mobile theme for the whole project - for example be light ?

Sasikala Nagarajan [Syncfusion]
Replied On January 26, 2016 12:59 PM

Hi Emil,
Thanks for the update,
1. How do the height of the page is not the correct size ? Currently, the height is fixed.
You can set the height of the page, based on the device height by setting page height to 100%. Please set the 100% to your body tag in your application. If we misunderstood your requirement please provide more information about your requirement. So that we can provide exact solution to your requirement.
2. How can I ask a mobile theme for the whole project - for example be light ?
We can get our controls CSS files and Script files required by the Mobile Javascript component from component installed location. Please refer the below steps to access these script and CSS files.

After installing the latest version, run the dashboard, on the left side of the dashboard choose the Javascript platform.

Now, on the right side choose the option “Explore Samples” as shown in the image,


It will open the location where the controls are installed locally. Suppose if it is installed in C Drive, the location will be something like this,

[Installed Drive]: \Users\lab\AppData\Local\Syncfusion\EssentialStudio\13.4.0.53\JavaScript

Now we can find the “assets” folder, navigate through the folder structure as follows, we have get the CSS files.

assets->css->mobile
Please check with the given solution and let us know if you need any further assistance,
Regards,
Sasikala Nagarajan


Emil Yotov
Replied On January 27, 2016 11:36 AM

Copy files and put them in my project . It HEAD old part was this:


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


    @*mobile components CSS styles reference*@
    <link rel='nofollow' href="@Url.Content("~/Content/ej/mobile/ej.mobile.all.min.css")" rel="stylesheet" />


    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.easing.1.3.min.js")"></script>

    @*web & mobile components script reference*@
    <script src="@Url.Content("~/Scripts/ej/ej.widgets.all.min.js")"></script>

    <script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script>

</head>


I tried to make a reference to the CSS files of any of the styles , but the situation becomes even worse.


    @*mobile components CSS styles reference*@
    <link rel='nofollow' href="@Url.Content("~/Content/ej/mobile/flat-theme/ej.mobile.flat-core.min.css")" rel="stylesheet" />
    <link rel='nofollow' href="@Url.Content("~/Content/ej/mobile/flat-theme/ej.mobile.flat-theme.min.css")" rel="stylesheet" />


My problem is that in mobile devices are displayed dark theme, not light theme. My desire is always to use only light themes for these various devices - Windows, iOS, Android.

thanks


Dhinesh Ravi [Syncfusion]
Replied On January 28, 2016 03:33 AM

Hi Emil,

Thanks for the update.

We have different scenarios to handle the themes and the rendermodes for Essential Studio JavaScript for Mobile controls.

Scenario 1: Light theme across all platform.

We can render the Mobile application in light theme across all platform by specifying data-ej-theme=”light” attribute in the head tag. Refer to the following code example.

[HTML]

<!DOCTYPE html>

<html>
<head data-ej-theme="light">

</head>

<!--Style sheet for mobile controls-->

<link rel="stylesheet" rel='nofollow' href="themes/ej.mobile.all.min.css" />

<body>

    <!--Mobile controls-->

</body>
</html>


The css file “ej.mobile.all.min.css” has to be referred to render the controls with native appearance specific to rendermodes(own appearance of the controls in IOS, Android and Windows).

Scenario 2: Same UI across all platform with specific theme

If you want to render the controls with same UI, (i.e.) IOS mode in all iOS, Android and windows devices, then we need to specify “data-ej-ios7=true” attribute in head tag. Likewise “data-ej-android=true”, “data-ej-windows=true” and “data-ej-flat=true” for Android, Windows and Flat respectively. To render the controls with dark/light theme, we need to specify the attribute “data-ej-theme” as “dark” or “light” respectively. Refer to the following code example.

[HTML]

<!DOCTYPE html>

<html>
<head data-ej-ios7="true" data-ej-theme="light" >

    <!--Core file for IOS mode-->

    <link rel="stylesheet" rel='nofollow' href="themes/ej.mobile.ios7-core.min.css" />

    <!--Light Theme for IOS mode-->
    <link rel="stylesheet" rel='nofollow' href="themes/ej.mobile.ios7-light.min.css" />

    <!--Dark Theme for IOS mode-->
    <link rel="stylesheet" rel='nofollow' href="themes/ej.mobile.ios7-dark.min.css" />

</head>

<body>

    <!--Mobile controls-->
</body>
</html>


Since we are rendering the controls in IOS mode in all the devices, we can use “ej.mobile.ios7-core.min.css” and “ej.mobile.ios-light.min.css”. If you wish to render the controls in dark theme, then we need to refer “ej.mobile.ios7-dark.min.css” and specify the attribute data-ej-theme=”dark”.


Regards,
Dhinesh R

Emil Yotov
Replied On January 28, 2016 05:13 AM

Thank you, everything is OK.

Megatron
Replied On January 30, 2016 03:23 PM

Hi, will SF scripts auto detect the target scripts for the correct web/mobile form factor if we have both scripts in the same project.

Or, is there any additional configuration required to check in code to switch bundles?

thanks

Dhinesh Ravi [Syncfusion]
Replied On February 1, 2016 03:59 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;