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.
Related
My listbox is appearing differently in Chrome, Firefox and IE.
How can I make them look alike. I want 1px border
<asp:CheckBoxList ID="cbStatus" runat="server" RepeatColumns="4">
<asp:ListItem Text="Approved" Value="A"></asp:ListItem>
<asp:ListItem Text="Declined" Value="D"></asp:ListItem>
</asp:CheckBoxList>
Checkbox is one of those elements that will always render differently by different browsers. If you want the look to be unified I suggest one of jQuery plugins that turns ordinary checkboxes into styled controls.
For example your checkboxlist renders this HTML to browser:
<table id="cbStatus" border="0">
<tr>
<td><input id="cbStatus_0" type="checkbox" name="cbStatus$0" /><label for="cbStatus_0">Approved</label></td>
<td><input id="cbStatus_1" type="checkbox" name="cbStatus$1" /><label for="cbStatus_1">Approved w/ Requirements</label></td>
<td><input id="cbStatus_2" type="checkbox" name="cbStatus$2" /><label for="cbStatus_2">Declined</label></td><td></td>
</tr>
</table>
Using PrettyCheckable plugin you can issue a single command to style it::
$('input[type="checkbox"]').prettyCheckable();
And here is what it looks like after: http://jsfiddle.net/WuFg9/
You can adjust the styles to whatever you want, borders, colors etc. etc.
For Save button, I have a popup which has 3 buttons inside., Yes, No and Cancel. Yes should call a function and update 2 tables in the database and No should update just one table and cancel should not make any changes in the page.
Used code for popup
<table id="pnlPopupMerchantUpdate" runat="server" style="display:none">
<tr>
<td>
<asp:Panel runat="server" CssClass="modalPopup">
<table width="350" height="80" class="warningPopup">
<tr>
<td>
<!-- <img src="images/warning_blue.gif" alt="Warning" /> -->
</td>
<td colspan="2" align="left" style="padding-left: 75px; padding-top: 10px;">
Do you wish to update the Location Information as well.
</td>
</tr>
<tr>
<td align="center" colspan="4">
<input id="btnYesMerchant" type="button" value="Yes" class="popupButton" causesvalidation="true" onclick="btnYessave_Click"/>
<input id="btnNoMerchant" type="button" value="No" class="popupButton" causesvalidation="true" onclick="btnNosave_Click" />
<input id="btnCancel" type="button" value="Cancel" class="popupButton"/>
</tr>
</table>
</asp:Panel>
</td>
</tr>
Here if the user clicks Yes it has to update Location info along with COmpany Info. If No is clicked, just Company Info. Cancel will not modify anything. There is a function UpdateMerchantInfo() which has to modify according to what is called, i mean yes or No.
I have used Onclick events for both Yes and NO but the problem here is, Yes should call its onclick event before getting into UpdatemerchantInfo(), the same way with NO.
In UpdateMerchantInfo(), i want to use if loop and do accordingly.
I hope i am clear!!
Thank you much!
You can use popup control extender in ajax. Will find more details Here
It has sufficient tags to suport your requirements.
You have to just create a contol(using tags) and in popup controlid set id of popup. Using this method you can define different eventhandlers.
I am currently having an issue with radio buttons and grouping. I have an asp radio button within a repeater control. I have the group name attribute set to "Customer". When the page loads, the radio buttons are not grouped. Instead of the id fields being set to the group name, it is setting the value fields of the radio buttons. I know that I have tried setting radio buttons up outside of a repeater control and have had the same issue. What is going on here?
aspx
<asp:Repeater ID="repCustomers" runat="server">
<HeaderTemplate>
<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
<tr>
<th> </th>
<th>Cust. No.</th>
<th>Cust. Name</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:RadioButton ID="radCustomer" GroupName="Customer" runat="server" ValidationGroup="Customer" ToolTip='<%#Eval("CustomerNumber") %>' />
</td>
<td><%#Eval("CustomerNumber")%></td>
<td><%#Eval("Name") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
output html
<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
<tr>
<th> </th>
<th>Cust. No.</th>
<th>Cust. Name</th>
</tr>
<tr>
<td>
<span title="111111"><input id="ctl00_PrimaryContent_repCustomers_ctl01_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl01$Customer" value="radCustomer" /></span>
</td>
<td>111111</td>
<td>Jeremy's Test</td>
</tr>
<tr>
<td>
<span title="222222"><input id="ctl00_PrimaryContent_repCustomers_ctl02_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl02$Customer" value="radCustomer" /></span>
</td>
<td>222222</td>
<td>My Test</td>
</tr>
<tr>
<td>
<span title="333333"><input id="ctl00_PrimaryContent_repCustomers_ctl03_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl03$Customer" value="radCustomer" /></span>
</td>
<td>333333</td>
<td>Jim Bob's BBQ</td>
</tr>
<tr>
<td>
<span title="444444"><input id="ctl00_PrimaryContent_repCustomers_ctl04_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl04$Customer" value="radCustomer" /></span>
</td>
<td>444444</td>
<td>New Hope Hamburgers</td>
</tr>
<tr>
<td>
<span title="555555"><input id="ctl00_PrimaryContent_repCustomers_ctl05_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl05$Customer" value="radCustomer" /></span>
</td>
<td>555555</td>
<td>Pied Piper Pizza</td>
</tr>
<tr>
<td>
<span title="666666"><input id="ctl00_PrimaryContent_repCustomers_ctl06_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl06$Customer" value="radCustomer" /></span>
</td>
<td>666666</td>
<td>Sandy's Subs</td>
</tr>
<tr>
<td>
<span title="777777"><input id="ctl00_PrimaryContent_repCustomers_ctl07_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl07$Customer" value="radCustomer" /></span>
</td>
<td>777777</td>
<td>Leonard's Lambchops</td>
</tr>
<tr>
<td>
<span title="888888"><input id="ctl00_PrimaryContent_repCustomers_ctl08_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl08$Customer" value="radCustomer" /></span>
</td>
<td>888888</td>
<td>Dave's Diamond Deli</td>
</tr>
<tr>
<td>
<span title="999999"><input id="ctl00_PrimaryContent_repCustomers_ctl09_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl09$Customer" value="radCustomer" /></span>
</td>
<td>999999</td>
<td>Ernie's Eatery</td>
</tr>
</table>
I finally got around this by creating a plain radio button and setting the value using an server-side eval.
<input type="radio" name="radCustomer" value='<%#Eval("CustomerNumber") %>' />
Now when the application performs a postback, I check for the value of Request.Form["radCustomer"]. This works flawlessly.
Unfortunately, this is a well known issue with radio buttons within a repeater. One of your only options would be to create a custom server control derived from the RadioButton class and override how it renders.
EDIT: Here's a sample of what the derived class may look like:
public class MyRadioButton : RadioButton
{
protected override void Render(HtmlTextWriter writer)
{
writer.Write("<input id=\"" + base.ClientID + "\" ");
writer.Write("type=\"radio\" ");
writer.Write("name=\"" + base.ID + "\" ");
writer.Write("value=\"" + base.ID + "\" />");
writer.Write("<label for=\"" + base.ClientID + "\">");
writer.Write(base.Text);
writer.Write("</label>");
}
}
I fixed it in javascript:
$(function () {
$("#divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
});
I had the same issues. I am using Literal as placeholder to render radio button onItemCreated event.
ASP.Net
<asp:Repeater ID="rpt" runat="server" OnItemCreated="rpt_OnItemCreated">
<ItemTemplate>
<asp:Literal ID="lit" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
C#
protected void rpt_OnItemCreated(object sender, RepeaterItemEventArgs e) {
Literal lit = (Literal)e.Item.FindControl("lit");
lit.Text = "<input type=\"radio\" name=\"myGroup\">";
}
I had to modify slightly the answer posted above by r3dsky.
Here's what worked for me:
$(document).ready(function () {
$(".divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
});
I would start by adding a value on my radiobutton Value='<%#Eval("CustomerNumber") %>'.
I made my radiobutton have autopostback set to true, and then in the event handler set all the other radio buttons to BE unselected.
Not ideal, but I need lots control over the visibility and enabled attributes of the radiobutton, and it seemed easier to let ASP.NET control that rather than resorting to client side script.
This is a well known bug with the ASP.NET Repeater using RadioButtons:
here best solution in my opinion
I did this:
$("input:radio").attr("name", $("input:radio").first().attr("name"));
Why? because if you replace the name property for any string you want, you will get an 'not found error'. So, you need to get the name of the first radiobutton, and rename all of them with that name. It works like a sharm ;)
My solution, similar to others:
<input id="ctlRadio" runat="server" type="radio" data-fixgroupbug="1" >
// Fixes this ASP.NET bug: if radio input is inside repeater you can't set its name.
// Every input gets set different name by ASP.NET.
// They don't behave as a group. You can select multiple radios.
function fixRadiogroupBug()
{
$('[type="radio"][data-fixgroupbug]').click(function () {
$(this).siblings('[type="radio"]').prop('checked', false);
});
}
$(document).ready(function () {
fixRadiogroupBug();
});
How do I access data from html in asp.net in the .cs (code behind) file?
In .aspx page I have:
<tr>
<td>Username:</td><td><input id="username" type="text" /></td>
</tr>
<tr>
<td>Password:</td><td><input id="password" type="password" /></td>
</tr>
<tr>
I know I can convert this to something like:
<tr>
<td>Username:</td><td><asp:TextBox ID="username" TextMode="SingleLine" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td><td><asp:TextBox ID="password" TextMode="Password" runat=server></asp:TextBox></td>
</tr>
This will allow me to access the controls via IDs.
However I was wondering if there was a way of accessing data without using asp.net server-side controls.
Give the inputs a name as well as an id and you will be able to get the values from Request.Form. Inputs without names are not sent back with the form post.
<input id="username" name="username" type="text" />
<input id="password" name="password" type="password" />
var username = Request.Form["username"];
var password = Request.Form["password"];
Add runat="server" to the controls, and then you can access them from the code-behind almost as if they were <asp:______ /> controls.
ASP.NET controls, are in essence HTML controls wrapped, so an asp:Button will render as a input Html control.
Some web developers prefer using Html controls due to the smaller size.
Therefore each HTML control will map to a asp server control.
As the previous answer, from Joel, add the runat="server", then the control can be referenced by the ID from the code behind.
This is your code:
<tr>
<td>Username:</td>
<td><input id="username" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="password" type="password" /></td>
</tr>
You can just add the runat="server" attribute to the Html controls:
<tr>
<td>Username:</td>
<td><input id="username" runat="server" type="text" /> <!--NOTE THE RUNAT="SERVER"--></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="password" **runat="server"** type="password" /></td>
</tr>
Now you can access the controls in asp.net.
At the moment I have something like this
<asp:Repeater ID="rptEventsList" DataSourceID="srcQuestionList" runat="server">
<ItemTemplate>
<td><span><%# Eval("orderBy").ToString()%>)</span></td>
<td><%# Eval("question").ToString()%></td>
<td><asp:RadioButton ID="RadioButton1" runat="server" /></td>
<td><input name="question<%# Eval("orderBy").ToString()%>" type="radio" id="True" value="True" class="styled" /></td>
<td><input name="question<%# Eval("orderBy").ToString()%>" type="radio" id="False" value="False" class="styled" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
And in the code behind I capture the values as Request.Form("question1") for example and this all works fine.
Now I am wondering how to add validation to this, I think I have to apply changes to a RadioButton control but I can't see how I could add my dynamic RadioButton names in there with my id from stored procedure.
Also I would like to add the validation to the top of the screen as a validation summary.
Look into Validation Server Controls.