TabContainer要实现服务器端回传
2008-06-29 10:02
489 查看
搞不懂为什么AJAX Control Toolkit 的Tab控件为什么不提供TabPanel切换时可设置回传或回调。我就要需要这个功能:当在TabPanel切换时,实现动态加载TabPanel里的内容。
Google了不少网页,看了不少的文章,好几次冲动地想自己把功能做出来,可抱着别人也应该会遇到这个问题的幻想,终于老天不负有心人,给我打到了答案。似乎找不到中文版的解决方案,可英文版竟然找到了。
答案在这个网址里:http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=7739
不想看E文的话,我这里说下:
1。在UpdatePanel里加上这个:
<triggers>
<asp:AsyncPostBackTrigger ControlID="tabContainer" EventName="ActiveTabChanged" /> </triggers>
2。在aspx网页上加上这个客户端脚本:
function ActiveTabChanged(sender, e)
{
<%= Page.ClientScript.GetPostBackEventReference(TabContainer, String.Empty) %>
}
或
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= TabContainer.ClientID %>', sender.get_activeTab().get_headerText());
}
3。在Tab控件加上这个属性: OnClientActiveTabChanged="ActiveTabChanged"
4。在Page_Load事件里加: ScriptManager1.RegisterAsyncPostBackControl(TabContainer); 注意:将以上的“TabContainer”替换为你自定的tab控件ID
TabContainer要实现服务器端回传,出来在后台实现 OnActiveTabChanged 事件外, 还需要在前台实现 OnClientActiveTabChanged 事件,这是关键。
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<contenttemplate>
<ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="480px" Width="100%"
OnClientActiveTabChanged="activeTabChanged"
OnActiveTabChanged="Tabs_ActiveTabChanged">
<ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="我的消息"> <ContentTemplate>
***
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="已发消息">
<ContentTemplate>
***
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</contenttemplate>
<triggers>
<asp:AsyncPostBackTrigger ControlID="Tabs" EventName="ActiveTabChanged" />
</triggers>
</asp:UpdatePanel>
<script language="javascript" type="text/jscript">
function activeTabChanged(sender, e)
{
__doPostBack('<%= Tabs.ClientID %>', sender.get_activeTabIndex());
}
</script>
后台.cs代码:
protected void Tabs_ActiveTabChanged(object sender, EventArgs e) {
switch (Tabs.ActiveTabIndex)
{
case 0: BindGrid();
break;
case 1: BindGrid2();
break;
case 2: Message.Text = "";
break;
default: break;
} }
Google了不少网页,看了不少的文章,好几次冲动地想自己把功能做出来,可抱着别人也应该会遇到这个问题的幻想,终于老天不负有心人,给我打到了答案。似乎找不到中文版的解决方案,可英文版竟然找到了。
答案在这个网址里:http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=7739
不想看E文的话,我这里说下:
1。在UpdatePanel里加上这个:
<triggers>
<asp:AsyncPostBackTrigger ControlID="tabContainer" EventName="ActiveTabChanged" /> </triggers>
2。在aspx网页上加上这个客户端脚本:
function ActiveTabChanged(sender, e)
{
<%= Page.ClientScript.GetPostBackEventReference(TabContainer, String.Empty) %>
}
或
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= TabContainer.ClientID %>', sender.get_activeTab().get_headerText());
}
3。在Tab控件加上这个属性: OnClientActiveTabChanged="ActiveTabChanged"
4。在Page_Load事件里加: ScriptManager1.RegisterAsyncPostBackControl(TabContainer); 注意:将以上的“TabContainer”替换为你自定的tab控件ID
TabContainer要实现服务器端回传,出来在后台实现 OnActiveTabChanged 事件外, 还需要在前台实现 OnClientActiveTabChanged 事件,这是关键。
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<contenttemplate>
<ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="480px" Width="100%"
OnClientActiveTabChanged="activeTabChanged"
OnActiveTabChanged="Tabs_ActiveTabChanged">
<ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="我的消息"> <ContentTemplate>
***
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="已发消息">
<ContentTemplate>
***
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</contenttemplate>
<triggers>
<asp:AsyncPostBackTrigger ControlID="Tabs" EventName="ActiveTabChanged" />
</triggers>
</asp:UpdatePanel>
<script language="javascript" type="text/jscript">
function activeTabChanged(sender, e)
{
__doPostBack('<%= Tabs.ClientID %>', sender.get_activeTabIndex());
}
</script>
后台.cs代码:
protected void Tabs_ActiveTabChanged(object sender, EventArgs e) {
switch (Tabs.ActiveTabIndex)
{
case 0: BindGrid();
break;
case 1: BindGrid2();
break;
case 2: Message.Text = "";
break;
default: break;
} }
相关文章推荐
- (转)TabContainer要实现服务器端回传
- 推送通知iOS客户端编写实现及推送服务器端编写
- 浅谈在ASP.NET MVC3中使用IClientValidatable接口实现客户端和服务器端同时验证
- android UI进阶之用gallery实现可滑动的Tab
- php上传图片客户端和服务器端实现方法
- ajax跨域之---服务器端代理实现
- 用户体验测试的自动化实现 - 第二种检查Tab顺序的方法
- Android用TabLayout实现类似网易选项卡动态滑动效果
- Android TabWidget切换卡的实现应用
- winform如何用tabControl控件实现纵向选项卡效果?
- Android中两种实现底部Tab的方法
- 服务器端物理实现(二)
- ViewPager实现Tab(2)
- tab选卡的多种实现方式
- Yale cas服务器端/客户端环境配置以及其在tomcat服务器下SSL安全协议得部署之完全实现篇
- 基于服务器端缓存redis的简单实现
- Android入门第十五篇之ActivityGroup + GridView 实现Tab分页标签 .
- TabNavigator控件的子选项卡是用states实现的
- Java中使用Socket实现服务器端和客户端通讯
- RecycleView瀑布流header向上滑动时tab固定在顶部实现方法