Dropdown not binding Inside Ajax Update panel - asp.net

I am using the below code to populate a dropdown on a selection of another dropdown.
But somehow, ddlSubTypes is not getting populated when a item is selected in ddlTypes
On selectedindex change event of ddlTypes, i am binding ddlSubTypes.
<tr>
<td class="style3">
<asp:ScriptManager ID="scma" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlTypes" runat="server" Width="200px" AutoPostBack="true" OnSelectedIndexChanged="ddlTypes_SelectedIndexChanged1">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td class="style3">
<asp:UpdatePanel ID="UP2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlSubTypes" runat="server" Width="200px">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
Protected Sub ddlTypes_SelectedIndexChanged1(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlTypes.SelectedIndexChanged
Try
'Populate schemes
ddlSubTypes.Items.Clear()
Dim ID As Integer = ddlTypes.SelectedValue
Dim dt As DataTable = IterateSubtypesContents(ID)
ddlSubTypes.DataTextField = dt.Columns("Type").ToString()
ddlSubTypes.DataValueField = dt.Columns("ID").ToString()
ddlSubTypes.DataSource = dt
ddlSubTypes.DataBind()
UP2.Update()
Catch ex As Exception
End Try
End Sub

you should add a trigger to the second update panel that gets triggered on the first dropdown's selectedIndexChanged event.
<asp:UpdatePanel ID="UP2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlSubTypes" runat="server" Width="200px">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Control That Triggers this Panel" EventName="Desired Event that triggers" />
</Triggers>
</asp:UpdatePanel>

Related

updatepanel asynpostbacktrigger does not throw defined event?

I have the following code.
What i want is when the ddlProvince dropdown is changed, to throw the event SelectedIndexChanged, however that method is never accessed.
<asp:UpdatePanel ID="pnlCountries" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlProvince" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<tr>
<td><asp:Literal ID="Literal37" Text="<%$Resources:glossary,country %>" runat="server"/></td>
<td>
<asp:DropDownList ID="ddlCountries" CssClass="textbox" runat="server">
</asp:DropDownList>
<br />
<cc1:cascadingdropdown ID="cddCountries" runat="server" Category="Country" Enabled="True" LoadingText="<%$Resources:Glossary,loading %>" PromptText="<%$Resources:Glossary,country_choose %>"
ServiceMethod="GetCountries" TargetControlID="ddlCountries">
</cc1:cascadingdropdown>
<asp:RequiredFieldValidator CssClass="errortext" Text="<%$Resources:Glossary,required %>" SetFocusOnError="true" ID="rfvcboScenario" runat="server" InitialValue="" ControlToValidate="ddlCountries" Display="Dynamic" />
</td>
</tr>
<tr>
<td><strong><asp:Literal ID="Literal9" Text="<%$Resources:Glossary,province %>" runat="server" /> *</strong></td>
<td>
<asp:DropDownList ID="ddlProvince" CssClass="textbox" runat="server">
</asp:DropDownList>
<asp:RequiredFieldValidator CssClass="errortext" Text="<%$Resources:Glossary,required %>" SetFocusOnError="true" ID="RequiredFieldValidator1" runat="server" InitialValue="" ControlToValidate="ddlProvince" Display="Dynamic" />
<cc1:CascadingDropDown ID="cddProvince" runat="server" TargetControlID="ddlProvince" ParentControlID="ddlCountries"
Category="Province" LoadingText="<%$Resources:Glossary,loading %>" prompttext="<%$Resources:Glossary,province_select %>" ServiceMethod="GetProvincesForCountry" >
</cc1:CascadingDropDown>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Currently this codeline is never hit:
Protected Sub ddlProvince_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlProvince.SelectedIndexChanged
ReportError("ddlProvince_SelectedIndexChanged", "")
End Sub
update:
previously I had the Autopostback="true" attribute on the ddlProvince control, however, that caused a full postback (issue also described here: Drop Down List (in Update Panel) causing FULL PostBack!)
What am I missing?
EDIT:
You need to set AutoPostBack="true" for the dropdownlist. Change this:
<asp:DropDownList ID="ddlProvince" CssClass="textbox" runat="server">
</asp:DropDownList>
to this:
<asp:DropDownList ID="ddlProvince" CssClass="textbox" runat="server" AutoPostBack="true" >
</asp:DropDownList>
Possibly you haven't set the OnSelectedIndexChanged event in the Markup as seen above.
Three properties you should set: OnSelectedIndexChanged, AutoPostback & EnableViewState
<asp:DropDownList ID="ddlProvince" runat="server"
AutoPostBack="true" EnableViewState="true"
OnSelectedIndexChanged="ddlProvince_SelectedIndexChanged">
</asp:DropDownList>
Incase you are binding your dropdownlist in page_Load event, place it inside !IsPostback condition check:
protected void page_Load ( object sender, EventArgs e )
{
if(!IsPostBack)
{
//DropDownList data bind and all...
}
}

Add asp controls dynamically using AJAX

I want to make the +Add more original use LinkButton!
I have this row on my table I am using:
<asp:Label ID="Label43" runat="server"
Text="P-2.5 Original use:"></asp:Label>
</td>
<td class="style1">
<div style="float:left;">
<asp:DropDownList class="text-input" ID="DDLOriginalUse" runat="server"
DataSourceID="SqlDataSource5" DataTextField="DESCRIPTION"
DataValueField="ID_PROGRAM_USE" OnSelectedIndexChanged="itemSelected" AutoPostBack="True" AppendDataBoundItems="true">
<asp:ListItem Text="-Not assigned-" Value="-1" Selected="True" />
</asp:DropDownList>
</div>
<asp:UpdatePanel runat="server" style="float:left;" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="DDLOriginalUse" eventname="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblProgramType" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource5" runat="server"
ConnectionString="<%$ ConnectionStrings:MesarchConnectionString %>"
SelectCommand="SELECT * FROM [PROGRAM_USE]"></asp:SqlDataSource>
</td>
</tr>
I want to add new rows with the same content as above so I am using an asp:PlaceHolder :
this code continues..
</tr>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LinkButtonAddOriginal" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolderAddNewOriginalUse" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<tr>
<td>
</td>
<td class="style1">
<asp:UpdatePanel runat="server" id="UpdatePanel3" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LinkButtonAddOriginal" eventname="Click" />
</Triggers>
<ContentTemplate>
<b><asp:LinkButton ID="LinkButtonAddOriginal" OnClick="AddMoreOriginal" runat="server">+Add more original use</asp:LinkButton></b>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
and in my code behind I am doing this for the click(I want to add maximum 5 text boxes):
private static int countOriginalUse = 1;
private static LiteralControl htmlPresentation = new LiteralControl();
protected void AddMoreOriginal(object sender, EventArgs e)
{
StringBuilder str_for_ltr = new StringBuilder();
countOriginalUse++;
if (countOriginalUse >= 6) { LinkButtonAddOriginal.Text = "You can not add more.";return; }
str_for_ltr.Append("<tr><td> P-2.5 Original use " + countOriginalUse.ToString() + ":</td>");
str_for_ltr.Append("<td class='style1'>");
str_for_ltr.Append("</td>");
str_for_ltr.Append("</tr>");
htmlPresentation.Text += str_for_ltr.ToString();
PlaceHolderAddNewOriginalUse.Controls.Add(htmlPresentation);
/*DropDownList ddl1 = new DropDownList();
ddl1.ID="Dropdown1";
ddl1.CssClass = "Mycss";
ddl1.Items.Add("test");
PlaceHolderAddNewOriginalUse.Controls.Add(ddl1);
PlaceHolderAddNewOriginalUse.Controls.Add(new LiteralControl("<br/>"));*/
}
So the problems I face here are that it does not adds new rows, and even the text is not where I placed my asp:PlaceHolder (is on the top).
And surely I will have more problems when I will have to add this DropDownList with also a UpdatePanel for it(as shown on my first code).
Am I doing it totally wrong, do I have to follow some other way to do it?
I am confused...
I found a way to do it myself.
I made some new rows with DropDownLists in them and their personal UpdateControl but i had their style = "display:none".
then I have my link button like this:
<tr>
<td>
</td>
<td class="style1">
<b><a id="linkAddOriginal" onclick="javascript:addOriginalUse()">+Add more original use</a></b>
</td>
</tr>
and I also made this simple javascript function with a static variable in which I show the appropriate row each time:
<script type="text/javascript">
function addOriginalUse() {
if (typeof addOriginalUse.counter == 'undefined') {
// It has not... perform the initilization
addOriginalUse.counter = 1;
}
addOriginalUse.counter++;
if (addOriginalUse.counter >= 6) { document.getElementById("linkAddOriginal").innerHTML = "You can not add more original uses."; return; }
var ddl = document.getElementById("originalUseRow" + addOriginalUse.counter);
ddl.style.display = 'inline-block';
}
</script>
I have also some extra code showing the data depending on ItemSelection of the DropDownList, if you need it ask me!

Ajax update panel too slow in Asp.net. How to resolve?

I just update the ID passed in NavigateURL of Hyperlink during the selectedindexchanged in my RadioButtonList.
In Mozilla it takes 3.26 seconds for the ID to get updated in Hyperlink
The other browsers also takes too long.
How can i resolve this ?
I read a lot of articles and took the following measures :
Set Debug to false in web.config
Use conditional in Update mode
Only use the controls that has to be updated in the Update panel.
But still, it takes 3.26 seconds...
Protected Sub chlTypes_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chlTypes.SelectedIndexChanged
If (chlTypes.SelectedItem.Value.ToString() <> "") And (chlTypes.SelectedItem.Value.ToString() <> "0") Then
HypView.NavigateUrl = "~/Content.aspx?ID=" + chlTypes.SelectedItem.Value.ToString()
End If
End Sub
<table id="tbl1">
<tr>
<td>
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList ID="chlTypes" runat="server" AutoPostBack="true">
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="right">
<asp:UpdatePanel ID="UP2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="caregiver_view_button">
<asp:HyperLink ID="HypView" class="caregiver_view_button"
runat="server"><img src="/view_button.png" /></asp:HyperLink>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chlTypes" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>

Ajax Extension (Timer) stopped working when I retrieve value from DataTable

Currently I have an Ajax Timer which executes a function every few second. It is working perfectly fine until I tried to retrieve data from a DataTable. I have no idea why. I have tried debugging. I even placed label on the page to check.
For example the Ajax Timer:
Protected Sub Timer1_Tick(sender As Object, e As System.EventArgs) Handles Timer1.Tick
Label1.Text = DateTime.Now.ToLongTimeString()
End Sub
The datalist (the one giving the problem):
Protected Sub dlOrgProfile_ItemCreated(sender As Object, e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlOrgProfile.ItemCreated
Dim bizLayerMgmt As BlOrganizations
Dim dt As DataTable
bizLayerMgmt = New BlOrganizations()
dt = bizLayerMgmt.getOrgDetails(userId).Tables(0)
ddl = CType(e.Item.FindControl("ddlCoType"), DropDownList)
Dim value As Integer = Convert.ToInt32(dt.Rows(0)(3)) 'I have narrowed the problem to this line, if I comment this line.. everything works perfectly
ddl.SelectedValue = value
End Sub
The problem lies in the dt.Rows(0)(3). I have no idea why. I need to use it to retrieve some data from the database.
Just in case if its the front-end side.. here's the markup for the site.
<div class="content">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
<asp:DataList ID="dlOrgProfile" runat="server" DataSourceID="odsOrgDetails"
EnableTheming="True" RepeatLayout="Flow" ShowFooter="False" ShowHeader="False">
<ItemTemplate>
<h3>
<asp:TextBox ID="txBxCoName" runat="server" Text='<%# Eval("OrgName") %>'></asp:TextBox>
<div class="ddlSelect">
<asp:DropDownList ID="ddlCoType" runat="server" DataSource='<%# listOrgType() %>' DataTextField="OrganizationType" DataValueField="OrgTypeID" >
</asp:DropDownList>
</div>
<h3>
</h3>
<a id="linkCoImg" href="upload_co_logo.aspx">
<asp:Image ID="CoImg" runat="server" ImageUrl="~/logo/org/default.png" />
<span>Change</span> </a>
<br />
<div id="description">
<textarea id="taCoDesc" rows="2" cols="1"><%# Eval("Description") %></textarea>
</div>
<br />
<asp:Label ID="lblContacts" runat="server" Text="Contacts:"></asp:Label>
<br />
<div id="contacts">
<asp:TextBox ID="tbContactOffice" runat="server" CssClass="tbContacts"></asp:TextBox>
<asp:TextBox ID="tbContactFax" runat="server" CssClass="tbContacts"></asp:TextBox>
<asp:TextBox ID="tbContactMail" runat="server" CssClass="tbContacts2"></asp:TextBox>
</div>
<br />
<asp:Button ID="btnSave" runat="server" CommandArgument='<%# Eval("OrgID") %>'
CommandName="save" Text="Save" />
</h3>
</ItemTemplate>
</asp:DataList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Okay I have resolved my own problem.. Still don't really get it why but this is what I did.. Instead of using ItemCreated, I used ItemDataBound.
Protected Sub dlOrgProfile_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlOrgProfile.ItemDataBound
Dim bizLayerMgmt As BlOrganizations
Dim dt As DataTable
bizLayerMgmt = New BlOrganizations()
dt = bizLayerMgmt.getOrgDetails(userId).Tables(0)
ddl = CType(e.Item.FindControl("ddlCoType"), DropDownList)
Dim value As Integer = Convert.ToInt32(dt.Rows(0)(3))
ddl.SelectedValue = value
End Sub

Communicate between UpdatePanels ASP.Net

I have placed a treeView in One Update Panel and Each View in one update Panel
something like this
<UpdatePanel id="UP1">
<ContentTemplate>
<TreeView/>
</ContentTemplate>
</UpdatePanel>
<MultiView>
<UpdatePanel id="UP2">
<View1/>
</UpdatePanel>
Now I want to know how I can make sure When I click any node of TreeView respective Views should get displayed
Another way of approaching it would be to call UP2.Update() from the codebehind if you have code for the click event of the Treeview. Remember, UP2 needs to have its RenderMode set to Conditional for this to work. Hope it helps
Add an AsyncPostBackTrigger to the second updatePanel, so it gets updated when the TreeView Click event is fired.
<Asp:UpdatePanel id="UP2">
<View1/>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="Click" />
</Triggers>
</Asp:UpdatePanel>
OK, Here Is a working Example.
The Markup:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table style="width: 100%;">
<tr>
<td>
<asp:UpdatePanel ID="upTreeView" runat="server">
<ContentTemplate>
<asp:TreeView ID="TreeView1" runat="server"
onselectednodechanged="TreeView1_SelectedNodeChanged">
<Nodes>
<asp:TreeNode Text="GrandFather" Value="GrandFather">
<asp:TreeNode Text="Father" Value="Father">
<asp:TreeNode Text="Son" Value="Son"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel ID="upView" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TreeView1"
EventName="SelectedNodeChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
The code behind:
protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
Label1.Text = TreeView1.SelectedValue;
}

Resources