Dynamically Loaded Existing Panel cause issue of PostBack - asp.net

At first See the Code below.
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="BLL.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlCustom" runat="server"></asp:Panel>
<asp:Panel ID="pnlDiv1" runat="server">
<asp:DropDownList ID="ddl_Status" runat="server"></asp:DropDownList>
</asp:Panel>
<asp:Panel ID="pnlDiv2" runat="server">
<asp:DropDownList ID="ddlImg1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlImg1_SelectedIndexChanged"></asp:DropDownList>
</asp:Panel>
<asp:Panel ID="pnlDiv3" runat="server">
<asp:DropDownList ID="ddlImg2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlImg2_SelectedIndexChanged"></asp:DropDownList>
</asp:Panel>
</div>
</form>
</body>
</html>
I want to hide and show the panel in different order as per the requirement. i don't want to change the content of the panel. pnlDiv1,pnlDiv2,pnlDiv3 will bind in pnlCustom.
Now, In Page_Load Event i am setting all panel style to "display:none" except "pnlCustom" and dynamically adding pnlDiv1/pnlDiv2/pnlDiv3 in "pnlCustom" and set its style to "display:inline".
In my application problem is If i change the value of "ddlImg1" the page gets postback and all the value reset. this is same for the "ddlImg2".
Note:Values are bind in dropdown in Page_Load if its not postback.. so, anyone can explain what's an issue?

This could be a possible issue with the ViewState.
The following link might be helpful to you:
ASP.NET DropDownList not retaining selected item on postback

Related

change text on button and enabled status after click button(asp.net)

I use ASP.NET to develop.
Here, I want the thing is that once I click button A (the text on the button A is "Start"), then the text on the button A will change to "processing...please wait" and button A will become not clickable. Then execute the stored procedure(the duration of stored procedure is 1 minute). After the stored procedure finishes, the text on the button A will change to "Start" and button A will become clickable.
I tried that before stored procedure, I added these codes:
ButtonA.Text = "processing...please wait";
ButtonA.Enabled = false;
And after stored procedure, I added these codes:
ButtonA.Text = "Start";
ButtonA.Enabled = true;
But the outcome is the text on the button A is not changed and button A is still clickable during the stored procedure is executing.
Can anyone tell me how to achieve what I want? Thanks.
Then I edit my aspx file to be below:
<asp:ScriptManager ID="MainScriptManager" runat="server"/>
<asp:UpdatePanel ID="pnlHelloWorld" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button ID="ButtonA" runat="server" OnClick="ButtonA_Click" Text="Start" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonA" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
But the text of button still remains the same and the button is still clickable.
You can achieve your requirement by using Ajax. Using Ajax you can do partial page refresh.
Put ButtonA inside the UpdatePanel, and it should work as expected.
You can refer below sample code for reference.
webpage.aspx code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Hello, world!</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="MainScriptManager" runat="server" />
<asp:UpdatePanel ID="pnlHelloWorld" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="ButtonA" OnClick="btnHelloWorld_Click" Text="Update label!" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
c# code
protected void btnHelloWorld_Click(object sender, EventArgs e)
{
//Before Procedure call
ButtonA.Text = "processing...please wait";
ButtonA.Enabled = false;
//Call Procedure
procedure ....
//After Prodedure call
ButtonA.Text = "Start";
ButtonA.Enabled = true;
}
Hope that helps, thanks.

Viewstate and TabPanel

I have been working on a asp.net project last ~6 months where that was one .aspx that was being loaded with different controls. This page and those controls had their own UpdatePanels, etc etc. In other words I had to deal with a bag of viewstate issues. It seems like whenever I think I get viewstate and its details completely I get something like what I am about to describe below. This might have to do with control state, which is from what I understand "necessary" viewstate you cannot turn off. Or this might have to do something with AJAX.
Anyway take a look at this example:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" EnableViewState="false" Inherits="ControlDisabledViewStateTesting._Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajx" %>
<!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></title>
<script language="C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (treeView.SelectedNode != null)
ContentPanel.Controls.Add(ContentPanel.TemplateControl.LoadControl("MyUserControl.ascx"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajx:ToolkitScriptManager runat="server" />
<asp:TreeView ID="treeView" runat="server">
<Nodes>
<asp:TreeNode Text="First Node" Value="111"/>
<asp:TreeNode Text="Second Node" Value="222"/>
</Nodes>
</asp:TreeView>
<Asp:Panel ID="ContentPanel" runat="server" />
</div>
</form>
</body>
</html>
And here is the user control mark up:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="ControlDisabledViewStateTesting.MyUserControl" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajx" %>
<ajx:TabContainer ID="tabContainer" ActiveTabIndex="0" runat="server">
<ajx:TabPanel ID="tab" HeaderText="Tab1" runat="server"/>
<ajx:TabPanel ID="tab2" HeaderText="Tab2" runat="server" />
</ajx:TabContainer>
As you have noticed, Viewstate is turned off on the page level, so none of the controls should be using viewstate.
Click on "First Node".
User control gets loaded with two tabs.
Select the second tab.
Click on "Second Node"
User controls get loaded again, with the "SECOND TAB" selected already.
Is this an issue with viewstate/controlstate or does it have something to do with AJAX part of the TabPanel?
I really appreciate if someone can shed some lights as to what is happening here and how I can turn off this functionality.
Thanks,
Mike
The value for the active tab isn't being stored in view state. It appears to have to do with the ASP.NET AJAX framework and the value is being loaded from the post data.
To change the behavior you could derive from the TabContainer and override the LoadClientState method so that the ActiveTabIndex isn't changed.
You can view the source code for the TabContainer on codeplex:
http://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/view/1014bf767f65#Server%2fAjaxControlToolkit%2fTabs%2fTabContainer.cs

asp:Label with nested control disappears on setting CssClass

Is it improper to nest another control within asp:Label?
When I have another control (e.g., a button) inside my asp:Label, and I try to change CssClass on the label during an event handler, the entire label seems to disappear. I'll be grateful if someone can help me find what I might be doing wrong.
Bad1.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Bad1.aspx.cs" Inherits="Bad1" %>
<!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>Badness?</title>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBox1" runat="server" Text="check and uncheck me" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" />
<br />
<br />
<asp:Label ID="Label1" runat="server" > See me now? <asp:Button runat="server" /> </asp:Label>
</form>
</body>
</html>
Bad1.aspx.cs:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Bad1 : System.Web.UI.Page
{
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
var lab = Page.FindControl("Label1") as Label;
lab.CssClass = "foo";
}
}
Symptom: Page displays correctly at first, and after first click on "check and uncheck me". But when I click on the checkbox a second time, the label ("See me now") disappears, never to come back. If I remove the button from within the label, there's no problem. So, is the nesting what's incorrect?
I would look into using a Panel instead of a Label.
<asp:Panel ID="Panel1" runat="server" CssClass="someStyle">
<asp:Button ID="Button1" runat="server" Text="Hi"></asp:Button>
</asp:Panel>
If you're looking to style the button, then you should apply your CssClass to the button directly. Use a Panel if you're trying to apply a style to that region/block.

ASP.net, Ajax, JavaScript help

I need help in how to set webform control proprieties in asp.net and ajax control using javascript.
I have asp page that has checkBox, TextBox, MaskedEditExtender, and RegularExpressionValidator.
I set the mask for MaskedEditExtender as Mask="(999)999-9999" and I set the ValidationExpression for RegularExpressionValidator as ValidationExpression="\d{10}".
I want to change these two properties when user checked the international checkbox to: Mask="999999999999" and as ValidationExpression="\d{12}"
Using JavaScript without interrupting with server side and when the user unchecked they get previous value so the interaction should be only in the client side.
Please help me with this and here is my code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function pageLoad() {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code"
AutoPostBack="false"/>
<asp:TextBox ID="txtHomePhone" runat="server"></asp:TextBox>
<cc1:MaskedEditExtender ID="txtHomePhone_MaskedEditExtender" runat="server"
AutoComplete="False" CultureAMPMPlaceholder=""
CultureCurrencySymbolPlaceholder="" CultureDateFormat=""
CultureDatePlaceholder="" CultureDecimalPlaceholder=""
CultureThousandsPlaceholder="" CultureTimePlaceholder="" Enabled="True"
Mask="(999)999-9999" TargetControlID="txtHomePhone">
</cc1:MaskedEditExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="RegularExpressionValidator" ControlToValidate="txtHomePhone"
ValidationExpression="\d{10}"></asp:RegularExpressionValidator>
</div>
</form>
</body>
</html>
Instead of meddling with the maskEditor/validator controls' client-side behaviour, are you OK with having 2 sets of textbox+maskExtender+validator?
Set 1 = texbox_HomePhone + maskEditExtender_HomePhone + regexValidator_HomePhone
Set 2 = texbox_IntHomePhone + maskEditExtender_IntHomePhone + regexValidator_IntHomePhone
Using the checkbox to toggle (via javascript) the display/hidding of either set.

Control scope within Repeater, with and without UpdatePanel

Why does the following give me a compilation error for line B (Label2, outside UpdatePanel) but not for line A (Label1, inside UpdatePanel)? I would have expected both lines to give an error since both controls are within the same Repeater and should therefore not be directly accessible outside the repeater, since there is no one unique instance.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = Label1.ClientID; // Line A - compiles fine
Label2.Text = Label2.ClientID; // Line B - "The name 'Label2' does not exist in the current context"
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server" Text="Label2" />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I'm betting if you comment out line B you'll get a run-time error on execution. Label1 is going to be a null reference.
When you create controls in the ASPX page Visual Studio tries to help you out by adding the controls to the code behind in the designer file which extends the class for the page. In this case it's adding one when it shouldn't be.
Short answer is it's a bug. You should submit it but it shouldn't be a blocking issue.
Real question is why are you creating multiple update panels in a repeater ? Put one outside of the repeater and call it good. Or if you just want to refresh some text dont use an update panel, use a call back with some client side script to set the dom element. Check out this http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
Neither of those is proper anyway. You shouldn't be trying to directly reference a control that's contained within the ItemTemplate.
If you want to modify those Labels at runtime, you should be using OnItemDataBound and FindControl. To "find" the Label in the UpdatePanel, you'll need to use UpdatePanel.ContentTemplateContainer.FindControl().

Resources