asp.net 分页样式怎样调整 - 问答

在ASP.NET中，分页样式可以通过以下几种方法进行调整：

使用内置的分页控件样式：

ASP.NET提供了内置的分页控件样式，你可以通过修改这些样式来调整分页控件的样式。在Web.config文件中，找到<system.web>部分，设置<pages>元素的theme属性，例如：

<configuration>
  <system.web>
    <pages theme="Default" />
  </system.web>
</configuration>

然后，你可以在CSS文件中重写内置样式的属性，例如：

/* 重写分页控件的背景颜色 */
.aspNetPager .pageButton {
  background-color: #f0f0f0;
}

/* 重写分页控件的选择背景颜色 */
.aspNetPager .pageButtonSelected {
  background-color: #007acc;
}

自定义分页样式：

如果你需要更多的自定义选项，可以创建自定义分页控件。以下是一个简单的自定义分页控件示例：

首先，创建一个新的ASP.NET Web项目，然后在Default.aspx文件中添加以下代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>自定义分页控件示例</title>
    <style type="text/css">
        .customPager {
            font-family: Arial, sans-serif;
            font-size: 14px;
        }

        .customPager a {
            text-decoration: none;
            color: #000;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 4px 8px;
            margin: 2px;
        }

        .customPager a:hover {
            background-color: #007acc;
            color: #fff;
        }

        .customPager .pageInfo {
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="customPager">
            <asp:Label ID="lblPageInfo" runat="server" Text="页码: 1" CssClass="pageInfo"></asp:Label>
            <asp:Repeater ID="rptPages" runat="server">
                <ItemTemplate>
                    <a href='<%# "?page=" + Eval("Value") %>'><%# Eval("Text") %></a>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="lblLastPage" runat="server" Text="共 %d 页" CssClass="pageInfo"></asp:Label>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

接下来，在Default.aspx.cs文件中添加以下代码：

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindPages();
        }
    }

    private void BindPages()
    {
        int totalPages = 10; // 总页数
        int currentPage = 1; // 当前页码
        rptPages.DataSource = GeneratePageNumbers(currentPage, totalPages);
        rptPages.DataBind();
    }

    private static object[] GeneratePageNumbers(int currentPage, int totalPages)
    {
        var pages = new List<object>();

        for (int i = 1; i <= totalPages; i++)
        {
            pages.Add(new { Text = i.ToString(), Value = i });
        }

        return pages.ToArray();
    }
}

这个示例中，我们创建了一个自定义的分页控件，包含当前页码、总页数和页码链接。你可以根据需要修改CSS样式以调整分页控件的样式。

0 赞

0 踩