How to prevent UpdatePanel from resetting values outside the panel? - c#

Here is my problem :
I select a type using ddlType
I click on btnAddChoice to add a few choices
I click on btnSubmit to save the form
But when I try to get ddlType.SelectedValue in btnSubmit_Click(), it's always back to "Select a type".
If I don't do step #2 then it works fine.
From what I understand, the problem is related the ajax call (postback) and could be solved by saving the SelectedValue in the Session or ViewState.
But I have many many other controls (such as ddlType) on this page so it does not seem like an elegant solution. I was hoping for the framework to keep the selected values in the ViewState automatically ... Any idea ? After all, is it not the goal of UpdatePanel to update just the panel ?
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:DropDownList ID="ddlType" runat="server">
<asp:ListItem Text="Select a type" Value=""></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
<asp:ListItem Text="Three" Value="3"></asp:ListItem>
</asp:DropDownList>
<div>
<strong>Choices</strong>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddChoice" EventName="Click" />
</Triggers>
<ContentTemplate>
<ul class="list-unstyled">
<asp:PlaceHolder runat="server" ID="phChoices"></asp:PlaceHolder>
</ul>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnAddChoice" runat="server" Text="Add Choice" CausesValidation="false"
OnClick="btnAddChoice_Click" />
</div>
<asp:Button ID="btnSubmit" runat="server" Text="Add question"
OnClick="btnSubmit_Click" />
UPDATE
Part of the problem was caused by :
$('#<%= MainPanel.FindControl("btnAddChoice").ClientID %>').click(function () {
var ddlType = $('#<%= MainPanel.FindControl("ddlType").ClientID %>');
ddlType.attr('disabled', 'disabled');
});
Please see this question for details.
Regarding other controls also empty, the reason is that "dynamically created controls have to be created each and every post-back"

Try adding something like this to your ScriptManager
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
Then all the code which you want to get refreshed will come under Update Panel
<asp:Updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
...All your HTML content here
</ContentTemplate>
</asp:Updatepanel>
Hope that helps
More information on EnablePartialRendering
UPDATE
Also if your dropdownlist value is not getting saved because of Updatepanel
try Request.Form and check
Request.Form.Get("dropdownlistID").ToString());

Related

`SelectedIndexChanged` it is not firing

I have a DropDownList and I have a <DIV> element, When I change the value of dropdown my div is not going to show up I have the following ascx code
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
<asp:ListItem Value="Zgjidh Kompaninë">-- Zgjidh Kompaninë--</asp:ListItem>
<asp:ListItem Value="Meridian Corporation">Meridian Corporation</asp:ListItem>
<asp:ListItem Value="Meridian Express">Meridian Express</asp:ListItem>
<asp:ListItem Value="Buka">Buka</asp:ListItem>
</asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="chart_div"></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
If I place this <div id="chart_div"></div> outside of UpdatePanel it works or If I just delete the <Triggers> tag it works but it refreshes the page both times. So Why My Div Is Not Showing UP I need hep please
I am working on a sharepoint WebPart!

UpdatePanel not refreshing on my radiobuttonlist

I have some radio buttons like this:
<li class="list-group-item">
<p>YOUR AGE IS AN IMPORTANT FACTOR IN YOUR ABILITY TO TAKE ON INVESTMENT RISK. YOUR AGE IS:</p>
<asp:RadioButtonList ID="radioBtnFirst" CssClass="radioBtnAge" runat="server" RepeatDirection="Horizontal"
TextAlign="Right" AutoPostBack="True" OnSelectedIndexChanged="radioBtnFirst_SelectedIndexChanged">
<asp:ListItem Value="1">60 and over</asp:ListItem>
<asp:ListItem Value="2">50 - 59</asp:ListItem>
<asp:ListItem Value="3">40 - 49</asp:ListItem>
<asp:ListItem Value="4">30 - 39</asp:ListItem>
<asp:ListItem Value="5">Under 30</asp:ListItem>
</asp:RadioButtonList>
</li>
Now somewhere donw I have a textbox where I want to get the value of the selected radiobutton. This is the code that is doing that:
protected void radioBtnFirst_SelectedIndexChanged(object sender, EventArgs e)
{
totalScore.Text = radioBtnFirst.SelectedValue;
}
I wanted to add UpdatePanel so it won't refresh the whole page but it's not working, when I press first one of the radio buttons it doesn't happen anything, but when I press the second time, it refreshes again the whole page.
This is the code that I used for UpdatePanel:
<h3>Total Score:</h3>
<asp:UpdatePanel ID="upScore" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox runat="server" ID="totalScore" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="radioBtnFirst" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
Now it's ok, it's working. I figured out that the problem was behind the code in Page_Load method.

Update panel not working in two asp panel

In my ascx page I have two panel,I trying to change these panels inside an update panel.but the page load is going on each click on radio button.here is my code
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" >
<asp:RadioButtonList runat="server" ID="radioListAnswers" RepeatDirection="Horizontal" AutoPostBack="true" ClientIDMode="Static" onselectedindexchanged="radioListAnswers_SelectedIndexChanged">
</asp:RadioButtonList>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="radioListAnswers" EventName="SelectedIndexChanged"/>
</Triggers>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Visible="false">
<div> Thanks</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
here is my code behind
void radioListAnswers_SelectedIndexChanged(object sender, EventArgs e)
{
panel2.Visible=false;
panel1.Visible=true;
}
on click on each radio button the page is reloading.How can we over come this.
Thanks in advance for help.
i hope this will help. Pls check this link
https://msdn.microsoft.com/en-us/library/bb398867(v=vs.140).aspx

Checkbox does not get checked/unchecked when used as control for CollapsiblePanelExtender

Has anyone else tried to use checkbox as control to collapse/expand the AJAX CollapsiblePanelExtender?
The panel collapses/expands fine when I am clicking the checkbox. But the checkbox itself won't get checked.
Did that happen to you too?
I know there's a work around this, but I can't rest until I understand why.
Here's the code just in case someone wants to see:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="standard">
<asp:UpdatePanel ID="UpdatePanelBespokeRates" runat="server">
<ContentTemplate>
<asp:CheckBox ID="checkbespoke" runat="server" AutoPostBack="False" Checked="false" Text="Click and unclick this checkbox" />
</p>
<asp:UpdatePanel ID="UpdatePanelBespoke" runat="server">
<ContentTemplate>
<asp:CollapsiblePanelExtender ID="CollapsibleExtender2" runat="server"
TargetControlID="PnlBespokeRates" CollapseControlID="checkbespoke"
CollapsedSize="1" ExpandControlID="checkbespoke" SuppressPostBack="True"
Enabled="True" Collapsed="True"></asp:CollapsiblePanelExtender>
<asp:Panel ID="PnlBespokeRates" runat="server" Visible="True" Height="300px" Width="200px" BackColor="White">
<p>Another Hello World text</p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="checkbespoke" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<p>
</div>
in the Code behind it is:
protected void Page_Load(object sender, EventArgs e)
{
CollapsibleExtender2.ClientState = "true";
CollapsibleExtender2.Collapsed = true;
}
Try removing Checked="false" from the asp:CheckBox declaration. I suspect that the postback trigger may be reloading the checkbox and re-initialising it.
What worked was:
SuppressPostback="false" in the CollapsiblePanelExtender attribute
and
Autopostback="true" in the checkbox control
remove all manual C#
And then voila.

how to fix the partial rendering if i have three or more drop down lists

If I have three drop down lists:
The second one filled when select from the first one
The third one filled when i select from the second one.
I put the second and third one in update panels to make partial post back but I note that when I select from the second one the third one doesn't fill at all!!
How to fix this problem?
<asp:DropDownList ID="drp_camp" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_camp_SelectedIndexChanged" Width="300px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_fac" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_fac_SelectedIndexChanged"
Width="300px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rVal_fac" runat="server" ControlToValidate="drp_fac"
ErrorMessage="!" InitialValue="-1" ValidationGroup="G1"></asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drp_camp" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_dep" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_dep_SelectedIndexChanged"
Width="300px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rVal_dep" runat="server" ControlToValidate="drp_dep"
ErrorMessage="!" InitialValue="-1" ValidationGroup="G1"></asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drp_fac" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Try using cascaded dropdownlist. This works pretty fine which will solve your issue.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
You can put all three DropDownLists in one UpdatePanel control, there is no need to try and handle the partial postback of each control.
You could use something like this:
<asp:UpdatePanel ID="upMain" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_camp" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_camp_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="drp_fac" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_fac_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="drp_dep" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_dep_SelectedIndexChanged">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
NOTE: You will need to add your RequiredFieldValidators back in.

Categories

Resources