Automatic style changes of ASP.NET controls as per client's screen resolution

• Download source - 93.8 Kb

View online demo.

Introduction

This article will tell you about a technique through which you can make intelligent ASP.NET websites which will automatically detect the resolution of the visitor's desktop and generate a resolution optimized mark-up of a page, not forcing the visitor to keep the resolution of his/her desktop according to the website's best view resolution.

Basic Idea

It is unpredictable for a website to be dynamic in visual appearance for multiple resolutions. Typically, graphic designers design the page graphics and the elements optimized for a certain screen resolution. Visitors having varying resolutions different from that recommended for the website will experience a less comfortable view of the pages.

Through a mix of ASP.NET and JavaScript, we can build such pages for a website which will show up according to the resolution of the visitor's PC. Let's look further on how to achieve this.

The Approach

These are three basic things that we are using to achieve this task. I am assuming that you are a bit familiar with the following:

• A little JavaScript
• ASP.NET simple data binding
• CSS for dynamic behaviour of pages on different resolutions

Client resolution detection

First, on the initial request, with the help of JavaScript code embedded in our page's .aspx file, we are getting the desktop resolution of the visitor who requested the page.

if ((screen.width == 1280) && (screen.height == 1024))
{...

Storing client and server resolution values

As soon as the client PC resolution is detected in JavaScript, it is being stored in a HTML hidden input control named ClientResolution, which is later accessed at the server side script for comparisons. We use the Request object for accessing the ClientResolution value at the server side. Resolution set on the server is kept in a hidden server control named ServerResolution, which is then used on the client side JavaScript code for comparison.

if ((screen.width == 1280) && (screen.width == 1024))
{ 
    document.getElementById("ClientResolution").setAttribute("value", "1280Res");
...

After we capture the resolutions of the client PC in our conditional checks in JavaScript, we post the page to the server for re-adjustments of the control properties to fit in the visitor's resolution.

var thisform = document.Form1 ;
        
if (clientRes != "")
// if the client resolution is captured,
// then postback to server for changing.
{
    thisform.submit();
} ...

The CSS file for setting up different resolution settings for controls

In our example, I am using CSS classes which contain the attribute definitions of the controls. There is a separate set of attribute definitions in our CSS file for each resolution.

/* following three css classes will be used for 1024x768 resolution*/

.label1024
{
font-size: 11pt;
color: red;
font-family: Arial;
}

.textBox1024
{
width: 120;
height: 40; 
}

.button1024
{
width: 120;
height: 40;
}

.image1024
{
background-image: url(1024.jpg);
width: 1003;
height: 97; 
} ...

Binding control properties with values according to the client resolution

Now that the page has been posted to the server, we now need to adjust our page elements according to the visitor's captured resolution settings. As you can guess, a page can be composed of web server controls as well as HTML controls. We can pretty easily access the properties of web server controls on the server side script (e.g., txtInput.Text), but we cannot access the HTML control properties on the server side. HTML controls are static page elements and are not accessible using server side code.

Now, in order to dynamically set the values of the attributes of the HTML page elements, we are using ASP.NET simple data binding to bind singular values to the attributes. The property (the one that gets and sets the value for the variable) from the server side script returns the value for the control's attribute. This gives the dynamic looks for the static HTML elements of the page.

<!-- server control tag attribute 'CssClass' bound with property TB -->
<asp:textbox id=TextBox1 runat="server" 
     CssClass="<%# TB %>" Width="262px"> </asp:textbox>
<!-- html control tag attribute 'class' bound with property BT -->
<input class="<%# BT %>" id=Button1 type=button 
          value=button Text="me too !"> ...

Now, according to the captured resolution settings sent by the JavaScript code, the property on the server side code returns the CSS class for the page element to be bound with. I have made properties for each page element, which return the CSS class which specifies the control's look and feel.

Below, is an example of the property BT (for button control) returning the different CSS classes on conditional checks:

public string BT
{
    get
    {

        //if page is first time requested, then set 
        //the default resolution setting as 1280x1024
        if (! Page.IsPostBack )
        {
            //Set the Html Hidden Input Control Value 
            //For Reffering on Client Through JavaScript
            ServerResolution.Value="1280Res";
            //Returning CSS class name according to client's resolution 
            return "button1280";

        }

        else if( Request.Form["ClientResolution"] == "1280Res")
        {
            //Set the Html Hidden Input Control Value 
            //For Reffering on Client Through JavaScript
            ServerResolution.Value="1280Res";
            //Returning CSS class name according to client's resolution 
            return "button1280";
        }

        else if( Request.Form["ClientResolution"] == "1024Res")
        {
            //Set the Html Hidden Input Control Value 
            //For Reffering on Client Through JavaScript
            ServerResolution.Value="1024Res";
            //Returning CSS class name according to client's resolution
            return "button1024";
        }

        else if( Request.Form["ClientResolution"] == "800Res")
        {
            //Set the Html Hidden Input Control Value 
            //For Reffering on Client Through JavaScript
            ServerResolution.Value="800Res";
            //Returning CSS class name according to client's resolution
            return "button800";
        }
        
        else
        {
            //if client resolution is not detected yet, 
            //then set default 1280x1024 resolution
            return "button1280";
        }
    }
}

Other Comments

Now, by detecting the visitor's resolution through JavaScript on page access, and then submitting the page on the server and changing the attributes of the controls through simple data binding, we achieve the technique to make intelligent ASP.NET pages that automatically change their appearance according to the desktop resolution of the visitor's PC.

This is just a very basic example where I have demonstrated changing the size, colors, width, height, source etc. of the page elements at different resolutions, both for server controls and HTML controls. You can take your imagination towards countless possibilities after getting the basic idea.

In the sample code, I am just demonstrating the different looks of a page on three different resolutions (1280x1024, 1024x800, 800x600). Of course, you can add settings for as many resolutions as you want.

You may be having a thought that each page would check for the client resolution on each page request, which would be less efficient. Well, what we can do here is, we can put this check on the initial page request, and set up the resolution value in a session variable, and avoid checking for it at each page request.