I've been trying to exclude an asp.net web control from the tabbing order.
The control that i'm using is the RadioButtonList control. I've try setting the TabIndex to either 0 or -1.
The problem that i'm running into is ... initially the control is skipped (which is good), but it seemed like the engine just shifted the control to the end of the tabbing order.
Is this an expected behavior? or is there a work around for this?
After checking the HTML source, I have some interesting findings ...
<td><input id="rbSpiffType_0" type="radio" name="rbSpiffType" value="R" checked="checked" tabindex="-1" /><label for="rbSpiffType_0">Regular Spiff</label></td><td>
I think i might be tabbing into the label ... any ideas how to fix that in ASP.NET?
The issue may be the individual radio buttons don't have a tab index of -1, try looping through the RBL's Items collection, and do:
item.Attributes.Add("tabindex", "-1");
And see if that clears it up. It might actually be item.Attributes["tabindex"], can't remember the exact syntax at the moment.
Related
I have a dropdownlist with data being bound dynamically this way at Page_Load:
<asp:DropDownList ID="ddlSet" DataTextField="Title" DataValueField="PKSetId" runat="server"
AppendDataBoundItems="true" ng-model="SetId"></asp:DropDownList>
The rendered html is :
<select id="cpContent_ddlSet" ng-model="SetId">
<option value="? undefined:undefined ?"></option>
<option value="3">Test3</option>
</select>
The option Test3 should be selected by default when the page loads, but this isn't happening. I would have set $scope.SetId=3, but don't know this value before hand.
I see similar questions here but the dropdownlists are data bound the angular way, where you can easily set the selected item from $scope.
How to tackle this.
Either you build a server side ASP application or you build a client side Angular application, but don't mix the 2 technologies.
Let Angular do the whole frontend logic and rendering and the ASP will just provide the REST services.
See Angulars Select for an example how to preselect a dropdown value.
You cannot do this in this way.
I suggest to add option at first place with such as:
<option value="" disabled ng-selected> Make your choice:
From a UI prospective, is it better to have a set of RadioButtons with the added functionality of being able to uncheck, or have a set of exclusive CheckBoxes, meaning only one can be checked at a time?
Update:
I did not expect such negative responses to this. Maybe it would help if I gave an example that is closer to how it's being used.
I have a GridView full of databound stuff. The user has the option of choosing one of the rows as "primary", but it's not required. new example:
$(":radio").click(function() {
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
$(":checkbox").click(function() {
$(":checkbox").not(this).prop("checked", false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Choose a primary city and state (if applicable).<br />
<table><tr><td>
<table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr></table></td><td> </td><td><table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="checkbox" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr>
</table></td><tr>
</table>
Should I include an extra control for unchecking the "primary", or just extend the functionality of the CheckBox or RadioButton ?
If you think extra RadioButton, where would that go, in the header?
BTW, it looks like JavaScript is needed to make RadioButtons work in a GridView anyway because of ASP.Net munging the GroupName.
Update 2:
Also, see ASP.NET AJAX extender MutuallyExclusiveCheckBox
Definitely use radio buttons, as they are meant for this purpose. Why confuse the user with checkboxes and further trouble yourself by writing code to maintain exclusive behaviour?
Though I don't agree with changing the expected functionality of radio and checkbox controls, I have had cases where I needed to.
If you do this with Javascript, it's going to fail spectacularly if your user has JS disabled.
The appearance CSS attribute is your friend.
If the user can pick only one choice out of a set, use radiobuttons. If the user can pick any number of choices, use checkboxes. Note that the definition of "only one choice" can include a radiobutton that says "none".
That's been the standard on pretty much every platform since GUIs were invented. Deviating from that practice will only serve to confuse your users.
Like other people have said, you shouldn't change the expected behaviour of native form elements. I would use a group of radio buttons, and include a button for 'clear selection'. That makes it explicit that the selection is clearable, and provides an obvious way of doing it.
Another way to do it would be to 'invent' a new type of control - probably based on hidden radio buttons, perhaps something that obviously looked like a group of 'toggles'. This is a very visual solution though, and would rely on javascript, so it's probably not the most reliable choice.
Here's an example of both solutions:
http://www.spookandpuff.com/examples/clearableOptions.html
Both solutions are currently javascript reliant - you could easily give the first option a JS-free fallback by having the clear button give the form to the server, and respond with a cleared radio button set.
Here's an example of a regular standard HTML input for my radiobuttonlist:
<label><input type="radio" name="rbRSelectionGroup" checked value="0" />None</label>
<asp:Repeater ID="rptRsOptions" runat="server">
<ItemTemplate>
<div>
<label><input type="radio" name="rbRSelectionGroup" value='<%# ((RItem)Container.DataItem).Id %>' /><%# ((RItem)Container.DataItem).Name %></label>
</div>
</ItemTemplate>
</asp:Repeater>
I removed some stuff for this thread, one being I put an r for some name that I do not want to expose here so just an fyi.
Now, I would assume that this would or should happen:
Page loads the first time, the None radio button is checked / defaulted
I go and select a different radiobutton in this radiobutton list
I do an F5 refresh in my browser
The None radio button is pre-selected again after it has come back from the refresh
but #4 is not happening. It's retaining the radiobutton that I selected in #2 and I don't know why. I mean in regular HTML it's stateless. So what could be holding this value? I want this to act like a normal input button.
I know the question of "why not use an ASP.NET control" will come up. Well there are 2 reasons:
The stupid radiobuttonlist bug that everyone knows about
I just want to brush up more on standard input tags
We are not moving to MVC so this is as close as I'll get and it's ok, because the rest of the team is on par with having mixed ASP.NET controls with standard HTML controls in our pages
Anyway my main question here is I'm surprised that it's retaining the change in selection after postback.
This is a Firefox behavior.
Firefox will persist form values when you reload a webpage.
For example, if you go to StackOverflow's Ask Question page, enter some text, and reload the page, Firefox will remember the text, but IE will not.
If you re-request the page (as opposed to refreshing it) by pressing Enter in the address bar, the form will not be persisted.
I have several elements in my web page generated by JavaScript.
Here's an example of such content:
<input id="uploadfile01" type="file" onchange="change(1);" />
<input id="uploadfile02" type="file" onchange="change(2);" />
My question is:
How can I interact with these elements in the server side, (Asp.net) after a post?
(Since the elements were dynamically generated they do not exist in the original asp.net page)
I dont think that would be possible.....if i am not mistaken you want to give the option to attach multiple files. i think it would be better to place a set number of fileupload controls and set there display to none and you can use javascript to show them.
i know that this is not what you are looking for but after a postback the controls will be lost and even if they are added again they will lose there contents.(had you been generating them through code behind)
I like HtmlControls because there is no HTML magic going on... the asp source looks similar to what the client sees.
I can't argue with the utility of GridView, Repeater, CheckBoxLists, etc, so I use them when I need that functionality.
Also, it looks weird to have code that mixes and matches:
<asp:Button id='btnOK' runat='server' Text='OK' />
<input id='btnCancel' runat='server' type='button' value='Cancel' />
(The above case in the event you wanted to bind a server-side event listener to OK but Cancel just runs a javascript that hides the current div)
Is there some definitive style guide out there? Should HtmlControls just be avoided?
It might be useful to think of HTML controls as an option when you want more control over the mark up that ends up getting emitted by your page. More control in the sense that you want EVERY browser to see exactly the same markup.
If you create System.Web.UI.HtmlControls like:
<input id='btnCancel' runat='server' type='button' value='Cancel' />
Then you know what kind of code is going to be emitted. Even though most of the time:
<asp:Button id='btnCancel' runat='server' Text='Cancel' />
will end up being the same markup. The same markup is not always emitted for all WebControls. Many WebControls have built in adaptive rendering that will render different HTML based on the browser user agent. As an example a DataGrid will look quite different in a mobile browser than it will in a desktop browser.
Using WebControls as opposed to HtmlControls also lets you take advantage of ASP.NET v2.0 ControlAdapters which I believe only works with WebControls, this will allow you programatic config driven control over the markup that gets emitted.
This might seem more valuable when you consider that certain mobile browsers or WebTVs are going to want WML or completely different sets of markups.
In my experience, there's very little difference. As Darren said, if you don't need server-side functionality, HTML controls are probably lower-impact.
And don't forget, you can bolt server-side functionality onto almost any HTML control just by adding a runat="server" directive and an ID to it.
well... i wouldn't use an html control if you don't need to do anything on it on the server. i would do
<input id='btnCancel' type='button' value='Cancel' />
fin.
By adding runat="server" you can get access to any HTML controls in server side..
and I believe HTML controls are less weight compared to ASP.NET server controls..