I have a problem when using ajax in my web application. When event of dropdownlist is activated the data to be filled in the destination control is created duplicate and available in the top of the page. I am placing the code below
---HTML code---
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<table border="0" cellspacing="0" cellpadding="0" style="width: 725px">
<tr>
<th align="center" colspan="5" valign="middle" class="text" >
<asp:Label ID="lblErrorMsg" runat="server" CssClass="alertMsg" Width="500" ></asp:Label>
</th>
</tr>
<tr>
<th height="21" align="left" valign="middle" colspan="5">
Select Artefact Type</th>
</tr>
<tr>
<th height="29" align="left" valign="top" scope="row">
<asp
ropDownList ID="ArtefactType" runat="server" Width="140px"
onselectedindexchanged="ArtefactType_SelectedIndexChanged"
CssClass="formlines" AutoPostBack="true">
<asp:ListItem Value=""> -- Select --</asp:ListItem>
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4 Konfig"/>
<asp:ListItem Text="Miscellaneous" Value="Miscellaneous" />
</asp
ropDownList>
</th>
</tr>
<%-- <asp
anel runat="server" id="FilterPanel" Visible="true" >--%>
<tr>
<th width="145" height="21" align="left" valign="middle" class="text" scope="col">
Select Project</th>
<th height="21" align="left" valign="middle" class="style1" scope="col">
Select S/W Release</th>
</tr>
<tr>
<th width="145" height="21" align="left" valign="top" scope="col">
<asp
ropDownList ID="ProjectsCmb" runat="server" Width="140px"
CssClass="formlines" Height="28px"
onselectedindexchanged="ProjectsCmb_SelectedIndexChanged"
AutoPostBack="True" >
</asp
ropDownList>
</th>
<asp:UpdatePanel ID="UpdateFilterPanel" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<th width="145" height="21" align="left" valign="top" scope="col">
<asp
ropDownList ID="SoftwareReleaseCmb" runat="server" Width="140px"
CssClass="formlines"
onselectedindexchanged="SoftwareReleaseCmb_SelectedIndexChanged"
AutoPostBack="True" >
</asp
ropDownList> </th>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ProjectsCmb" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</tr>
<tr>
<th valign="middle" align="center" colspan="5">
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
DisplayAfter="100" Visible="true" DynamicLayout="true">
<ProgressTemplate>
<asp:Image ID="Image2" border="0" ImageUrl="~/Images/loading.gif"
runat="server" Height="98px" Width="127px" />
</ProgressTemplate>
</asp:UpdateProgress>
</th>
</tr>
<tr>
<th height="21" align="left" valign="middle" class="text" scope="col" colspan="2">
<asp:Button ID="SearchArtefactsBtn" runat="server" Text="Search Artefacts"
CssClass="formlines" /></th>
</tr>
<%--</asp
anel>--%>
</table>
<asp:UpdateProgress ID="udProgress" runat="server"
DisplayAfter="100" Visible="true" DynamicLayout="true">
<ProgressTemplate>
<asp:Image ID="Image1" border="0" ImageUrl="~/Images/loading.gif" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
</form>
---------------
-- --Backend code C#--------
protected void ArtefactType_SelectedIndexChanged(object sender, EventArgs e)
{
ProjectsCmb.Items.Add("1");
ProjectsCmb.Items.Add("22");
ProjectsCmb.Items.Add("333");
ProjectsCmb.Items.Add("4444");
}
protected void ProjectsCmb_SelectedIndexChanged(object sender, EventArgs e)
{
SoftwareReleaseCmb.Items.Add("1");
SoftwareReleaseCmb.Items.Add("22");
SoftwareReleaseCmb.Items.Add("333");
SoftwareReleaseCmb.Items.Add("4444");
}
----------------------------
when u run the code and selected the first combobox artifact type the project combobox is filled and when u select the item in the project the data should be filled in s/w release ,(here I have used the ajax updatepanel for partial postback of the form) but an extra combobox is created at the top of the page and the data is filled in that control.
why another control is created of the same type?
---HTML code---
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<table border="0" cellspacing="0" cellpadding="0" style="width: 725px">
<tr>
<th align="center" colspan="5" valign="middle" class="text" >
<asp:Label ID="lblErrorMsg" runat="server" CssClass="alertMsg" Width="500" ></asp:Label>
</th>
</tr>
<tr>
<th height="21" align="left" valign="middle" colspan="5">
Select Artefact Type</th>
</tr>
<tr>
<th height="29" align="left" valign="top" scope="row">
<asp

onselectedindexchanged="ArtefactType_SelectedIndexChanged"
CssClass="formlines" AutoPostBack="true">
<asp:ListItem Value=""> -- Select --</asp:ListItem>
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4 Konfig"/>
<asp:ListItem Text="Miscellaneous" Value="Miscellaneous" />
</asp

</th>
</tr>
<%-- <asp

<tr>
<th width="145" height="21" align="left" valign="middle" class="text" scope="col">
Select Project</th>
<th height="21" align="left" valign="middle" class="style1" scope="col">
Select S/W Release</th>
</tr>
<tr>
<th width="145" height="21" align="left" valign="top" scope="col">
<asp

CssClass="formlines" Height="28px"
onselectedindexchanged="ProjectsCmb_SelectedIndexChanged"
AutoPostBack="True" >
</asp

</th>
<asp:UpdatePanel ID="UpdateFilterPanel" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<th width="145" height="21" align="left" valign="top" scope="col">
<asp

CssClass="formlines"
onselectedindexchanged="SoftwareReleaseCmb_SelectedIndexChanged"
AutoPostBack="True" >
</asp

</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ProjectsCmb" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</tr>
<tr>
<th valign="middle" align="center" colspan="5">
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
DisplayAfter="100" Visible="true" DynamicLayout="true">
<ProgressTemplate>
<asp:Image ID="Image2" border="0" ImageUrl="~/Images/loading.gif"
runat="server" Height="98px" Width="127px" />
</ProgressTemplate>
</asp:UpdateProgress>
</th>
</tr>
<tr>
<th height="21" align="left" valign="middle" class="text" scope="col" colspan="2">
<asp:Button ID="SearchArtefactsBtn" runat="server" Text="Search Artefacts"
CssClass="formlines" /></th>
</tr>
<%--</asp

</table>
<asp:UpdateProgress ID="udProgress" runat="server"
DisplayAfter="100" Visible="true" DynamicLayout="true">
<ProgressTemplate>
<asp:Image ID="Image1" border="0" ImageUrl="~/Images/loading.gif" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
</form>
---------------
-- --Backend code C#--------
protected void ArtefactType_SelectedIndexChanged(object sender, EventArgs e)
{
ProjectsCmb.Items.Add("1");
ProjectsCmb.Items.Add("22");
ProjectsCmb.Items.Add("333");
ProjectsCmb.Items.Add("4444");
}
protected void ProjectsCmb_SelectedIndexChanged(object sender, EventArgs e)
{
SoftwareReleaseCmb.Items.Add("1");
SoftwareReleaseCmb.Items.Add("22");
SoftwareReleaseCmb.Items.Add("333");
SoftwareReleaseCmb.Items.Add("4444");
}
----------------------------
when u run the code and selected the first combobox artifact type the project combobox is filled and when u select the item in the project the data should be filled in s/w release ,(here I have used the ajax updatepanel for partial postback of the form) but an extra combobox is created at the top of the page and the data is filled in that control.
why another control is created of the same type?