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. Image for the cookie policy date

ASP MVC Mobile and Web in one project

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.

8 Replies

MM Manikandan Mariappan Syncfusion Team January 25, 2016 12:43 PM UTC

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


EY Emil Yotov January 25, 2016 09:07 PM UTC


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 ?


SN Sasikala Nagarajan Syncfusion Team January 26, 2016 05:59 PM UTC

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



EY Emil Yotov January 27, 2016 04:36 PM UTC

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



DR Dhinesh Ravi Syncfusion Team January 28, 2016 08:33 AM UTC

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


EY Emil Yotov January 28, 2016 10:13 AM UTC

Thank you, everything is OK.


ME Megatron January 30, 2016 08:23 PM UTC

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


DR Dhinesh Ravi Syncfusion Team February 1, 2016 08:59 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon