Develop Reference

ASP.NET dropdown ListItem text showing incorrectly when using multiple dropdowns

Goal: I have 3 dropdowns for 3 different people.
I would like to be able to update the database with value from dropdown that is used. I would like to be able to use more than one dropdown without having to manually refresh the page. It's on Site.Master so they appear on every page.
Problem: the value in the database updates correctly after the update, but the text in the dropdown becomes incorrect if I use more than one dropdown without refreshing the page.
It works fine if user makes a change on first dropdown, then goes to another page, then uses the second dropdown. BUT the view acts strange if I
Change Dropdown1 (e.g. from True to False).
Then change Dropdown2 (True to False).
At this point, dropdown 1 will show True again (even though it was changed to False a couple steps ago).
It's almost as if the first dropdown gets the current value from the second dropdown.
However, if I refresh the page, it shows the appropriate values (and the database has the correct value the entire time)
Probably easier with screenshots:
After changing Professor1 from True to False (OK):
After changing Professor2 from True to False (NOT OK - notice Professor 1 appears as True again, even though its correct in the DB):
What I've tried:
I've used debug breakpoints on every line in the C# I could think of
I've tried moving the code into the OnSelectedIndexChanged method
I've tried changing from .Text to .SelectedValue
I've tried using multiple OnSelectedIndexChanged methods instead of one
HTML:
<div>
<asp:Image ID="img1" runat="server" height="20" width="20"
CssClass="professoricon"/>
<sup><asp:Label ID="myLabel" runat="server" Font-Size="20px"
CssClass="oval"/></sup>
<asp:Label ID="myLabelMid" runat="server" CssClass="professorname"/>
<asp:DropdownList runat="server" id="ddlAvailability1"
AutoPostBack="true"
OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged"
CssClass="dropdowns">
<asp:ListItem ID="LT1"></asp:ListItem>
<asp:ListItem ID="RT1"></asp:ListItem>
</asp:DropdownList>
</div>
<asp:Panel ID="row2" runat="server" Visible="false">
<asp:Image ID="img2" runat="server" CssClass="professoricon"/>
<sup><asp:Label ID="L2" runat="server" Font-Size="20px"
CssClass="oval"/></sup> <asp:Label ID="M2" runat="server"
CssClass="professorname"/>
<asp:DropdownList runat="server" id="ddlAvailability2"
AutoPostBack="true"
OnSelectedIndexChanged="ddlAvailability2_OnSelectedIndexChanged"
CssClass="dropdowns">
<asp:ListItem ID="LT2"></asp:ListItem>
<asp:ListItem ID="RT2"></asp:ListItem>
</asp:DropdownList>
</asp:Panel>
C#:
PageLoad() {
myLabel.Text = professorStatsListDto.professorStatsList[0].NumberOfActiveVisits.ToString();
myLabelMid.Text = professorStatsListDto.professorStatsList[0].LastName.ToString();
LT1.Text = professorStatsListDto.professorStatsList[0].Available.ToString();
RT1.Text = (!professorStatsListDto.professorStatsList[0].Available).ToString();
if (professorStatsListDto.professorStatsList.Count>1)
{
L2.Text = professorStatsListDto.professorStatsList[1].NumberOfActiveVisits.ToString();
M2.Text = professorStatsListDto.professorStatsList[1].LastName.ToString();
LT2.Text = professorStatsListDto.professorStatsList[1].Available.ToString();
RT2.Text = (!professorStatsListDto.professorStatsList[1].Available).ToString();
row2.Visible = true;
}
}

Making asp:CheckBoxList Items Side By Side

I have a problem and i couldn't find the solution on web. I'm using asp CheckBoxList but i have too many data to list. I want to list items like in 2 column in box area. I'm sharing an image. Please check it out. So how can i do something like that?
The important thing is; this checkboxlist filling dynamically from code behind. I dont have ListItem on html page. So i cant style them. Any idea?
<asp:CheckBoxList ID="AreaCheckBoxes" runat=server>
</asp:CheckBoxList>

You can set the RepeatColumns property to 2 and the RepeatLayout property to Table.
<asp:CheckBoxList ID="AreaCheckBoxes"
RepeatColumns="2"
RepeatLayout="Table"
RepeatDirection="Vertical"
runat=server>
</asp:CheckBoxList>

What is the difference between the RadioButon and RadioButtonList?

I need to know the difference between a RadioButton and a RadioButtonList, and what are the guidelines to use when deciding which one to use?
I researched this and decided to post my findings here to help illustrate the differences I found that should help clarify my question:
What I Learned:
RadioButton
Used to display a single RadioButton at a time. Likely requires setting group attribute to associate multiple RadioButton controls into a group.
RadioButtonList
Used to Display a group of RadioButton controls, automatically providing the group attribute associating all the included RadioButton controls into a single group.
Observation
Visually, both produce the same result in the UI, provided one places at least 2 or more RadioButton controls on the page with the same value for the group attribute.
UI Sample Code follows
asp:RadioButton
<asp:RadioButton ID="b2b" text="B to B" checked="true" runat ="server" GroupName="businesstype" />
<asp:RadioButton ID="b2c" text="B to C" runat ="server" GroupName="businesstype" />
asp:RadioButtonList
<asp:RadioButtonList ID="businesstype" runat="server" >
<asp:ListItem Selected="True" Value="0">B to B</asp:ListItem>
<asp:ListItem Value="1">B to C</asp:ListItem>
</asp:RadioButtonList>
What are the guidelines for the use of each?

1. RadioButtonList
RadioButtonList is a single control with a list of RadioButtons.
This is derived from ListControl class. So this will work similar to other list controls like ListBox, DropDownList and CheckBoxList.
For giving a caption for buttons you can use the Text property. You cannot insert a text in between two buttons.
Using the “SelectedIndexChanged” event you will get the selected buttons value (“RadioButtonList1.SelectedValue”).
for e.g
private void Bind()
{
RadioButtonList1.DataSource = dsEmployees;
RadioButtonList1.DataTextField = "EmployeeName";
RadioButtonList1.DataValueField = "EmployeeID";
RadioButtonList1.DataBind();
}
If you are using HTML
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal"
onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem Text="Male" Value="1" ></asp:ListItem>
<asp:ListItem Text="Female" Value="2" ></asp:ListItem>
</asp:RadioButtonList>
2. RadioButton
RadioButton” is a single control, it is derived from “CheckBox” Class. You have to set the GroupName property to identify a group. Also the event handler for the event “CheckedChanged” will help us to do some job. Another one thing is you have to write separate handlers for each radio button.
For e.g.:
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="Gender"
AutoPostBack="true" oncheckedchanged="RadioButton1_CheckedChanged" Text="Male" />
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="Gender"
AutoPostBack="true" oncheckedchanged="RadioButton2_CheckedChanged" Text="Female" />

You can get the selected Index in RadioButtonList as it work on collection of ListItem.
You can visit here for more detail
In contrast, the RadioButtonList control is a single control that acts as a parent control for a collection of radio button list items.
It derives from a base ListControl Class, and therefore works much like the ListBox, DropDownList, and CheckBoxList Web server controls. Therefore, many of the procedures for working with the RadioButtonList control are the same as they are for the other list Web server controls.

An asp:radiobuttonlist creates a group of radiobuttons that ensures when one is selected, the others are deselected whereas asp:radiobutton is not within a group and therefore cannot be deselected by clicking other radio buttons.

how to make the dropdownlist in edit mode

<asp:DropDownList ID="ddlReportFavorite" runat="server" Height="16px"
Width="190px">
</asp:DropDownList>
I need to have the dropdownlist to be editable, that is when a user wants to type, it allows to type. Thanks.
EDIT
Is there any method using javascript or any other alternative without going for Ajax Control Toolkit. Thanks.

You can use a bootstrap select picker and add extra attributes to your asp:dropdownlist such as the following:
<asp:DropDownList ID="ddlEditStatusCode"
runat="server"
CssClass="form-control selectpicker"
data-live-search="true"
data-size="10">
</asp:DropDownList>
You also need to add bootstrap-select.css and bootstrap-select.js to your web page.
The result should be like this:

Have a look at the ajax control toolkit, in particular...
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ComboBox/ComboBox.aspx
and a decent tutorial here
http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/combobox/how-do-i-use-the-combobox-control-cs

Just have a look at jQuery Searchable DropDown Plugin
jQuery Searchable DropDown Plugin Demo

Tab Index for ListItems in RadioButtonList

Is it possible to set Tab Index for ListItems in RadioButtonList. Here is my code:
<asp:RadioButtonList ID="radGender" runat="server">
<asp:ListItem Value="M">Male</asp:ListItem>
<asp:ListItem Value="F">Female</asp:ListItem>
<asp:ListItem Value="U">Not Specified</asp:ListItem>
</asp:RadioButtonList>
Thanks,
Praveen

ASP.Net Cannot tab through all radio buttons when selected
Similar problem to yours. This should help with what you need as well as solve the problem you run into after having a radio buttom selected.
EDIT
Just to specify their solution. It seems after a choice is selected, using the arrow keys will let you move to the other choices where as tab will not. Another solution to getting around this is to have individual radio buttons and group them using the group name property.

What's wrong with?
<asp:RadioButtonList ID="radGender" runat="server">
<asp:ListItem Value="M" tabindex="1">Male</asp:ListItem>
<asp:ListItem Value="F" tabindex="2">Female</asp:ListItem>
<asp:ListItem Value="U" tabindex="3">Not Specified</asp:ListItem>
</asp:RadioButtonList>
Seem to work at least in IE9 and FF (not sure with others).