ASP.net Ajax tab container not appearing
I created new web project using VS 2008 with enabled Ajax template with C# and Framework 3.5.
I added Ajax reference to the project and I can see all Ajax toolkit in my tool box.
The problem that when I add tab container with Tab Panels then run the projects nothing appear on the browser and I tried few browsers.
I'm including my code and I wish that someone would help me.
Regards,
My Code: ................................................................
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Contacts._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page&l开发者_开发百科t;/title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<ContentTemplate>
tab 1
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2">
<ContentTemplate>
tab 2
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="TabPanel3" ID="TabPanel3">
<ContentTemplate>
tab 3
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>
Instead of using <asp:scriptmanager>
, try using <ajaxToolkit:ToolkitScriptManager>
. I found I had problems with the AJAX Accordion when using the original scriptmanager, so this may be a similar issue.
Do Not Set first tab to visible=false or
Or use cheap trick just below tabContainer add javascript
Basically TabContainer is rendered as a div tag, get the div id and remove style attribute. This was not an issue in AjaxControlToolKit1.0.abcd the lower version but only started in version 3.x
<script type="text/javascript">
$(document).ready(function () {
$("#ctl00_content_profileListTab").removeAttr("style");
});
</script>
The answer is using <ajaxToolkit:ToolkitScriptManager>
instead of <asp:scriptmanager>
.
精彩评论