Question

My website is a shopping site and by detecting browser headers, it automatically re-sizes/styles and arranges a few bits and pieces for mobile/desktop browsers.

One example of rearranging a few things is the location of a shopping cart.

On a desktop browser view, the shopping cart appears in the right hand margin. The site is designed to be narrower in a mobile browser (ie iPhone) so the right hand margin does not exist when displaying in a mobile browser. In this case, the shopping cart is loaded into the header instead.

Both the head and shopping cart are user controls, whereas the right hand margin is built in the Master Page, thus, the declaration of the shopping cart user control is present in both Master Page and the Header control.

The relevant markup of my MasterPage looks like this

<div class="content">
    <div id="leftMargin" runat="server"></div>
    <div id="centre">
       <asp:ContentPlaceHolder id="centreContent" runat="server">/asp:ContentPlaceHolder>
    </div>
    <div id="rightMargin" runat="server">

        <controls:shopping ID="shoppingBasket" runat="server" />

    </div>
</div>

I then have codebehind, like this:

If Common.isMobile() Then
    leftMargin.Visible = False
    rightMargin.Visible = False
End If

The Header control is similar, except rather the hiding a complete div, it hides a User Control, ie:

Markup:

<div id="miniNav">
    <div id="mobileCart" class="mobileCart insertCart">                    
        <controls:shopping ID="shoppingBasket" runat="server" />
     </div>
     <!--- more buttons --->
</div>

Code:

If Common.isMobile Then
    shoppingBasket.Visible = True
Else
    shoppingBasket.Visible = False
End If

Obviously, but Common.isMobile function is determining whether we’re displaying a mobile-arranged version or not.

So, after a long winded explanation, my actual question is quite simple.

Given the examples above, when the page is rendered in either case, does the server completely ignore the coding/markup/database interaction etc for all hidden elements hidden by using htmlControl.display=false or am I causing the server to have to actually run all these scripts twice, once being wasted as it’s not actually doing anything?

Answer 1

Your code will always run, it will simply not be rendered the client.

If you’re concerned about performance, you should either simply not add the user controls to the page. If that is not an option, you could always add additional logic to ignore expensive operations if you are mobile.

One “cute” way around this is to use a paradigm similar to Visual WebParts, and use a server control to wrap your user controls. Then your control wrappers would like like:

public class MyServerControl : WebControl
{
    #region Private Fields
    private const string _ascxPath = @"~/VisualControls/MyUserControl.ascx";
    #endregion

    #region Control Events
    protected override void CreateChildControls()
    {
        if (!Common.IsMobile)
        {
            var control = Page.LoadControl(_ascxPath);
            Controls.Add(this.control);
        }   
    }
    #endregion
}

And just include the MyServerControl instead of the MyUserControl.