Monday, March 26, 2012

Tab Panel

Hello Everyone,

I've been working with the tab panel example in the AJAX Control Toolkit and I have a problem I just cannot seem to solve. How would I cause a click on a specific tab to call a specific function on the C# code behind page? Is this something I can do on the C# side? If not, you might have to give some example code as I'm a newbie at ASP.NET and Javascript. Thanks in advance.

Robert

hi Robert,

The tab Panel/container does not have an autopost back mechanism. So you must do it your self by adding;

"text/javascript"> function ActiveTabChanged(sender, e) { __doPostBack('<%= tc1.ClientID %>', sender.get_activeTab().get_headerText()); }

<scripttype="text/javascript">

function ActiveTabChanged(sender, e)

{

__doPostBack('<%= tc1.ClientID %>', sender.get_activeTab().get_headerText());

}

</script>

andset the OnClientActiveTabChanged="ActiveTabChanged"


The previous answer didn't quite do everything required for you.

Add the following script to your page:

<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= idofmytabcontainer.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>


Then ensure your markup for the tab container has the following entries:

OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="ActiveTabChangedServer"

In the page load event of your code behind file add:

ScriptManager1.RegisterAsyncPostBackControl(idofmytabcontainer);


Finally add the ActiveTabChangedServer method to the code behind file:

protected void ActiveTabChangedServer(object sender, EventArgs e)
{
if (idofmytabcontainer.ActiveTab == idoftabpanel1)
{
//Do something in code
}

if (idofmytabcontainer.ActiveTab == idoftabpanel2)
{
//Do something in code
}
}

I hope that helps


Does anyone have a sample tab panel that is working that they can paste below (or e-mail to me)? I'm making a mistake somewhere and cannot figure out where. If I had a sample tab panel that is already working correctly I can work from there. Thanks in advance.

Robert


Robert, the above code worked for me (when I checked it with a break point in Visual Studio), but the msgs I wanted to display didn't display. Then I put in an UpdatePanel around the labels and added a trigger and the messages showed. Here is what I added on the panel that was clicked:

<asp:UpdatePanelID="UpdatePanel7"runat="server">

<ContentTemplate>

<asp:LabelID="lblEmailMsg"runat="server"ForeColor="red"Font-Bold="true"/>

<asp:LinkButtonrunat="server"ID="lbtnAssignEmail"Visible="true"Text="Click here to fix this."/>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="Tabs"EventName="ActiveTabChanged"/>

</Triggers>

</asp:UpdatePanel>


Actually, here is the correct linkbutton control, but it is not really part of the solution. I just was not ready to test the link button yet so I left out the OnClick.

<asp:LinkButtonrunat="server"ID="lbtnAssignEmail"Visible="true"OnClick="OnClickPanel1"Text="Click here to fix this."/>


zoetosis,

I am using masterpages and my script manager is in the masterpage, how do I add the RegisterAsyncPostBackControl in page_load when I am using master pages.

Thanks


In VB:

ScriptManager.GetCurrent(Me.Page).RegisterAsyncPostBackControl([nameoftabcontainer])

No comments:

Post a Comment