Div show hide not working when using UpdatePanel inside dev - c#

<div id="test1" runat="server">
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
C# Code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid) {
// ...
test1.Visible = false;
test2.Visible = true;
} else {
// do some thing...
}
}

Only elements inside of the update panel will be updated when an update panel is triggered.
Since you only have the button in the update panel, the button is the only thing that will get updated, even though you set it in the code behind. You just have to wrap all the elements you want updated in the panel like so.
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<div id="test1" runat="server">
<asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Try following Code:
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<div id="test1" runat="server">
<asp:Button ID="btnSubmit" Enabled="True" CssClass="asgButton" runat="server" Text="Submit" OnClick="btnSubmit_OnClick"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="updDiv2" UpdateMode="Conditional">
<ContentTemplate>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And in code-behind:
protected void btnSubmit_OnClick(object sender, EventArgs e)
{
if (Page.IsValid)
{
test1.Visible = false;
test2.Visible = true;
updDiv2.Update();
}
}
If you update controls from an UpdatePanel they have to be either in the same UpdatePanel or in another one.
If the controls are in another one make sure to call Update of the UpdatePanel containing the controls after editing them.
Make sure as well to set UpdateMode="Conditional" on the UpdatePanel otherwise Update would throw an exception.

Cover your complete div inside update panel..You should place the controls which have to be updated inside update panel..
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<div id="test1" runat="server">
<asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
</ContentTemplate>
</asp:UpdatePanel>

My suggestion is do not use Visible property.Instead do the following things
1)Remove Visibile="False" .Use Style="display:none"
<div id="test2" style="display:none" runat="server">
2)Add the following javascript in the design page.
function divviZ()
{
var test1=document.getElementById("<%=test1.ClientId%>");
var test2=document.getElementById("<%=test2.ClientId%>");
if(test2.style.display=="none")
{test1.style.display="block";}
else
{test1.style.display="none";}
}
3)Change the vb code as follows
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid) {
// ...
test2.style("display")="block"
ScriptManager.RegisterClientScriptBlock(this, this.GetType, "divviz", "javascript:divviZ()", True)
} else {
// do some thing...
}
}

Related

ASP Multiple UpdatePanels with gridviews but only one updating

I wish to have 3 gridviews on a single aspx page fed by individual DB queries (displaying static data, no manipulation) and based on a 10 second timer, refresh the tables. I have the code to return the datatables sorted. I can make it update one gridview which is in one of my update panels, but the other two dont render.
Code is:
<%# Page Title="Index" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Test.Admin" %>
<script runat="server" type="text/c#">
protected void Page_PreRender(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
FullAccessSession.DataSource=GetStatus("FullAccess");
FullAccessSession.DataBind();
Label2.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LimitedAccessSession.DataSource=GetStatus("LimitedStatus");
LimitedAccessSession.DataBind();
Label3.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LogData.DataSource = GetLog() ;
LogData.DataBind();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
FullAccessSession.DataSource=GetStatus("FullAccess");
FullAccessSession.DataBind();
}
protected void Timer2_Tick(object sender, EventArgs e)
{
Label3.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LogData.DataSource = GetLog() ;
LogData.DataBind();
}
protected void Timer3_Tick(object sender, EventArgs e)
{
Label2.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LimitedAccessSession.DataSource=GetStatus("LimitedStatus");
LimitedAccessSession.DataBind();
}
</script>
<div class="row">
<div class="col-md-7">
<asp:UpdatePanel ID="UpdateFullAccessStatus" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick">
</asp:Timer>-->
<asp:Label ID="Label7" runat="server" Font-Bold="True" Text="Full Access Logged In Users"></asp:Label>
<br />
<asp:Label ID="Label1" runat="server" Text="Panel not refreshed yet."></asp:Label>
<br />
<asp:GridView ID="FullAccessSession" runat="server">
</asp:GridView>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdateLimitedAccessStatus" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer3" runat="server" Interval="10000" OnTick="Timer2_Tick">
</asp:Timer>-->
<asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Limited Access Logged In Users"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Panel not refreshed yet."></asp:Label>
<br />
<asp:GridView ID="LimitedAccessSession" runat="server">
</asp:GridView>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdateLog" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer2" runat="server" Interval="10000" OnTick="Timer2_Tick">
</asp:Timer>-->
<asp:Label ID="Label5" runat="server" Font-Bold="True" Text="General Log"></asp:Label>
<br />
<asp:Label ID="Label3" runat="server" Text="Panel not refreshed yet."></asp:Label>
<asp:GridView ID="LogData" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I cant work out why one of my update panels are working. As you can see i've tried using the PreRender function as well as (currently commented out) timers. The labels are updating with the current time but only one gridview displays.
Any help would be appreciated
Thanks
The issue here is that the script of timer is lost after the post back inside the UpdatePanel - the solution is to take it out of the update panel and use Triggers
Here is an example that I test it and works.
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="2800"></asp:Timer>
<asp:Timer ID="Timer2" runat="server" ontick="Timer2_Tick" Interval="2500"></asp:Timer>
<div>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
<ContentTemplate>
<asp:Literal runat="server" ID="txtTest1"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer2" />
</Triggers>
<ContentTemplate>
<asp:Literal runat="server" ID="txtTest2"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
and on code behind the ontick is the trigger, eg:
protected void Timer1_Tick(object sender, EventArgs e)
{
txtTest1.Text += "1.";
}

UpdatePanel and panel visibility asp.net c#

I have two panels. Each panel contains an updatepanel.
The first panel is a password Textbox.
I set the second panel's visibility on page_load to false.
If the user enters the correct password, the second panel should be visible and the first panel shouldnd.
The code:
<asp:Panel ID="passwordPanel" runat="server">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
Geben Sie das Passwort ein:<br />
<br />
<asp:TextBox ID="txtPassword" AutoPostBack="false" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
<asp:Button ID="btnConfirmPassword" runat="server" AutoPostBack="true" Text="Senden" CssClass="button" OnClick="btnConfirmPassword_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="panelUploadDownload" runat="server">
<h2>Upload Paketformeln CSV</h2>
<input type="file" id="myFile" name="myFile" />
<asp:Button runat="server" ID="btnUpload" OnClick="btnUploadClick" CssClass="button" Text="Upload" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<br />
<asp:Label ID="lblStatus" runat="server" Text="statusLabel"></asp:Label>
<br />
<asp:Panel ID="panelChanges" runat="server" CssClass="pnlCSS">
<asp:Label ID="lblChangesHeader" runat="server" Font-Bold="True" ForeColor="Black" Text="Änderungen"></asp:Label>
<br />
<asp:Label ID="lblChanges" runat="server" ForeColor="#009900" Text="changes"></asp:Label>
<br />
<br />
<asp:Button ID="btnConfirm" runat="server" OnClick="btnConfirm_Click" CSSClass="button" Text="Änderungen bestätigen" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
<br />
<h2>Download Paketformeln CSV</h2>
<p><asp:Button ID="btnDownloadCsv" runat="server" OnClick="btnDownloadCsv_Click" Text="Download CSV" CSSClass="button"/></p>
</asp:Panel>
And the C# code:
protected void btnConfirmPassword_Click(object sender, EventArgs e)
{
if (txtPassword.Text == "XX")
{
uploadDownloadPanel.Visible = true;
passwordPanel.Visible = false;
}
}
Load Event
protected void Page_Load(object sender, EventArgs e)
{
mainController = new MainController();
setStatus("", Color.Black);
lblChanges.Visible = false;
lblChangesHeader.Visible = false;
btnConfirm.Visible = false;
panelChanges.Visible = false;
panelUploadDownload.Visible = false;
}
For some reason it doesnt work. Any clues? Triggers?
The SecureString class doesn't allow you to see the value; that's the whole point of it. If you want to be able to work with the value entered into the PasswordBox, use the Password member of PasswordBox instead of the SecurePassword member:
protected void btnConfirmPassword_Click(object sender, EventArgs e)
{
if (txtPassword.Password == "XX")
{
uploadDownloadPanel.Visible = true;
passwordPanel.Visible = false;
}
}
i just removed the updatepanel from the passwordPanel and it worked.
In your load event, do the following
if(IsPostback)
{
uploadDownloadPanel.Visible = false;
}
Actually, every time when you press button, you load event also triggered
You can set your UpdateMode to Always of update panel within panelUploadDownload panel.It will work.
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" runat="server">

Update Panel Button need to be pressed twice to update

I have a List View inside an update panel, but I can't get it to update properly - each item has a button that removes it from the list - which it does but it takes two button presses to see the item disappear from the page.
Here the markup:
<asp:ScriptManager ID="DashScriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="ToDoUpdate" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="ToDo" runat="server">
<ItemTemplate>
<li style="" class="<%# Eval("ToDoPriority")%>">
<%# Eval("ToDoText")%>
<div class="agile-detail">
<asp:LinkButton ID="ToDoComplete" runat="server" CssClass="pull-right btn btn-xs btn-primary" Text="Done" OnClick="ToDoComplete_Click"></asp:LinkButton>
<i class="fa fa-clock-o"></i> <%# Eval("ToDoDate")%>
</div>
</li>
<asp:HiddenField ID="HiddenToDoID" runat="server" Value='<%# Eval("ToDoId") %>' />
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
And the Code Behind:
protected void ToDoComplete_Click(Object sender, EventArgs e)
{
LinkButton ToDoComplete = sender as LinkButton;
HiddenField todo = ToDoComplete.NamingContainer.FindControl("HiddenToDoID") as HiddenField;
int TodDoId = Convert.ToInt32(todo.Value);
DashboardController.UpdateToDo(TodDoId);
GetToDoItems(1);
ToDoUpdate.Update();
}
Is there any way to do this by pressing the button once?
What you are missing is Triggers section in UpdatePanel. As your update panel as UpdateMode ="Conditional" you need to specify triggers. If you are using normal full postback then change AsyncPostBackTrigger to PostBackTrigger.
<asp:UpdatePanel ID="ToDoUpdate" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="ToDo" runat="server">
<li style="" class="<%# Eval("ToDoPriority")%>">
<%# Eval("ToDoText")%>
<div class="agile-detail">
<asp:LinkButton ID="ToDoComplete" runat="server" CssClass="pull-right btn btn-xs btn-primary" Text="Done" OnClick="ToDoComplete_Click"></asp:LinkButton>
<i class="fa fa-clock-o"></i> <%# Eval("ToDoDate")%>
</div>
</li>
<asp:HiddenField ID="HiddenToDoID" runat="server" Value='<%# Eval("ToDoId") %>' />
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ToDo" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Form not rendering updated label after postback

I have been have problems with a postback from the button submit as after the button has finished the site think its a full refresh which gives me no chance to show any failure of login message or error,
I cant seem to pinpoint why this is happening and have looked up about the page cycle but can't put my finger on it.
Heres all my code for behind the page
protected void Page_Init(object sender, EventArgs e)
{
Session["user"] = "";
Session["domain"] = "";
Session["manager"] = "";
}
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
lblError.Text = "This was a post back.";
else
lblError.Text = "This was NOT a post back.";
}
protected void btnLogin_Click(object sender, EventArgs e)
{
//Allows the variable to be used through out the app
Session["user"] = username;
Session["domain"] = domain;
Session["manager"] = null;
if (true == authenticateUser(Session["domain"].ToString(), Session["user"].ToString(), password))
Response.Redirect(Response.ApplyAppPathModifier("Update.aspx"));
}
and front
<form id="form1" runat="server" style="Width:19%;" class="pure-form pure- form-stacked">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
<br />
<asp:TextBox ID="txtLoginID" Width="95%" Style="display:inline-block;" runat="server"></asp:TextBox>
</div>
<br/>
<asp:Label ID="lblpwd" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" Width="95%" TextMode="Password" runat="server"></asp:TextBox>
<asp:Label ID="lbldmn" runat="server" Text="Domain"></asp:Label>
<asp:DropDownList ID="ddlDomain" Width="95%" runat="server">
<asp:ListItem>hdnl.it</asp:ListItem>
<asp:ListItem>yodel.net</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblError" runat="server" ForeColor="Red" ></asp:Label>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnLogin" runat="server" Text="Login" Width="95%" OnClick="btnLogin_Click"
CssClass="button-success pure-button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="overlay"></div>
<div class="modal">
<h2>Please Wait.....</h2>
<img alt="Loading..." src="/Images/loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>

How to bind radiobuttonlist with jquery

I have added radiobuttonlist into asp updatepanel, radiobuttonlist is bound form table in codebehind with C#.But updatepanel gives error at postback.can anybody help me to bind radiobuttonlist with Jquery on page load.
<asp:UpdatePanel ID="UpdPanel_Questions" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Label ID="Lbl_QuestionTitle" runat="server" Font-Bold="False"
Font-Size="Medium" Height="45px" ></asp:Label>
</div>
<div> <p></p>
<asp:RadioButtonList ID="RadBut_Answer" runat="server" onselectedindexchanged="RadBut_Answer_SelectedIndexChanged"
CellSpacing="5" AutoPostBack="True" CellPadding="0">
</asp:RadioButtonList>
</div>
<div class="SelectedAnsMsg alpha">
<asp:Literal runat="server" EnableViewState="False" ID="Lbl_SelectedAnsMsg"></asp:Literal>
</div>
<div class="Butskipnext">
<div class="Butskip">
<asp:Button ID="But_Skip" runat="server" Text="Skip" SkinID="AltButton" />
</div>
<div class="Butnext">
<asp:Button ID="But_Next" runat="server" Text="Next" SkinID="Button"
onclick="But_Next_Click" />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadBut_Answer" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Why do you want to use jQuery to bind RadioButtonList at Page_Load? If you want to bind RadioButtonList on Page_Load using jQuery, then it is something to do in Javascript (i.e. either in .aspx page or separate Javascript file), but not code behind.
I have not used jQuery, but the following code in code-behind works well to bind table data to RadioButtonList.
For the example purpose, I have Taken DEPT(DEPTNO, DNAME) table.
Now, I hope you can understand the code since it is very easy.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
SqlCommand objCmd = new SqlCommand("SELECT DEPTNO, DNAME FROM DEPT", objConn);
objConn.Open();
RadBut_Answer.DataSource = objCmd.ExecuteReader();
RadBut_Answer.DataTextField = "DNAME";
RadBut_Answer.DataValueField = "DEPTNO";
RadBut_Answer.DataBind();
objConn.Close();
}
}

Categories

Resources