CODEWITHSUNDEEP
c#asp.netlinqentity-framework
Jon Harding
Jon Harding

Reputation: 4946

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

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

Upvotes: 6

Views: 24745

Answers (4)

DreamTeK
DreamTeK

Reputation: 34197

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

Upvotes: 0

Jon Harding
Jon Harding

Reputation: 4946

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>

Upvotes: 4

user854301
user854301

Reputation: 5493

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>

Upvotes: 0

Kyle B.
Kyle B.

Reputation: 5787

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>

Upvotes: 19

Related Questions