TabContainer的OnActivetabChanged用法

在前台TabContainer添加事件OnActivetabChanged="TabContainer1_ActiveTabChanged"


后台代码在OnActivetabChanged事件中执行GridView的绑定事件

protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e) { DataSet ds = new DataSet(); GridView1.DataSource = GetData(ds).Tables["Table_VIP"]; GridView1.DataBind(); }


注意,需要在Page_Load方法里调用该事件,否则在切换Tab的时候是没有反应的,因为它不会postback

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.TabContainer1_ActiveTabChanged(sender, e); } }


完整代码如下

前台

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccessRemoteData._Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <%@ Register TagPrefix="UC1" TagName="Control1" Src="~/WebUserControl1.ascx" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnActivetabChanged="TabContainer1_ActiveTabChanged"> <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <ContentTemplate> <UC1:Control1 ID="userControl1" runat="server" /> </ContentTemplate> </asp:TabPanel> <asp:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> </ContentTemplate> </asp:TabPanel> </asp:TabContainer> </asp:Content>


后台

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.SqlClient; using System.Configuration; namespace AccessRemoteData { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.TabContainer1_ActiveTabChanged(sender, e); } } private DataSet GetData(DataSet ds) { string sqlConn = ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString; SqlConnection conn = new SqlConnection(sqlConn); conn.Open(); string strSQL = "SELECT * FROM Table_VIP"; SqlDataAdapter adpt = new SqlDataAdapter(strSQL, conn); adpt.Fill(ds, "Table_VIP"); return ds; } protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e) { DataSet ds = new DataSet(); GridView1.DataSource = GetData(ds).Tables["Table_VIP"]; GridView1.DataBind(); } } }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现当页面滚动距离大于taskDetail-body-header时,antd的Tabs组件的选项卡头固定在顶部,并且在切换标签页后保持固定状态,可以使用CSS的`position: sticky`属性和JavaScript来实现。 首先,在你的HTML文件中,给Tabs组件的选项卡头添加一个id,例如: ```html <a-tabs v-model="activekey" @change="changeActivekey" id="tabsContainer"> <!-- 选项卡内容 --> </a-tabs> ``` 然后,在你的CSS文件中添加以下样式: ```css #tabsContainer { position: sticky; top: 0; z-index: 1; } ``` 这将使选项卡头在页面滚动时固定在顶部。 接下来,在你的JavaScript文件中,添加以下代码: ```javascript // 监听标签页切换事件 document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('#tabsContainer a-tab-pane'); tabs.forEach(tab => { tab.addEventListener('click', function() { // 判断选项卡头是否固定在顶部 const tabsContainer = document.getElementById('tabsContainer'); const isSticky = tabsContainer.getBoundingClientRect().top === 0; // 如果固定在顶部,则让页面回跳到顶部 if (isSticky) { window.scrollTo({ top: 0, behavior: 'smooth' }); } }); }); }); ``` 这段代码会在标签页切换时检查选项卡头是否固定在顶部,如果是,则通过`window.scrollTo`方法让页面回跳到顶部。 这样,当页面滚动距离大于taskDetail-body-header时,antd的Tabs组件的选项卡头将固定在顶部,并且在切换标签页后仍然保持固定状态。当选项卡头不固定在顶部时,切换标签页后页面会回跳到顶部。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值