TabContainer Control : It provide the tab which contain the information which is easily handel by using this AJAX Control in our project. TabContainer control has some TabPanel which contain the specific name and related data.
TabPanel contain two main section <ContentTemplate> and <HeaderTamplate>
How we implement the Update Progress server control
Example:
Step1: we use the following control on aspx page
<div>
<%--Using ScriptManager or ToolkitScriptManager according toolkit version--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%-- add the TabContainer--%>
<cc1:TabContainer ID="TabContainer1" runat="server" Height="100" Width="300">
<cc1:TabPanel runat="server">
<HeaderTemplate>News</HeaderTemplate>
<ContentTemplate>This is the news section</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server">
<HeaderTemplate>Sports</HeaderTemplate>
<ContentTemplate>This is the sports section</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanelrunat="server">
<HeaderTemplate>Media</HeaderTemplate>
<ContentTemplate>This is the media section</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
Step2: Run the project
Output:
Amit Singh
25-Jan-2012Hi Sindhu,
I have checked your code and try one sample according " file upload control not working in ajax tabcontainer"
Check this code
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function CheckFileExistence() {
var filePath = document.getElementById('TabContainer1_ctl00_FileUpload1').value;
if (filePath.length < 1) {
alert("File Name Can not be empty"); return false;
}
var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
alert(ext);
if (ext == "png") {
return true;
}
alert('The file extension ' + ext.toUpperCase() + ' is not allowed!');
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:TabContainer ID="TabContainer1" runat="server" Height="100" Width="300">
<asp:TabPanel runat="server">
<HeaderTemplate>
File Upload</HeaderTemplate>
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="btnUpload_Click" OnClientClick="return CheckFileExistence()" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server">
<HeaderTemplate>
Tab2</HeaderTemplate>
<ContentTemplate>
Tab2</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</div>
</form>
</body>
</html>
//Server Side------------
protected void btnUpload_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string fileName = "Images/" + FileUpload1.FileName;
FileUpload1.SaveAs(MapPath(fileName));
}
}
sindhu aduru
25-Jan-2012i am using ajax tabcontainer in my web page in this i have 3 tab panels in my first tab panel i have file upload control and one button. when i click on the button uploaded file should sace in images folder present in the solution.
here, After i uploaded the file when i click on the button i am checking for (Fileupload1.HasFile != false) here hasfile is false always. can any one please help me to solve this.
Here is my code: (client side)
<asp:TabContainer ID="tc1" runat="server" ActiveTabIndex="0" OnDemand="true" AutoPostBack="false"
OnActiveTabChanged="ActiveTabChangedServer">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="Utility Logo" OnDemandMode="Always">
<ContentTemplate>
<div id="Div2" class="form-content" runat="server">
<table width="100%">
<tr>
<td class="warning-msg" align="center">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td class="subHeading">
<h1>
<asp:Label ID="Label2" runat="server" Text=" Upload Utility Logo "></asp:Label>
</h1>
</td>
</tr>
<tr>
<td align="center">
<asp:Panel ID="pnlUtilityLogo" runat="server">
<table width="100%" cellpadding="6">
<tr>
<td align="left" class="content-td1">
<b>Logo</b>
</td>
<td align="left" class="content-td2">
<%-- <asp:AsyncFileUpload ID="flupLogo" runat="server" Width="212px" CssClass="{required:true}">
</asp:AsyncFileUpload>--%>
<asp:FileUpload ID="flupLogo" runat="server" Width="212px" CssClass="{required:true}">
</asp:FileUpload>
</td>
</tr>
<tr>
<td>
</td>
<td class="content-td2">
<asp:Button ID="btnSubmitLogo" runat="server" Text="Upload" CssClass="button" OnClick="btnSubmitLogo_Click"
OnClientClick="return CheckFileExistence()" />
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Configure State & Country"
OnDemandMode="Always">
<ContentTemplate>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</asp:Content>
java script:
<script type="text/javascript">
function CheckFileExistence() {
var filePath = document.getElementById('<%= this.flupLogo.ClientID %>').value;
if (filePath.length < 1) {
alert("File Name Can not be empty"); return false;
}
var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
if (ext == "png") {
return true;
}
alert('The file extension ' + ext.toUpperCase() + ' is not allowed!');
return false;
}
</script>
server side function:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protected void btnSubmitLogo_Click(object sender, EventArgs e)
{
if (flupLogo.HasFile && flupLogo.FileName != string.Empty && flupLogo.FileContent.Length > 0)
{
try
{
flupLogo.PostedFile.SaveAs(Server.MapPath("~/images/") + "\\" + flupLogo.FileName.ToString());
lblWarningMsg.Text = "Successfully Uploaded";
}
catch (Exception ex)
{
lblWarningMsg.Text = "Selected file is not an image.<br />" + ex.Message;
}
}
}