Issue while developing Mobile and Tablet applications in ASP.Net MVC

Question

I have to design some pages in Mobile and Tablet using ASP.Net MVC 4. I have already developed those pages for the desktop by creating COntrollers and Views.

I have different layouts for Mobile and Desktop.I already have Areas for Mobile and Tablet in the project.Since the pages would be same for the mobile/tablet with the desktop, how can i reuse the controllers and views created for desktop in Mobile and Tablet designing?

I did the following in the _ViewStart.cshtml, but this doesn't work.

I have Controller in /Controllers/RegisterConrtoller.cs

and View in /Views/Register.cshtml

@{
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_MobileLayout.cshtml"
                                        : "~/Views/Shared/_DesktopLayout.cshtml";
}

My url points to the Mobile/Controller/Register. It is trying to get the Register page from Areas section because its registering here:

public override void RegisterArea(AreaRegistrationContext context)
        {
            context.MapRoute(
                "Mobile_default",
                "Mobile/{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional }
            );
        }

I want this particular Register controller not to be picked from areas please let me know if there is any better way to implement this?

I am not quite sure if i have to do anything else more?

1) Do i need to create separate views for Mobile, Tablet and Desktop?

If i do so, i will repeat the same code in three files?

2) Do i need to create same views and controllers for Mobile, Tablet and Desktop?

How can i use different layouts for these three?

Any help on this is much appreciated.

Thanks,

Kan

score 0 · Answer 1 · edited May 23 '17 at 11:49

Request.Browser.IsMobileDevice requires the browser files to be included on the server in order to detect them. The files that ship with .NET don't have the latest devices, and even if you update them you will have to continue updating them to keep up with emerging devices.

It is recommended that you do not scan for a particular type of device, but instead test for specific capabilities. In this case, you can use CSS to change the layout according to the width of the viewport. That is most likely the main factor that your application requires a layout change for, anyway.

You could either code the CSS yourself to make a responsive design, or you could use a framework. The most popular framework for developing responsive applications is Bootstrap, which natively supports CSS for 4 different viewport widths, allowing you to incrementally use the available space on the device.

Issue while developing Mobile and Tablet applications in ASP.Net MVC

1 Answers1