ASP.NET Forms Application

Question

I have created a new project with default data.

So i have a Mobile master page and a Desktop master page.

How can i make 1 page look diferently on desktop and mobile? Somehow create two Default.aspx pages? One for mobile, one for desktop.

I have tried using the ContentPlaceholders:

Desktop:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="<Projectname>.SiteMaster" %>

<!DOCTYPE html>

<html>
    <head>
    </head>
    <body>
        <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
    </body>
</html>

Mobile:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Mobile.master.cs" Inherits="<Projectname>.Site_Mobile" %>

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <asp:ContentPlaceHolder ID="MobileMainContent" runat="server"></asp:ContentPlaceHolder>
    </body>
</html>

Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="<Projectname>._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    Hello, i'm desktop!
</asp:Content>
<asp:Content ID="MobileBodyContent" ContentPlaceHolderID="MobileMainContent" runat="server">
    Hello, i'm mobile!
</asp:Content>

When i launch Default.aspx from Desktop browser it prompts that MobileMainContent is not found. But on WP emulator i get that MainContent is not found;

The i made modifications in my Master mobile and same to the Master desktop, but hide the other block:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Mobile.master.cs" Inherits="<Projectname>.Site_Mobile" %>

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <asp:ContentPlaceHolder ID="MainContent" runat="server" Visible="false"></asp:ContentPlaceHolder>
        <asp:ContentPlaceHolder ID="MobileMainContent" runat="server"></asp:ContentPlaceHolder>
    </body>
</html>

And all works. Is this the correct approach to achieve what i want?

stackh34p · Accepted Answer · 2015-09-14 10:36:17Z

Web forms are tricky in this. If what you achieved currently is working, it might be considered a suitable approach. Here are my thoughts on the solutions I can come up with:

Your own approach
- Good if your desktop and mobile application has the same logical structure of pages/components. This means that your master pages need to be identical in the name of the placeholders they expose.
- Bad if you would require different number of controls in a mobile page. You will end up placing placeholders that would not be used either in desktop or mobile, and it could become confusing maintaining such master pages by other developers, or yourself after a significant amount of time. The worst thing of the approach is that your mobile version will be coupled with the desktop one, this could cripple for instance mobile UI enhancements, if they would break the desktop layout.
Use responsive design
Many web UI frameworks are pointed towards responsive UI (for example bootstrap). The idea is that you design the html layout in such a way that the same html code looks different depending on the device it is browsed from. The magic is done entirely with CSS (media queries) and some JS if needed.
- Good if you intend to have similar page layout and control hierarchy among different platforms. You will end up using a single master page and not think of different platforms when working with ASP.NET. Most solutions for such frameworks have you covered for a number of UI component layouts, there are on-line examples and tutorials. In general you will have good community support.
- Bad if you/your team do not have good knowledge of CSS/JS and/or time to understand the concepts of the responsive UI and the frameworks that support it. In case your desktop and mobile versions are going to be fundamentally different at some point (or would become in the future), you might want to split the UI in general - see next point.
Separate the platform master pages.
In general, consider separating the Mobile UI and the Desktop UI. I have personally done exactly this in the past when mobile devices were still approaching the usage share, and most of the web development was still desktop oriented. I do not see a reason for not using the same techniques today. The key thing with this approach is that you need to componentize your UI items well on programmatic level. For example, you can use user controls to represent the UI components. User controls in classic ASP.NET forms are good because they pair certain UI piece with its codebehind logic. When you need to have the same control both on Mobile and Desktop, you may create a base abstract class with the codebehind logic, create separate UserControl classes that inherit from the same base class, but expose different user interface elements, and hook the input events to what the base class needs to do its job. The later works very well if you stick with MVP/MVVM design patterns.
This approach is
- Good if you need independent look and feel, arrangement of components and even completely different organization of your UI on Mobile as on Desktop. It would allow parallelizing the development of both versions by members of the team, even separate teams. You will be able to reuse similar code between the different platforms.
- Bad because you will have to split the platform development. This means that you will have to figure out when the desktop and when the mobile versions are loaded to the user. You may have to double the UI work, in case components for the desktop have to look completely different on mobile.

I guess the choice is all up to you in this. You may stick to your way, take another approach or combine whatever you can. I do not pretend to be exhausting the topic, so other than the above solutions may become handy.

Collectives™ on Stack Overflow

ASP.NET Forms Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related