How to add a data-attribute to a dropdown menu with C#

Question

I have a standard dropdown list and am able to databind to the list.

<asp:DropDownList runat="server" ID="ddlMake" ClientIDMode="Static" DataTextField="Name" DataValueField="URL" AppendDataBoundItems="true">
    <asp:ListItem>Select Make</asp:ListItem>
</asp:DropDownList>

I would like to add a data-attribute to the option like below:

<asp:ListItem data-siteid="<%# DataBinder.Eval(Container.DataItem, "SiteID") %>">Select Make</asp:ListItem>

I'm obviously getting an error because it doesn't recognize the data-siteid.

The list is databound.

Any tips would be handy

If you bind DropDownList to some collection (say List) and objects stored in this collection (in this case Thing) have property SiteID then you should be able to access this property with the code you already have. Could you provide part of code with databinding? — wlabaj, Aug 06 '12 at 20:15
Could you provide an example? I do have access to the data with the List, however I am not sure how to assign it since it isn't a valid value for — Jon Harding, Aug 06 '12 at 20:18
Sorry, I got it wrong. So are you trying to add your custom attribute to ListItem, right? Maybe you could use this http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listitem.attributes.aspx? — wlabaj, Aug 06 '12 at 20:32
Also what exactly are you trying to accomplish? Maybe there's some other way to get the same result? — wlabaj, Aug 06 '12 at 21:14
Yes, I ended up just building a repeater, thanks for the tip — Jon Harding, Aug 08 '12 at 13:16

score 19 · Accepted Answer · answered Aug 06 '12 at 20:03

You could do this in the code-behind. I'm not sure if this is the most elegant approach, but it should work.

Dim dataSrc() As String = {"ABC", "123", "!@*#"}
drp.DataSource = dataSrc
drp.DataBind()
For i = 0 To drp.Items.Count - 1
    drp.Items(i).Attributes.Add("data-siteId", dataSrc(i))
Next

Also, if this is just something which is not databound, you could consider using the HtmlSelect control which should work as well:

<select id="drp2" runat="server">
  <option data-siteId="2">ABC</option>
  <option data-siteId="3">123</option>
  <option data-siteId="4">@*!&</option>
</select>

score 4 · Answer 2 · answered Aug 08 '12 at 13:16

I ended up using a repeater since the page didn't need to repost. This allowed me not to have to work with an ondatabound event.

<asp:Repeater runat="server" ID="rptDropDown">
    <HeaderTemplate>
        <select id="ddlMake">
            <option value="">Select Make</option>
    </HeaderTemplate>
    <ItemTemplate>
        <option data-siteid="<%# DataBinder.Eval(Container.DataItem, "SiteID") %>" value="<%# DataBinder.Eval(Container.DataItem, "URL") %>"><%# DataBinder.Eval(Container.DataItem, "Name") %></option>
    </ItemTemplate>
    <FooterTemplate>
        </select>
    </FooterTemplate>        
</asp:Repeater>

score 0 · Answer 3 · answered Aug 06 '12 at 20:04

0

You can rewrite it with pure html if no events handling is needed:

    <select>
      <%foreach (var item in DataSource){%>
        <option data-siteid="<%=item.SiteID%>" value="<%=item.Value%>"><%=item.Name%> </option>
      <%}%>
    </select>

answered Aug 06 '12 at 20:04

user854301

5,383
3
28
37

score 0 · Answer 4 · answered Oct 19 '16 at 14:00

0

I ended up doing this (where ds is the dataset):

for (int row = 0; row <= ds.Tables(0).Rows.Count - 1; row++) {
    ddl.Items(row).Attributes.Add("data-siteid", ds.Tables(0).Rows(row)("SiteID"));
}

answered Oct 19 '16 at 14:00

DreamTeK

32,537
27
112
171

How to add a data-attribute to a dropdown menu with C#

4 Answers4

Linked