在弹出的模式对话框中添加GridView控件，并实现分页功能

最新推荐文章于 2025-08-07 21:48:39 发布

原创最新推荐文章于 2025-08-07 21:48:39 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #object #div #server #class #border

ASP.NET专栏专栏收录该内容

102 篇文章

订阅专栏

本文介绍了一个使用ASP.NET实现的包含多个标签页的弹出对话框，每个标签页内都含有一个GridView控件，实现了自定义的分页功能。详细展示了通过JavaScript进行标签切换效果以及C#后台代码实现的分页逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在一个弹出的模式对话框中加入了标签项，实现类似winForm中的Tab控件，并在每一个页面中添加一个GridView，同时利用自己写的代码实现对GridView控件的分页。

我在一个页面中添加了三个GridView和显示控件，前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CarAllInfo.aspx.cs" Inherits="web_CarsManage_CarAllInfo" %>

<%@ Register Src="Controls/CarAllInfoControls/CarYearCheckInfo.ascx" TagName="CarYearCheckInfo"

TagPrefix="uc3" %>

<%@ Register Src="Controls/CarAllInfoControls/CarMaintainInfo.ascx" TagName="CarMaintainInfo"

TagPrefix="uc4" %>

<%@ Register Src="Controls/CarAllInfoControls/CarOilInfo.ascx" TagName="CarOilInfo"

TagPrefix="uc5" %>

<%@ Register Src="../CarAttemper/Controls/CarInfo.ascx" TagName="CarInfo" TagPrefix="uc1" %>

<%@ Register Src="Controls/CarAllInfoControls/CarInfo.ascx" TagName="CarInfo" TagPrefix="uc2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//Switch Tab Effect

function switchTab(tabpage,tabid){

var oItem = document.getElementById(tabpage);

for(var i=0;i<oItem.children.length;i++){

var x = oItem.children(i);

x.className = "";

var y = x.getElementsByTagName('a');

y[0].style.color="#333333";

}

document.getElementById(tabid).className = "Selected";

var dvs=document.getElementById("cnt").getElementsByTagName("div");

for (var i=0;i<dvs.length;i++){

if (dvs[i].id==('d'+tabid) && dvs[i].controlFlag == "yes"){

dvs[i].style.display='block';

document.getElementById("ChosedIndexId").value = dvs[i].choseIndex;

}

else if(dvs[i].controlFlag == "yes")

dvs[i].style.display='none';

}

function doInitTab(){

try{

var index = document.getElementById("ChosedIndexId").value;

var showDivName = "Tab" + index;

switchTab('TabPage1',showDivName);

}catch(ex){}

}

</script>

body {font-size:12px;font-family:宋体}

ul.TabBarLevel1{

list-style:none;

margin:0;

padding:0;

height:29px;

background-image:url(Images/q20066292643.gif);

}

ul.TabBarLevel1 li{

float:left;

padding:0;

height:29px;

margin-right:1px;

background:url(Images/320066292748.gif) left top no-repeat;

}

ul.TabBarLevel1 li a{

display:block;

line-height:29px;

padding:0 20px;

color:#333;

background:url(Images/w20066292815.gif) right top no-repeat;

white-space: nowrap;

}

ul.TabBarLevel1 li.Selected{

background:url(Images/220066292838.gif) left top no-repeat;

}

ul.TabBarLevel1 li.Selected a{

background:url(Images/42006629294.gif) right top no-repeat;

}

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{

color:#333;

}

ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{

color:#F30;

text-decoration:none;

}

ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{

color:#000;

}

ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{

color:#F30;

text-decoration:none;

}

div.HackBox {

padding : 2px 2px ;

border-left: 2px solid #6697CD;

border-right: 2px solid #6697CD;

border-bottom: 2px solid #6697CD;

display:none;

}

.table{

text-align:left;

width:100%;

border:2px solid #ABCFFF;

}

.table td{

height:22px;

line-height:22px;

text-indent:12px;

border:1px solid #ABCFFF;

text-decoration:none;

overflow:hidden;

padding-top:0px;

overflow:hidden;

}

.table td a

{

white-space:normal;

overflow:auto;

text-decoration: none;

color:#264F7B;

}

.table td a:hover{

color:#FF0000;

text-decoration:none;

}

.table th{

height:23px;

line-height:23px;

background-color:#CDE7FE;

border:0px solid #ABCFFF;

background-image:url(/_layouts/images/images/di_03.gif);

background-repeat:repeat-x;

font-weight:normal;

text-indent:12px;

color:#000000;

}

.table th a{

border-bottom:none;

height:23px;

line-height:23px;

text-align:center;

text-decoration:none;

}

.table th a:hover{

height:23px;

line-height:23px;

background:#efefef;

}

.tr2{

background:#DDEEFE;

}

</style>

车辆基本信息</a></li>

<li id="Tab2"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">车辆年检信息</a></li>

<li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');">车辆维修信息</a></li>

<li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">车辆油耗信息</a></li>

</ul>

<uc2:CarInfo ID="CarInfo1" runat="server" />

</div>

<uc3:CarYearCheckInfo ID="CarYearCheckInfo1" runat="server" />

</div>

<uc4:CarMaintainInfo ID="CarMaintainInfo1" runat="server" />

</div>

<uc5:CarOilInfo id="CarOilInfo1" runat="server">

</uc5:CarOilInfo>

</div>

</form>

window.onload = doInitTab;

</script>

</body>

主要是分页代码如下：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class web_CarsManage_Controls_CarAllInfoControls_CarOilInfo : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

if (Request.QueryString["id"] != "")

{

BindGrid();

}

/// <summary>

/// 绑定GridView控件

/// </summary>

public void BindGrid()

{

Yesidea.BO.CarFutelKilometer boCarFutelKiloInfo = new Yesidea.BO.CarFutelKilometer();

DataSet ds = new DataSet();

string id = Request.QueryString["id"];

ds = boCarFutelKiloInfo.GetUnionList(" CID = " + id);

this.gvCarFutelInfo.DataSource = ds;

this.gvCarFutelInfo.DataBind();

//绑定dropdownlist控件

this.ddlCurrentPage.Items.Clear();

for (int i = 1; i <= this.gvCarFutelInfo.PageCount; i++)

{

this.ddlCurrentPage.Items.Add(i.ToString());

}

if (this.gvCarFutelInfo.PageIndex != 0)

{

this.ddlCurrentPage.SelectedIndex = this.gvCarFutelInfo.PageIndex;

}

protected void lnkbtnFrist_Click(object sender, EventArgs e)

{

//显示首页

this.gvCarFutelInfo.PageIndex = 0;

BindGrid();

}

protected void lnkbtnPre_Click(object sender, EventArgs e)

{

//显示上一页

if (this.gvCarFutelInfo.PageIndex > 0)

{

this.gvCarFutelInfo.PageIndex = this.gvCarFutelInfo.PageIndex - 1;

BindGrid();

}

protected void lnkbtnNext_Click(object sender, EventArgs e)

{

//显示下一页

if (this.gvCarFutelInfo.PageIndex < this.gvCarFutelInfo.PageCount)

{

this.gvCarFutelInfo.PageIndex = this.gvCarFutelInfo.PageIndex + 1;

BindGrid();

}

protected void lnkbtnLast_Click(object sender, EventArgs e)

{

//显示最后一页

this.gvCarFutelInfo.PageIndex = this.gvCarFutelInfo.PageCount;

BindGrid();

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

//选择指定页显示

this.gvCarFutelInfo.PageIndex = this.ddlCurrentPage.SelectedIndex;

BindGrid();

}

protected void gvCarFutelInfo_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

this.gvCarFutelInfo.PageIndex = e.NewPageIndex;

BindGrid();

}

protected void gvCarFutelInfo_RowDataBound(object sender, GridViewRowEventArgs e)

{

this.lblCurrentPage.Text = string.Format("当前第{0}页/总共{1}页", this.gvCarFutelInfo.PageIndex + 1, this.gvCarFutelInfo.PageCount);

}