How to make list items in DropDownList to be colors instead of text in mvc 3 - asp.net

Suppose I have a ViewModel where there is a string field which contains name of the color. So in my DropDownList I want list items to be colors instead of mere text)) Can it be somehow done? Thanks in advance!

Unfortunately the standard Html.DropDownListFor helper doesn't allow you to define html attributes on the <option> element that it generates. For example your target HTML could be:
<select name="color">
<option style="background-color:Red;"></option>
<option style="background-color:Blue;"></option>
...
</select>
In order to achieve this markup you could write a custom DropDownList helper as shown in this answer.
And to achieve even sleeker UI you could use some of the existing jQuery DropDown plugins such as this one.

Related

Add label-element to managed_file field with Form API

I want to style my managed_file-Field in a Drupal 7 Form-API custom form and therefore, insert a label element that will replace the "Browse for file".
So I want exactly this:
<input type="file" name="files[bild_0]">
<input type="submit" id="edit-bild-0-upload-button" value="Upload">
<label for="files[bild_0]">Choose Picture</label>
However, the Form API makes it very difficult to insert the label directly next to the input. "#prefix" and "#suffix" are not working. "#field_prefix" and "#field_suffix" inserted the html in a wrapper...any ideas?
Thank you very much in advance!
So, i finally figured out an alternative solution. I used the
'#field_suffix'
property on the Form API field to add the label element. Besides of that, I had to overwrite the initial id of the field via
'#id' => 'upload-selector-' . $index_of_picture field
Since the id of the actual input-field is now different from the div that contains the field, I could use the label of the field to trigger the file-dialog. I styled the label element to my needs and hid the initial input.

Dropdown List Country With CountryFlags

Does asp.net have any classes who represent countryFlag as like CultureInfo who represent country list? I want to show countries with flags in asp.net using C# without using database. Is it possible to do?
İf you ask us yes .
Here is the method for your idea
If you want to use it on client side, I would recommend you to use semantic-ui.
Use dropdown element with flags. Here is example
Best way try image sprite. Refer https://www.flag-sprites.com/ . Simple example given below.
<select>
<option value="1">Albania<img src="blank.gif" class="flag flag-in" alt="India" /></option>
<option value="2">Albania<img src="blank.gif" class="flag flag-usa" alt="United States" /></option>
</select>

How to show indicator inside select dropdown menu with Angular JS?

I am currently using bootstrap and bootstrap-select directive for AngularJS. And I want to do something similar to this http://cl.ly/image/301L0B2X2b0r.
Problem is I have no idea how to customize select template if we are using ng-option?
Any help would be really appreciated.
I recommend this way:
Here is the fist:
<select ng-options="i in items"></select>
You can also do it this way ( not the ng-option way ):
<select>
<option ng-repeat='i in items'><option>
<select>
It may be best to handle this outside of an actual <select> tag. Styling this tag is very inconsistent across browsers. Perhaps treat this as a bootstrap dropdown menu? You can create your own directive that wraps the dropdown menu so you can track the state of the model for your custom select control. You can then use ng-repeat on your list item tags and style them as you see fit!

Hiding form drop down options using ONLY CSS

I am definitely a CSS noobie, but have looked everywhere and can't find a solution to my problem (I have found out why my attempts don't work, but no solution).
I am hacking a CSS sheet to modify an advanced search form which is linked to a database. I CANNOT touch the HTML, nor can I use JavaScript or JQuery. The search form allows a user to select which fields they wish search from a drop down form menu. I want to hide a number of field options since they have no data.
The HTML is
<div class="inputs"><div class="search-entry">
<select name="advanced[0][element_id]"
id="advanced-0-element_id">
<option value="" label="Select Below ">Select Below </option>
<optgroup label="Dublin Core">
<option value="88" label="Abstract">Abstract</option>
<option value="98" label="Access Rights">Access Rights</option>
<option value="118" label="Accrual Method">Accrual Method</option>
<option value="119" label="Accrual Periodicity">Accrual Periodicity</option>
<option value="120" label="Accrual Policy">Accrual Policy</option>
and so on
I tried
option [value="88"] {
display: none;}
But this doesn't work b/c each drop down option does not create a block in the first palace. Therefore display: none can't hide a block that doesn't exist.
So now you know what doesn't work, and what I need to do. Any suggestions? Again, I can't access the html code at all b/c it is generated by a PHP program on a server I don't have access to. Even if I did, I don't know any PHP at all.
thanks for your time
At the risk of getting downvoted I am going to say that this isn't possible with CSS alone.
The option tag describes the data model of an HTML element. The style sheet describes the view.
You won't be able to do this with CSS. You would need to use JavaScript to do it at runtime. Otherwise, you'd have to edit the server code and/or data from where it is generated. Do you have access to the database? If so you may be able to just remove the rows it's using.

Webform checkbox value in javascript

I have a checkbox list control on my asp.net web form that I am dynamically populating from an arraylist. In javascript I want to be able to iterate through the values in the list and if a particular value has been selected to display other controls on the page.
My issue is that all the values in the checkbox list are showing up as 'on' instead of the actual value set. How do I get the actual values for each checkbox?
Thanks.
Javascript:
checkBoxs=document.getElementById(CheckboxList);
var options=checkBoxs.getElementsByTagName('input');
for(var i=0;i<options.length;i++)
{
if(options[i].value=="Other")
{
if(options[i].checked)
{
var otherPub=document.getElementById('<%=alsOtherPublicity.ClientID%>');
otherPub.style.display='block';
}
}
}
Edit: The line that I'm having problems with is if(options[i].value=="Other") as the values showing up in firebug are given as 'on' rather than the values that I set.
Edit 2: The html that is produces looks like:
<span id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity" class="ucFieldCBL" onChange="alValidate();" onClick="alPublicity('ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity');">
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$0"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0">Text1</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$1"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1">Text2</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$2"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2">Text3</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$3"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3">Text4</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$4"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4">Text5</label>
</span>
It looks as if the issue stems from the lack of a value attribute available on the asp.net checkbox control as described by Dave Parslow. I'm currently trying a workaround by calling a function server side to return the text of the checkbox and using that instead.
options[i].checked will return true or false.
options[i].value will give you the value attribute of the checkbox tag.
I think your problem is not with the javascript but with the code that is populating the checkboxes. Are you binding the ArrayList as the CheckBoxList data source or iterating through the ArrayList and adding new ListItems to the CheckBoxList. If the former, consider switching to the latter and make sure that you use the ListItem constructor that takes both text and value parameters. If you look at the HTML source I suspect that you will see that the generated code has the value parameter set to on for all of your checkboxes which means that the values weren't actually bound in the codebehind.
Not 100% applicable here, but be aware that if you give a checkbox a cssclass, it gets a span wrapped around it, and the class is placed on that. This causes all sorts of cross browser problems when youre navigating the dom, or disabling checkboxes
I realised after much playing about with prerender events that I didn't actually need to know the exact value of the checkbox as the arraylist values would be in the same order as the checkboxes. I searched through the arraylist to get the position of the value that I needed and then used that position on the list of checkboxes.
It sounds a bit fiddly and I don't know if it would work for everyone but I thought I would put it up here anyway incase it helps someone else someday.
Thanks for all your help.

Resources