I am pretty new to ASP.NET. I need to create a show/hide panel in ASP.NET that holds only text. The panel needs to have sliding effect. I can do with with postback. Is there any built-in control that can do this without postback.
Also, the text "Show" should change to "Hide" without postback.
EDIT: Forgot to mention that I have several such panels in my application.
The ASP.Net Ajax Control Toolkit has the accordian control that has customizable themes and effets, the whole library is well worth a look at.
Have you looked into jQuery?
http://api.jquery.com/toggle/
you can try like this....
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function Show1_onclick() {
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
document.getElementById('Hidden1').value = 'Panel1';
}
function Show2_onclick() {
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
document.getElementById('Hidden1').value = 'Panel2';
}
function StartUpScript()
{
if (document.getElementById('Hidden1').value == 'Panel1')
{
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
}
else if (document.getElementById('Hidden1').value == 'Panel2')
{
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
}
}
// -->
</script>
</head>
<body onload="StartUpScript()">
<form id="form1" runat="server">
<div>
<input id="Show1" language="javascript" onclick="return Show1_onclick()" type="button"
value="Show1" />
<input id="Show2" language="javascript" onclick="return Show2_onclick()" type="button"
value="Show2" />
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
<table id="Table1">
<tr>
<td style="width: 95px">
table1<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click1" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
<table id="Table2">
<tr>
<td style="width: 99px">
table2<br />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Click2" />
</td>
</tr>
</table>
</asp:Panel>
<input id="Hidden1" runat="server" type="hidden" />
</div>
</form>
</body>
</html>
Related
<div class="dt_content">
<asp:UpdatePanel runat="server" ID="AlertUpdatePanel">
<ContentTemplate>
<UserControl:ApplicationAlert runat="server" ID="ApplicationAlert" />
<UserControl:ApplicationAlert runat="server" ID="PersonalEssayAlert" Visible="false" />
<boas:KeyDates ID="KeyDates" runat="server" Visible="false" />
</ContentTemplate>
</asp:UpdatePanel>
<boas:OtherDocs ID="OtherDocs" runat="server" />
<input type="hidden" runat="server" id="AppDetailsHidden" />
<% var dummy = 0; %>
<% if (IsRep || IsAdmin)
{ %>
<%=ResourceUtility.GetThemeResource("Copy", "Instructions_DocumentTracker_RepAdmin")%>
<% }
else
{ %>
<%=ResourceUtility.GetThemeResource("Copy", "Instructions_DocumentTracker")%>
<% } %>
<!-- Accordian Menu -->
<asp:Repeater ID="DocumentListingRepeater" runat="server" OnItemCreated="DocumentListingRepeater_ItemCreated">
<ItemTemplate>
<ul class="CollapsiblePanelGroup">
<li id="SectionLI" runat="server">
<div>
<ul>
<li class="category">
<h3>
<asp:LinkButton ID="OpenDocumentsLinkButton" runat="server" OnClientClick='<%#"return ToggleDocTrackerPanel(" + Convert.ToChar(39) + "cat" + (((RepeaterItem)Container).ItemIndex).ToString() + Convert.ToChar(39) + ")" %>'
OnCommand="OpenDocumentsLinkButton_Command" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"DocumentCategoryID") %>'><img id="toggle<%#(((RepeaterItem)Container).ItemIndex).ToString()%>" alt="" class="toggle" src="../Images/plus.png" /></asp:LinkButton><a
href='Details.aspx?section=<%# DataBinder.Eval(Container.DataItem, "DocumentCategoryID")%>'><%# DataBinder.Eval(Container.DataItem, "DocumentCategoryDescription")%></a></h3>
</li>
<li id="StatusLI" runat="server">
<h3>
<asp:Literal ID="StatusLiteral" runat="server" /></h3>
</li>
</ul>
</div>
<div id="cat<%#(((RepeaterItem)Container).ItemIndex).ToString()%>" class="CollapsiblePanelContent">
<asp:UpdatePanel ID="DocumentTrac" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="DocumentTrackerPlaceHolder" runat="server">
<div style="text-align: center">
Loading
<br />
<img runat="server" alt="Please wait." src="~/images/loading2.gif" />
</div>
</asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OpenDocumentsLinkButton" />
</Triggers>
</asp:UpdatePanel>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
<div style="text-align: center;" runat="server" id="applicationRequirementsPanel">
<a runat="server" id="modalButton">
<asp:Image ID="Image1" runat="server" SkinID="img_appReq" /></a>
</div>
<script type="text/javascript">
ToggleDocTrackerPanel();
</script>
</div>
Hi there!
The code snippet I shared, updates the content inside the content panel.
So we have different user roles, and when running the application as a normal user the OnCommand event gets triggered accordingly, gets all the content from the backend, and updates the 'Please Wait' text with the received content inside the Update Panel, but when I try to log in as Admin the same exact piece of code runs but the OnCommand event does not get triggered.
I tried adding the even name but that does not work.
During the page load I can see the data is getting bounded properly(as it is working fine when logged in a normal user).
Being a backend developer I am not that much familiar with this frontend technology, So little help or explanation would be appreciated. Thanks!
I'm trying to figure out how to center this table without taking into account the third column, which is for data validation. I have it rendering exactly how I want it now with the display none attributes on the third column but then my error text won't show. What is the simplest way to go about this? Thanks!
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="budgetTracker.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="content/custom.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="container center">
<div class="center">
<div class="vert">
<table style="margin-left: auto; margin-right: auto;">
<tr>
<td colspan="2">
<h1>Budget Tracker Login</h1>
</td>
</tr>
<tr>
<td>
<asp:Label ID="userNamelbl" runat="server" Text="User Name"></asp:Label></td>
<td>
<asp:TextBox ID="userNameBox" class="form-control" runat="server"></asp:TextBox></td>
<td style="display: none;">
<asp:RequiredFieldValidator ID="userNameRequired" runat="server" ErrorMessage="Username is Required" ControlToValidate="userNameBox" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
<asp:Label ID="passwordlbl" runat="server" Text="Password"></asp:Label></td>
<td>
<asp:TextBox ID="passwordBox" class="form-control" runat="server" TextMode="Password"></asp:TextBox></td>
<td style="display: none;">
<asp:RequiredFieldValidator ID="passwordRequired" runat="server" ErrorMessage="Password is Required" ControlToValidate="passwordBox" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" class="btn btn-primary btn-space" Text="Login" OnClick="loginButton_Click" /></td>
</tr>
<tr>
<td colspan="2">Not yet a member? Click HERE to register!</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
Marco is right, table should be used for tabular data not for layout.
To answer your question, you can remove the "display: none;" in your td tag.
Add a label control for your error message (I'd call it "ErrorLabel") then add this code on in your "error area" (that would be inside your loginButton_Click method)
ErrorLabel.Visible = true;
In your PageLoad, add this:
if (!IsPostBack){
ErrorLabel.Visible = false;
}
i'm facing a problem, currently i'm having a update panel in my master page and in one of my child page i'm having a asp fileupload control.
My update Panel in master p[age:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:updateprogress associatedupdatepanelid="UpdatePanel1"
id="updateProgress" runat="server">
<progresstemplate>
<div id="processMessage" style=" background-image:url('../../Styles/ajax-loader3.gif'); width:100px; height:100px; background-repeat:no-repeat; background-position:center;">
</div>
</progresstemplate>
</asp:updateprogress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
..
</ContentTemplate>
</asp:UpdatePanel>
</form>
My Child page which needs a fileupload:
<div id="Annoucments" class="ContentDIV">
<h2 class="Tabheader">Annoucments</h2>
<p class="tabdescription">Here you will be able to upload announcements and pictures to be displayed in the login page, below is the current announcement click on update to save the changes that you have made.</p>
<table width = "100%">
<tr>
<td class="Tablabel">Annoucment title:</td> <td class="tableInput" align="left"><asp:TextBox ID="Announcement_TB" runat="server" CssClass="textboxTabs"></asp:TextBox></td>
<td class="Tablabel">Picture/Poster:</td> <td class="tableInput" align="left"><asp:FileUpload ID="Announcement_PIC" runat="server" CssClass="textboxTabsFiles"/></td>
</tr>
<tr>
<td class="Tablabel">Description:</td> <td class="tableInput" align="left"><asp:TextBox ID="Announcement_Desc" CssClass="textboxTabs" runat="server" Rows="3" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr><td colspan="4" style="height:10px" id ="BLANK">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td></tr>
<tr>
<td colspan="2" align="right"><input type="button" id="Announcement_Update" runat="server" value="Update" class="TabButton" onserverclick="ANNOUNCEMENT_UPDATE_Click" style=" font-size:smaller"/></td><td colspan="2"> <input type="button" ID="ANNOUNCEMENT_Cancel" runat="server" value="Cancel" class="TabButton" style=" font-size:smaller"/></td>
</tr>
</table>
</div>
*When i click the button Announcement_Update backend codes will be triggered to get my filename, the file name returned will always be "" found out while debugging.*
Put this code in child page, to pass PostBackTrigger for file upload.
protected void Page_Load(object sender, EventArgs e)
{
UpdatePanel updatePanel = Page.Master.FindControl("UpdatePanel1") as UpdatePanel;
UpdatePanelControlTrigger trigger = new PostBackTrigger();
trigger.ControlID = Announcement_Update.UniqueID;
updatePanel.Triggers.Add(trigger);
}
enjoy coding :)
You can't get filename inside that UpdatePanel
either remove that UpdatePanel from your code or use Asynchronous File Uploader,
Alternatively you could use Ajax File Uploading techniques this is a little tricky though.
Asp UpdatePanel not work inside a update panel duw to postback issue.
You can add trigger with the button assosiated with uploader like
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
It works for me if you add the Trigger, but also make sure to edit to form tag to include:
<form runat="server" enctype="multipart/form-data">
using VS 2010, C#, asp.net
I have timer control in my master page and I want to access it from my master page .cs file
But it didn't work, even when I used this code
((System.Web.UI.Timer)this.FindControl("Timer1")).Enable = false;
it look like VS don't know what is tiemr control ?!!!
please advice,
my first try was just,
Timer1.Enable=false;
and it didn't work and got this in when I run the web
"Compiler Error Message: CS1061: 'System.Web.UI.Timer' does not contain a definition for 'Enable' and no extension method 'Enable' accepting a first argument of type 'System.Web.UI.Timer' could be found (are you missing a using directive or an assembly reference?)"
here is my asp.net code
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Ads_master.master.cs" Inherits="Ads_master" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title>Every200</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 22%;
}
.style2
{
width: 263px;
}
.style3
{
width: 49px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="title">
<h1 style="font-family: Tahoma">
EVERY200.com
</h1>
<p style="color: #FFFF66; font-weight: 700; font-family: Tahoma;"> stop hunt cents, start hunt dollars</p>
</div>
<div class="loginDisplay">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<table class="style1">
<tr>
<td class="style2">
</td>
<td class="style2">
</td>
<td class="style2">
<asp:Label ID="Label_counter" runat="server" Font-Bold="True"
Font-Size="XX-Large" Text="0"></asp:Label>
<asp:Label ID="Label_message" runat="server" Font-Bold="True"
Font-Size="Medium"></asp:Label>
<asp:Label ID="AdsCaptchaHolder" runat="server" Visible="False"></asp:Label>
</td>
<td class="style3" style="text-align: left">
</td>
<td class="style3" style="text-align: left">
<asp:Button ID="Button_verify" runat="server" BackColor="#0033CC"
BorderStyle="Solid" Height="100%" onclick="Button1_Click" Text="Verify"
Visible="False" Width="100%" />
</td>
<td class="style3" style="text-align: left">
</td>
<td>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="http://images.neobux.com/imagens/banner5.gif"
PostBackUrl="http://www.neobux.com/?r=amrosama77" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="10000" ontick="Timer1_Tick">
</asp:Timer>
</div>
<div class="clear hideSkiplink">
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer" align="left">
</div>
</form>
</body>
</html>
try this,
Timer tm = Master.FindControl("Timer1") as Timer;tm.Enabled = false;
If you have added timer control in Master Page file, you can access timer control directly in Masterpage code behind file.
Please refer below code:
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<asp:Timer runat="server" id="Timer1">
</asp:Timer>
</asp:ContentPlaceHolder>
Code behind file :(.cs file)
Timer1.Enabled = false;
Please check if you have added the ScriptManager code.
Hi,
Please try this code and check.
((Timer)this.FindControl("timer1")).Enabled = false;
Here is my code, but it doesn't work (code behind gets empty string):
`
<head id="Head1" runat="server">
<title>Pass Javascript Variables to Server</title>
<script type="text/javascript"> // Second Step
function f() {
$("[id$='inpHide']").val("My JavaScript Value");
}
</script>
</head>
<body onload="SetHiddenVariable()">
<form id="form1" runat="server">
<div>
<input id="inpHide" type="hidden" runat="server" />
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
`
There were couple of issues in your code. The parenthesis were missing while calling f function in onClientClick and if the element has id you can just use the id to select it with #
<head id="Head1" runat="server">
<title>Pass Javascript Variables to Server</title>
<script type="text/javascript"> // Second Step
function f() {
$("input[id*='inpHide']").val("My JavaScript Value");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="inpHide" type="hidden" runat="server" />
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f()"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
Your <input> tag needs a name attribute, or it won't be posted.
The response from Sean McMillan is right, but I think you also need to change this :
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f"/>
to
<asp:Button ID="btnJSValue" Text="Click" runat="server" OnClientClick="f();"/>