基于屏幕高度的动态 Gridview 页大小

• 下载源代码 - 143.22 KB

引言

如何根据屏幕高度更改 gridview 的页面大小？我之前从未想过这个问题，直到在一个项目中遇到这个需求。经过一些思考，我成功地实现了它。有一些先决条件，但它在大多数实际项目中都是可行的。以下部分将尝试介绍如何实现它。

伪代码

1. 获取屏幕或窗口高度。这可以在主页或登录页完成。
2. 将窗口高度存储在会话变量中。这将通过从 JavaScript 调用 Web 服务来完成。
3. 使用窗口高度计算页面大小。您还需要考虑页眉所需的顶部偏移量、页脚所需的底部偏移量、行高等等。

屏幕

在 1280 x 800 屏幕分辨率下渲染时，页面大小为 21。

在 1280 x 1024 屏幕分辨率下渲染时，页面大小为 33。

主页/登录页/登录页面代码

以下代码将用于获取和存储窗口高度。这可以在您的主页或登录页面中。

代码：在文档就绪函数中，将调用 SaveWindowHeight Web 服务方法，将窗口高度存储在会话变量中。设置后，可以在应用程序的所有页面中使用它。确保您添加了脚本管理器并引用了 Web 服务。

<asp:content id="HeaderContent" runat="server" contentplaceholderid="HeadContent">
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                var windowHeight = $(window).height();
                UIService.SaveWindowHeight(windowHeight, OnCompleted);
            });

            function OnCompleted() { }
        </script>
    </asp:content>
    <asp:content id="BodyContent" runat="server" contentplaceholderid="MainContent">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/UIService.asmx" />
            </Services>
        </asp:ScriptManager>
        <h2>
            Welcome to Dynamic Page Size Sample
        </h2>
        <p>
            <a href="SamplePage.aspx">Click Here</a>
        </p>
</asp:content>

Web 服务代码

SaveWindowHeight 方法会将窗口高度存储在会话变量中。

///
///<summary>
///Summary description for UIService
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, 
// uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
[System.Web.Script.Services.ScriptService]
public class UIService : System.Web.Services.WebService {

    public UIService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod(EnableSession = true)]
    [ScriptMethod()]
    public void SaveWindowHeight(string height)
    {
        HttpContext.Current.Session["WindowHeight"] = height;
    }
}

Gridview 页面

这是包含简单 gridview 的 .aspx 页面代码。

<div style="height: 50Px">
    <h2>
        Dynamic Page size sample</h2>
</div>
<div style="height: 50Px">
    <asp:label id="lblMessage" runat="server" text="Label"></asp:label>
</div>
<div id="GridView">
      <asp:gridview id="GridView1" autogeneratecolumns="true" 
	pagesize="50" runat="server"
            allowpaging="true" onpageindexchanging="GridView1_PageIndexChanging">
        <RowStyle Height="20px" />
    </asp:gridview>
</div>  

代码后台页面

以下代码提供了如何使用窗口高度来操作页面大小。

public partial class SamplePage : System.Web.UI.Page
{
    int pageSize = 0;
    int gridTopOffset = 100;
    int gridBottomOffset = 50;
    int rowHeight = 20;
    DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["WindowHeight"] != null)
        {
            pageSize = Convert.ToInt32((Convert.ToInt32
	    (Session["WindowHeight"]) - gridTopOffset - gridBottomOffset) / 20) - 3;
            lblMessage.Text = "PageSize is:" + pageSize.ToString();
        }
        else
        {
            pageSize = 20;
        }

        if (!IsPostBack)
        {
            GridView1.PageSize = pageSize;
            dt = UIHelper.GetData(300);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        GridView1.PageSize = pageSize;
        GridView1.DataSource = UIHelper.GetData(300); ;
        GridView1.DataBind();
    }
} 

结论

当用户希望其页面大小根据屏幕而不是预定义的页面大小而变化时，这可以用作强大的 UI 功能。除此之外，您还可以有一个下拉菜单，允许用户根据需要更改大小。

注意：如果登录/主页/登录页面本身有 gridview 怎么办？我们如何设置窗口高度？我仍在思考这个问题。请分享您的想法。

历史

• 2011 年 7 月 22 日：初始版本