ASP.NET 控件根据客户端屏幕分辨率自动更改样式

• 下载源代码 - 93.8 Kb

在线演示.

引言

本文将介绍一种技术，通过该技术，您可以创建智能的 ASP.NET 网站，这些网站可以自动检测访问者桌面的分辨率，并生成分辨率优化的页面标记，而无需强制访问者将其桌面分辨率设置为网站的最佳显示分辨率。

基本思想

网站要适应多种分辨率在视觉上保持动态是不可预测的。通常，图形设计师会针对特定的屏幕分辨率来设计页面图形和元素。分辨率与网站建议分辨率不同的访问者将难以获得舒适的页面浏览体验。

通过结合 ASP.NET 和 JavaScript，我们可以为网站构建这样的页面，这些页面将根据访问者 PC 的分辨率显示。我们来看看如何实现这一点。

方法

这是我们用来完成这项任务的三个基本内容。我假设您对以下内容略有了解

• 一点 JavaScript
• ASP.NET 简单数据绑定
• CSS 用于页面在不同分辨率下的动态行为

客户端分辨率检测

首先，在初始请求时，借助嵌入在我们页面 .aspx 文件中的 JavaScript 代码，我们获取请求页面的访问者的桌面分辨率。

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

存储客户端和服务器分辨率值

一旦 JavaScript 检测到客户端 PC 分辨率，它就会被存储在一个名为 ClientResolution 的 HTML 隐藏输入控件中，该控件随后在服务器端脚本中被访问以进行比较。我们使用 Request 对象在服务器端访问 ClientResolution 值。服务器上设置的分辨率保存在一个名为 ServerResolution 的隐藏服务器控件中，然后该控件用于客户端 JavaScript 代码进行比较。

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

在我们通过 JavaScript 中的条件检查捕获客户端 PC 的分辨率后，我们将页面发布到服务器以重新调整控件属性，使其适合访问者的分辨率。

var thisform = document.Form1 ;
        
if (clientRes != "")
// if the client resolution is captured,

// then postback to server for changing.

{
    thisform.submit();
} ...

用于设置控件不同分辨率设置的 CSS 文件

在我们的示例中，我使用的是包含控件属性定义的 CSS 类。我们的 CSS 文件中为每个分辨率都有一组单独的属性定义。

/* 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; 
} ...

根据客户端分辨率绑定控件属性的值

现在页面已发布到服务器，我们需要根据访问者捕获的分辨率设置来调整我们的页面元素。正如您所料，页面可以由 Web 服务器控件和 HTML 控件组成。我们可以很容易地在服务器端脚本中访问 Web 服务器控件的属性（例如 txtInput.Text），但我们无法在服务器端访问 HTML 控件的属性。HTML 控件是静态页面元素，无法通过服务器端代码访问。

现在，为了动态设置 HTML 页面元素的属性值，我们使用 ASP.NET 简单数据绑定将单个值绑定到属性。服务器端脚本中的属性（用于获取和设置变量值的那个）会返回控件属性的值。这为页面上的静态 HTML 元素提供了动态外观。

<!-- 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 !"> ...

现在，根据 JavaScript 代码发送的捕获分辨率设置，服务器端代码中的属性将返回要绑定到页面元素的 CSS 类。我为每个页面元素都创建了属性，这些属性会返回指定控件外观和感觉的 CSS 类。

下面是一个属性 BT（用于按钮控件）在条件检查时返回不同 CSS 类的示例

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";
        }
    }
}

其他评论

现在，通过在访问页面时通过 JavaScript 检测访问者的分辨率，然后在服务器上提交页面并通过简单数据绑定更改控件的属性，我们实现了创建智能 ASP.NET 页面的技术，这些页面可以根据访问者 PC 的桌面分辨率自动更改其外观。

这只是一个非常基本的示例，我演示了如何为服务器控件和 HTML 控件在不同分辨率下更改页面元素的大小、颜色、宽度、高度、源等。在掌握基本概念后，您可以发挥无限的想象力。

在示例代码中，我只是演示了页面在三种不同分辨率（1280x1024、1024x800、800x600）下的不同外观。当然，您可以根据需要添加更多分辨率的设置。

您可能会想，每次页面请求都会检查客户端分辨率，这效率不高。嗯，我们可以在初始页面请求时进行此检查，并将分辨率值设置为会话变量，从而避免在每个页面请求时进行检查。