Super newbie question here. I'm trying to teach myself Web Forms, so I'm experimenting with the runat="server" attribute. So here's my code:
<p>
Number of items:
<input type="checkbox" name="custom_name_qty" value="25" runat="server" />25
<input type="checkbox" name="custom_name_qty" value="50" runat="server" />50
<input type="checkbox" name="custom_name_qty" value="75" runat="server" />75
<input type="checkbox" name="custom_name_qty" value="100" runat="server" />100
<input type="checkbox" name="custom_name_qty" value="Other" runat="server" />Other
</p>
And here's what gets generated:
<p>
Number of items:
<input name="ctl01" type="checkbox" value="25" />25
<input name="ctl02" type="checkbox" value="50" />50
<input name="ctl03" type="checkbox" value="75" />75
<input name="ctl04" type="checkbox" value="100" />100
<input name="ctl05" type="checkbox" value="Other" />Other
So, it took my group of checkboxes that had the same name, and gave them separate names. Why is this? Even when I give them separate names (add an integer to the end of each one), they still get renamed.
What am I doing wrong here? How can I get the checkboxes to output the same name? How can I even get the checkboxes to keep the names that I give them? I'd rather work with a name I give than "ctl01".
You are not doing anything wrong, that's the default behaviour of asp.net. That is otherwise achieved with <asp:CheckListBox /> control: CheckListBox
<asp:CheckBoxList id="checkboxlist1"
AutoPostBack="True"
CellPadding="5"
CellSpacing="5"
RepeatColumns="2"
RepeatDirection="Vertical"
RepeatLayout="Flow"
TextAlign="Right"
OnSelectedIndexChanged="Check_Clicked"
runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
<asp:ListItem>Item 5</asp:ListItem>
<asp:ListItem>Item 6</asp:ListItem>
</asp:CheckBoxList>
That shows how to add items manually. You can also populate the check list from database
System.Data.DataTable dtOptions = GetValuesFromDataBase();
checkboxlist1.DataSource = dtOptions;
checkboxlist1.DataBind();
Update
In Asp.Net 4 and above, you are given more control on how control ID are generated (e.g. AutoID, Static, Predictable, Inherit)
Related
I'm new to KnockOut and I just wanted to bind selected radio button value to td. For my knowledge I didn't do any mistake but my following code doesn't work anymore. Please help me to solve this minor mistake.
Other code parts are working fine in the same page, So nothing wrong other than this code part.
<td data-bind="text: Sex"></td>
<td>
<asp:RadioButton ID="RadioButtonMale" value="Male" GroupName="RadioGroup1" data-bind="checked: Sex" runat="server" Text="Male"/>
<asp:RadioButton ID="RadioButtonFemale" value="Female" GroupName="RadioGroup1" data-bind="checked: Sex" runat="server" Text="Female"/>
</td>
<script type="text/javascript">
var ViewModel = {
Sex : ko.observable("Male"),
};
ko.applyBindings(ViewModel);
</script>
The html that asp .net is generating is incorrect. It needs to have data-bind="checked: Sex" on the input instead of the span. Instead of using <asp:RadioButton do the following:
<input type="radio" ID="RadioButtonMale" value="Male" Name="RadioGroup1" data-bind="checked: Sex" runat="server"><label for="RadioButtonMale">Male</label>
<input type="radio" ID="RadioButtonFemale" value="Female" Name="RadioGroup1" data-bind="checked: Sex" runat="server" Text="Male"><label for="RadioButtonFemale">Female</label>
I have 2 inputs:
<label for="timeStart">Start Time:</label>
<input id="timeStart" value="10:00" type="text" runat="server" clientidmode="static" />
<label for="timeEnd">End Time:</label>
<input id="timeEnd" value="16:00" type="text" runat="server" clientidmode="static" />
and comparer validator inline with submit button
<input class="btn" id="save" value="CREATE Object" type="submit" runat="server"
ValidationGroup="save"/>
<asp:CompareValidator id="CompareTimes"
runat="server"
ControlToCompare="timeStart"
ControlToValidate="timeEnd"
ForeColor="Red" Display="Dynamic"
ErrorMessage="The End Time must be later than the Start Time."
Type="Date"
Operator="GreaterThan"
ValidationGroup="save"/>
in all case it gave me error message, what I do wrong?
Your inputs are client side controls. If you would like to use <asp:CompareValidator.../> you have to use server side label controls such: <asp:Lable runat="server".../>.
If you would like to use these (client side) input labels you have to compare them by JavaScript on the client side.
I'm confused with the alignment setting of the radio button list in asp.net, it shows in visual basic like this.
But if i compile it, it shows in my browser like this.
My code for this radio button list.
<td align="right" colspan="2">
<asp:RadioButtonList TextAlign="left" ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Fixed Cost" Selected="true" Value="1"></asp:ListItem>
<asp:ListItem Text="Per Guest Charge" Value="2"></asp:ListItem>
<asp:ListItem Text="Percentage" Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
How come this happened? I want to get the view like in visual basic, please help.
--- Update ---
This is the result if i change the alignment into "right".
Here's the HTML.
<tr>
<td align="right" colspan="2">
<table id="ctl00_MainContent_RadioButtonList1" border="0">
<tr>
<td><input id="ctl00_MainContent_RadioButtonList1_0" type="radio" name="ctl00$MainContent$RadioButtonList1" value="1" checked="checked" /><label for="ctl00_MainContent_RadioButtonList1_0">Fixed Cost</label></td>
</tr><tr>
<td><input id="ctl00_MainContent_RadioButtonList1_1" type="radio" name="ctl00$MainContent$RadioButtonList1" value="2" /><label for="ctl00_MainContent_RadioButtonList1_1">Per Guest Charge</label></td>
</tr><tr>
<td><input id="ctl00_MainContent_RadioButtonList1_2" type="radio" name="ctl00$MainContent$RadioButtonList1" value="3" /><label for="ctl00_MainContent_RadioButtonList1_2">Percentage</label></td>
</tr>
Have you tried setting <asp:RadioButtonList TextAlign="right" - you have TextAlign="left"?
I think your result HTML (being <table> in your addition above) is not guaranteed - ASP.NET may emit <span> in other cases/browsers.
Your best option seems to be assigning a CssClass <asp:RadioButtonList ... CssClass="yourClass"> in combination with some jQuery or direct styling of the possible elements.
See this broader discussion and also the accepted answer in this thread.
How would I express the following in ASP.Net, rather than HTML?
<input type="image" class="no-border" src="img/forms/submit_btn.png" alt="submit" name="submit" />
<asp:ImageButton runat="server" ImageUrl="img/forms/submit_btn.png" CssClass="no-border" ToolTip="Submit" name="Submit" Id="SubmitImageButton" />
I have a CheckListBox and specify the ToolTip on the items. When rendered, it shows a span around the checkbox (and label) and it's the span that has he title attribute on it, not the checkbox (input type=checkbox).
Does anyone know how to set the title attribute on the input element instead of the surrounding span?
In order to be 508 compliant, I need to have the title attribute on the input element, not on the span.
Edit: Note that I would prefer to do all the necessary changes in C# on the server side. I would prefer not to have to do it in javascript/jquery.
I should have tested before I posted. The quickest way is to use old fashioned html controls with the attribute runat="server". You can then reference your individual checkboxes by their IDs. For example:
<asp:Panel ID="BrowserCheckBoxList" runat="server">
<ul>
<li><input id="CheckBoxList1_0" type="checkbox" name="" value="Chrome" title="Chrome" runat="server" /> <label for="CheckBoxList1_0">Chrome</label></li>
<li><input id="CheckBoxList1_1" type="checkbox" name="" value="FireFox" title="FireFox" runat="server" /> <label for="CheckBoxList1_1">FireFox</label></li>
<li><input id="CheckBoxList1_2" type="checkbox" name="" value="IE" title="IE" runat="server" /> <label for="CheckBoxList1_2">IE</label></li>
<li><input id="CheckBoxList1_3" type="checkbox" name="" value="Opera" title="Opera" runat="server" /><label for="CheckBoxList1_3">Opera</label></li>
<li><input id="CheckBoxList1_4" type="checkbox" name="" value="Safari" title="Safari" runat="server" /><label for="CheckBoxList1_4">Safari</label></li>
</ul>
</asp:Panel>
Been there. JavaScript wouldn't help you with 508 anyway since it doesn't change the source code.
This should fix it for you:
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
foreach(ListItem li in CheckBoxList1.Items){
li.Attributes["title"] = "my title";
}
}