How can I add a server event for an HTML Select control?
HTML code is like this:
<div class="ui-widget">
<select id="Select1" runat="server">
<option>Select one...</option>
<option>ActionScript</option>
<option>AppleScript</option>
<option>Asp</option>
<option>BASIC</option>
</select>
</div>
C# code is like this:
public void Select1_SomethingChange(object sender, EventArgs e)
{
//random code
}
Now I know just as is it won't work, the 2nd line of the HTML needs an attribute of some kind.. I already tried the only 2 I could find which are these two below
<select id="Select1" runat="server" onServerChanged="Select1_SomethingChange">
<select id="Select1" runat="server" onSelectedIndexChanged="Select1_SomethingChange">
The problem is that the first options event never fires, and the 2nd option just doesn't exist. Please help me out here, any help is welcome.
The 2013 answer is pretty conservative. The select element has the OnChange event, see: this MS doc
The event handler in code-behind is only called after a post event. For Asp controls, you add the AutoPostBack attribute, otherwise you just call the __doPostBack() javascript method.
Complete example:
<select id="select_clients" runat="server"
OnServerChange="SelectClients_Change" onchange="__doPostBack()">
</select>
code-behind:
using System.Web.UI.HtmlControls;//HtmlSelect
protected void SelectClients_Change(object sender, EventArgs e)
{
HtmlSelect HS = sender as HtmlSelect;
ListItem SelectedItem = HS.Items[HS.SelectedIndex];
}
NB: the options I added dynamically in Page_Load using:
select_clients.Items.Add(new ListItem("...name...", "...value...")
Why use the primitive html elements and __doPostBack call instead of the higher level Asp.Net controls? Well, sometimes this is convenient, e.g. in combination with the Bootstrap framework.
When you add runat="server" to an otherwise normal HTML element, it becomes an HtmlControl in the server-side code. Which doesn't expose a lot of events. In order to get richer server-side eventing, you need to use the ASP.NET controls. In this case that would be a DropDownList, which has the events you're looking for.
Something like this:
<div class="ui-widget">
<asp:DropDownList id="Select1" OnSelectedIndexChanged="Select1_SomethingChange" runat="server">
<asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
<asp:ListItem Value="Select one...">Select one...</asp:ListItem>
<asp:ListItem Value="ActionScript">ActionScript</asp:ListItem>
<asp:ListItem Value="AppleScript">AppleScript</asp:ListItem>
<asp:ListItem Value="Asp">Asp</asp:ListItem>
<asp:ListItem Value="BASIC">BASIC</asp:ListItem>
</asp:DropDownList>
</div>
Related
While attempting to keep my form' s fields comprising of:
<select ...>
<option></option>
</select>
from my page.aspx, after clicking on a submit button:
<input type="button" id="btnEn" value="Submit" runat="server" onserverclick="btnCalc_Click" style="margin-left:30px; border-radius:0; width:50px; font-size:14px;background-color:#c1c1c1"/>
I have amended the form's tag with onsubmit="return false"
.
However it looks like onsubmit="return false" deactivates btnEn, since it does not call anymore protected void btnCalc_Click(object sender, EventArgs e) held in page.cs.
I've tried other solutions involving UpdatePanel, which did not yield the expected outcome: call the btnCalc_Click() method while keeping in the form values displayed in the textboxes, selected dropdown list, after click.
Thus, any idea (ideally with a minimum of javascript if the latter represents the panacea to this issue) would be appreciated as I'd like to keep calling my bntCalc (written in C#).
Thanks
You should use a server control instead of the html element.
The ASP.Net Webforms DropDownList control renders a select and a set of option tags, and mantains state using ViewState.
For example, this code:
<asp:DropDownList ID="ddl" runat="server">
<asp:ListItem Text="Value 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Value 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Value 3" Value="3"></asp:ListItem>
</asp:DropDownList>
will render as:
<select name="ddl" id="ddl">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
And by default will preserve selected value. In the webform, you can access control value using this.ddl.SelectedValue.
Note: the "return false" in the javascript event handler cancels the event. Is standard html/javascript behaviour.
How to find which control event got triggered, for example, if there are 5 columns in the repeater if the 2nd checkbox or 3rd drop-down list causes the event. How to find which control event got triggered, so that the particular control related logic alone will be executed without disturbing other column controls.
The sample repeater code is attached as follows,
<asp:Repeater ID="rptTest" runat="server">
<ItemTemplate>
<td class="repeater-col">
<div>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
</div>
<div>
<asp:DropDownList ID="ddl1" runat="server" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</div>
<div>
<asp:CheckBox ID="chk1" runat="server" OnCheckedChanged="chk1_CheckedChanged" AutoPostBack="true" />
</div>
</td>
</ItemTemplate>
</asp:Repeater>
There are lot more dependent controls presented inside the repeater. Based on the selection of the controls the data to the other controls are bound and processed. The logic bounded to the repeater will be handled on the respective events for example on chk1_CheckedChanged and ddl1_SelectedIndexChanged
Kindly help on this! Thanks in advance!
You can cast the sender back to the correct Control type. Then you can access it's properties. If you want to know which items the control was in, you can use the NamingContainer
protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList drp = sender as DropDownList;
drp.BackColor = Color.Green;
RepeaterItem item = drp.NamingContainer as RepeaterItem;
int itemIndex = item.ItemIndex;
}
I'm have ASP MultiView for an application form. Inside one of the view I have few radio button as follows--
<div class="row">
<asp:CustomValidator ID="Group1Validator" GroupName="Group1" runat="server"
ValidationGroup="Group1" Display="Dynamic"></asp:CustomValidator>
<asp:RadioButton ID="Group1Yes" runat="server" GroupName="Group1" Text="Yes"/>
<asp:RadioButton ID="Group1No" runat="server" GroupName="Group1" Text="No" />
</div>
Now on the code behind I want to iterate through all the RadioButtons in that page and pull the values to be saved in the DB. I have tried the solution HERE both Loop and LINQ version, but the problem is my RadioButton controls are not directly in the page. Let me elaborate-
First, I have multi view in a page-
Multi view contains views-
And finally inside views I have the RadioButton controls-
Now my goal is the fetch the values of all the RadioButton that are selected which is laid out using the div above.
Any help and guidance will be much appreciated! Thanks!
You must put your RadioButtons as childs of RadioButtonList, then iterate in foreach loop over RadioButtonList items.
Why not use a RadioButtonList
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:RadioButtonList>
And then you can get the value in code behind
string value = RadioButtonList1.SelectedValue;
You can also add items to the RadioButtonList in code behind
RadioButtonList1.Items.Insert(0, new ListItem("Yes", "1", true));
RadioButtonList1.Items.Insert(1, new ListItem("No", "0", true));
Ok. I did something crazy. This actually renders correct but how would you get the selected value from the dropdown from the server-side using C#?
I tried getting the dropdownlist code
CheckBoxList.Items[0].Text.Substring(CheckBoxList.Items[0].Text.indexOf("<select>"));
But now that I have the dropdown, how do I get the selected value from it?
EDIT 5/15/15 5:39PM EST
I think it would if I wrote the code as to how I am creating this:
CheckBoxList chkBoxLst = new CheckBoxList();
chkBoxLst.Items.Add("Grade");
chkBoxLst.Items.Add("2");
chkBoxLst.Items.Add("3");
chkBoxLst.Items[0].Text += "<select id='Letter' runat='server'>
<option>A</option>
<option>B</option>
<option>C</option>
</select>"
I am creating this dynamically with server-side code.
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>Grade <select id="Letter" runat="server">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:CheckBoxList>
If you see what I am trying to do and know a better way, suggestions welcome.
If what you are trying to accomplish is get the selected value, change this
<select id="Letter" runat="server">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
for this
<asp:DropDownList ID="Letter" runat="server" >
<asp:ListItem Text="A" Value="A"></asp:ListItem>
<asp:ListItem Text="B" Value="B"></asp:ListItem>
<asp:ListItem Text="C" Value="C"></asp:ListItem>
</asp:DropDownList>
and to get the selected value do this
string selectedValue = Letter.SelectedValue;
You can also get the value from the Form values collection using the id for the SELECT element.
var val = Request.Form["Letter"];
I have an ASP.NET DropDownList control, with a onSelectedIndexChanged event. I also have the AutoPostBack="true" that many have said would fix the problem. However I don't think that is where the problem lays... My Html code and C# code are below for reference. The thing is the code works, but only when I press the enter key while editing the drop down box. If I simply click on an object in the drop down then the event will not fire. If I change the selected item so the "selected" text in the drop down says "ASP" and I then inspect the element using the browser I see that the Selected="True" part of the ListItem is still on the first item... It doesn't change in there. It changes with an enter key but not with a mouse click. Any help is welcome and much appreciated.
HTML:
<div class="ui-widget">
<asp:DropDownList id="Select1" OnSelectedIndexChanged="Select1_SomethingChange" runat="server" AutoPostBack="true">
<asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
<asp:ListItem Value="Select one...">Select one...</asp:ListItem>
<asp:ListItem Value="ActionScript">ActionScript</asp:ListItem>
<asp:ListItem Value="AppleScript">AppleScript</asp:ListItem>
<asp:ListItem Value="Asp">Asp</asp:ListItem>
<asp:ListItem Value="BASIC">BASIC</asp:ListItem>
</asp:DropDownList>
</div>
C#:
protected void Select1_SomethingChange(object sender, EventArgs e)
{
//something is meant to happen here
}
It may be caused by data binding your dropdownlist in Page_Load method.
Please, surround it (data binding) with
if(!IsPostBack){
// data binding.
}
Hope, it help!
AutoPostBack="true"
maybe you miss this option...
Your code works fine, there could be something in code which changes the implementation. I have debug your code and it's showing the selected item in output window. Please verify if there is some javascript code which is causing issue to call dropdown selectedIndexChanged event.
protected void Select1_SomethingChange(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
Debug.WriteLine(ddl.SelectedItem.Text);
}