How to align a control side-to-side? - c#

I'm making dynamic radio buttons by using ASP.NET. Where there a validation control that I want to align side of this radios buttons.
Code:
<asp:RadioButtonList
ID="tiposeg"
runat="server"
RepeatColumns="3">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b/asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator15"
ControlToValidate="tiposeg"
ErrorMessage='<% # foo.ErrorMessages.EmptyField %>'
runat="server"
/>
The problem is: if making by using <asp:RadioButtonList, the <asp:RequiredFieldValidator is displayed into next line, unlike if I do it by using "HTML pure", that is displayed side of control (without need to use CSS). I hope this is clear. Thanks in adavnce.
EDIT
in other words, it's possible put the <span> generated by asp:RequiredFieldValidator inside <table> generated by <asp:RadioButtonList?
EDIT 2
My current ASP.NET code;
<asp:RadioButtonList
ID="RadioButtonList1"
runat="server"
RepeatColumns="3">
<asp:ListItem>abcd</asp:ListItem>
<asp:ListItem>xyz</asp:ListItem>
</asp:RadioButtonList>
</li>
<li style="display:inline">
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="RadioButtonList1"
ErrorMessage="select atleast one radiobutton!"
/>
The form:
What I'm getting:
What I'm expecting:

Do you really want to arrange the radio buttons in a grid with multiple rows and columns? If not, delete the RepeatColumns attribute and add RepeatLayout="Flow" and RepeatDirection="Horizontal":
<asp:RadioButtonList runat="server" ID="RadioButtonList1"
RepeatLayout="Flow" RepeatDirection="Horizontal">
This will render the radio buttons without a containing <table>, so the validator will appear to the right of the last radio button.

Could you achieve what you want by putting the controls in DIVs and floating them both left?

Related

Foreach RadioButtons in ASP.NET Webforms

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));

Page scrolling on selecting value from drop down menu

i have successfully completed my web application for an organization and it works up to expectations but i noticed one problem and tried to cure it via searching on Google and asking seniors but none of these helped much.
Problem:
I have multiple drop downs lists on page, in which selecting value in one drop down triggers the loading of another drop down i.e. Country > cities situation, problem is that whenever i click any value it scrolls page to the top and i have to scroll back again then again and again which realy looks bad and unprofessional. Please help me.
Code:
<asp:UpdatePanel ID="updGridViewSMS" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Panel ID="pnlBoxesDropDowns" runat="server">
<label style="width:400px">Relevant Region</label>
<asp:DropDownList ID="ddlRegions" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged" AppendDataBoundItems="True" AutoPostBack="true" >
<asp:ListItem Value="-1" Selected="True">-Select-</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorRegions" runat="server"
ControlToValidate="ddlRegions" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Region is Required</asp:RequiredFieldValidator>
<label style="width:400px">Relevant District</label>
<asp:DropDownList ID="ddlDistricts" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlDistricts_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorDistricts" runat="server"
ControlToValidate="ddlDistricts" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">District is Required</asp:RequiredFieldValidator>
<label>Relevant P.Station</label>
<asp:DropDownList ID="ddlPoliceStations" runat="server" Width="147px" CssClass="DropDown_Width">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorPoliceStations" runat="server"
ControlToValidate="ddlPoliceStations" ErrorMessage="Police Station is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Police Station is Required</asp:RequiredFieldValidator>
<label>Priority</label>
<asp:DropDownList ID="ddlPriority" runat="server">
<asp:ListItem Text="Top" Value="1"></asp:ListItem>
<asp:ListItem Text="Normal" Value="2"></asp:ListItem>
</asp:DropDownList>
</asp:Panel>
<br />
<br />
<asp:Timer runat="server" Interval="60000" ID="RefreshSmsComplaints" OnTick="RefreshSmsComplaints_Tick" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshSmsComplaints" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
help please.
The core issue here is that you are posting back to the server on every dropdown select. This means that the web page reloads, because it is your webserver that updates the HTML versus the more modern way to do things which is to have javascript do it on the client. Here is a hacky, imperfect, but quick solution:
In the browser, inspect your html DOM. Each of your dropdown ASPX tags should have been replaced with something along the lines of
<select id="ctl000$ddlDistricts"...
You can use url hashtags to scroll to that area by appending #ctl000$ddlDistricts to the url. Since the server knows which control was posted, it can get the control's client-side ID, and write it into the following javascript (preferably at the bottom of the page).
<script type="text/javascript">
location.href='#' + <%=PostedControl.ClientID %>
</script>
Why is this imperfect? Because it will scroll your page to a point where the dropdown is at the top edge of the browser. This means that if a user selects the dropdown with it halfway down the page, once the page reloads, that will be at the top. At the very least, however, your dropdowns will then be within view.
Your original question indicated that you wanted the page to look "professional" and while this gets the job done, it is imperfect, as will all solutions be when you are dealing with classic ASPX webforms-style postbacks. Specifically, your dropdowns have something that looks like this:
OnSelectedIndexChanged=MyFunction
What this tells the ASPX form is, in essence, "when you render this dropdown control into HTML, add something into the tag like onChange="postMyFormBackToServerCausingReloadAndPageScroll. What you really want, perhaps, is to have it do onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload. That involves more knowledge than I can add to an already long answer, but here are some helpful links:
http://www.codeproject.com/Articles/691298/Creating-AJAX-enabled-web-forms (a bit old but probably a good stepping stone)
http://www.codedigest.com/Articles/jQuery/318_Doing_AJAX_with_jQuery_in_ASPNet.aspx (a slightly more modern way to do it, but you do more yourself with this method as opposed to relying on .NET)
Lastly, the fully modern way to do things that involves completely rewriting your page
http://www.codeproject.com/Articles/575397/An-Absolute-Beginners-Tutorial-on-ASP-NET-MVC-for (not sure if this is the right article for you, just google for ".NET MVC")

ASP Drop Down collapses after first click

I have an ASP Drop Down List that opens then immediately collapses on one click. I'm using a Drop Down on another page with the same CssClass, and it's working fine (first click expands the DDL and the second click collapses it). Anyone have any idea what could be happening? I would greatly appreciate any suggestions or input.
<label>
<asp:RadioButton ID="rbToAccount" runat="server" GroupName="rbTo" />
Account
<asp:DropDownList ID="ddlToAccount" runat="server" CssClass="span4 m-wrap">
</asp:DropDownList>
</label>
Try This :
<label></label>
<asp:RadioButton ID="rbToAccount" runat="server" GroupName="rbTo" />
Account
<asp:DropDownList ID="ddlToAccount" runat="server" CssClass="span4 m-wrap">
</asp:DropDownList>
is the event tied to a Jquery function??
It sounds like on dropdown list change it is causing a postback, which then is refreshing the page to it's original state. Try adding OnClientClick="return false" as an attribute to the ddl control

Expanding Ajax accordion pane if required field validation fails?

i have a required fields in the 2nd and 3rd ajax accordion panels. i have the setfocus=true on my required field validator the the appropriate panel does not automatically open.
is there a way i can get it to open the panel, where the next required field is located?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Accordion
ID="Accordion1"
runat="server">
<Panes >
<asp:AccordionPane runat="server" >
<Header>General Information </Header>
<content>
<asp:textbox id="textbox1" runat="server"/>
</content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" >
<Header>Other Information </Header>
<content>
<asp:textbox id="textbox2" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" SetFocusOnError="true" runat="server"
ErrorMessage="error on textbox 2" ControlToValidate="textbox2" ForeColor= "Red" ValidationGroup="main">*</asp:RequiredFieldValidator>
</content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" >
<Header>More Information </Header>
<content>
<asp:textbox id="textbox3" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" SetFocusOnError="true" runat="server"
ErrorMessage="error on textbox 3" ControlToValidate="textbox3" ForeColor= "Red" ValidationGroup="main">*</asp:RequiredFieldValidator>
</content>
</asp:AccordionPane>
</asp:accordion>
//the rest of the code here
//i typed this up, so please forgive if not everything is case sensitive
in this case, if i am on the first Pane, and click on the "validate" button, the required fields are in the second and third panes. the validation does fail, like it should, but the user is not taken to the textbox2 or textox3 (which are empty). how can i code it so that the focus is automatically set to the next failed textbox when the validation fails? it does work if i already have pane 2 open when i click on the "validate" button, in which case the focus is set to textbox2. but then again, if i put something in textbox2 and validate again, textbox3 fails, but the focus is not set.
hope this makes sense.
Its not strait forward to keep open two accordion panel at a time. Basically that control was not designed that way. You can use the collapsible panels instead.
But this article specifies a way to do that
http://www.c-sharpcorner.com/uploadfile/Zhenia/keeping-multiple-panes-open-in-accordion-web-control/
Also here are the link to open accordion panels using JavaScript.
http://forums.asp.net/t/1194270.aspx
jQuery Accordion - open specific section on pageload
Hope this helps

How to differentiate between data posted by HTML generated by an ASP.Net Repeater Control?

So I am using a Repeater inside a form to display a list of questions that are retrieved from a database.
Each Question allows the end user to select Yes or No and add some additional Text like this.
<ItemTemplate>
<asp:Panel runat="server">
<asp:RadioButtonList RepeatDirection="Horizontal" CssClass="YesNo" ID="YesNo" runat="server">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" />
</asp:RadioButtonList>
</asp:panel>
<asp:Panel runat="server" CssClass="MoreInfo">
<asp:TextBox ID="TextBox1" TextMode="MultiLine" Height="70px" Rows="10" Columns="25" Wrap="true" runat="server" CssClass="MoreInfoText"></asp:TextBox>
</asp:Panel>
</ItemTemplate>
The repeater is databound to a datatable in the PageLoad event.
One on the fields in the datatable is the Question's number.
So when the data is posted how can I tell which question # each answer (Yes or No and additional Text) is refering to?
If I were generating the HTML by hand instead of using a Server Control I could just make the name of the html element that will be posting data like
name=variableHoldingQuestionNumber + YesNo
name=variableHoldingQuestionNumber + AdditionalComments
But I can't seem to use a variable when setting the Name attribute inside a Repeater Item.
Is abandoning the Server Control and writing the HTML myself my only solution.
Bind the questions number to a hidden field and when the save comes back, grab that hidden field back off and take the number out of it. Then you know which question you are looking at.
Put a break point on page load and do a postback. Take a deep look at Request.Form key/value pair collection. Everything from the post will be in there, with predictable labels/indexs.

Categories