asp.net dropdownlist - add blank line before db values

Question

On my page I have a DropDownList which I populate with database values from an SqlDataSource (see code below).

How can I add my own text or a blank line before the values?

<asp:DropDownList ID="drpClient" runat="server" Width="200px" 
    AutoPostBack="True" DataSourceID="dsClients" DataTextField="name" 
        DataValueField="client_id">
</asp:DropDownList>
<asp:SqlDataSource ID="dsClients" runat="server" 
    ConnectionString="my_connection_string" 
    ProviderName="System.Data.SqlClient" 
    SelectCommand="SELECT [client_id], [name] FROM [clients]">
</asp:SqlDataSource>

Thanks.

P.S. Do you recommend using a SqlDataSource or is it better to populate another way?

Answer 1

You can simply add a ListItem inside the DropDownList Markup. All the values from the DataSource will be appended after that.

<asp:DropDownList ID="drpClient" runat="server" Width="200px" 
          AutoPostBack="True" DataSourceID="dsClients" DataTextField="name" 
          DataValueField="client_id" AppendDataBoundItems="true">
   <asp:ListItem>-- pick one --</asp:ListItem>
</asp:DropDownList>

Answer 2

<asp:DropDownList ID="drpClient" runat="server" Width="200px" 
        AutoPostBack="True" DataSourceID="dsClients" DataTextField="name" 
        DataValueField="client_id" AppendDataBoundItems="True">

    <asp:ListItem Text="" Value="" />
 </asp:DropDownList>

It's easy to miss, so don't forget the AppendDataBoundItems attribute I added.

Answer 3

I haven't really tested this but I'm assuming that you could add an item after you have binded the the drop down list. You could add this event to any dropdown list you'd like to add this empty box to.

protected void DropDownList_DataBound(object sender, EventArgs e)
    {
        DropDownList ddl = (DropDownList)sender;
        ListItem emptyItem = new ListItem("", "");
        ddl.Items.Insert(0, emptyItem);
    }

Answer 4

I solve changing the select command adding an empty option:

        <asp:SqlDataSource ID="dsClients" runat="server" 
            ConnectionString="my_connection_string" 
            ProviderName="System.Data.SqlClient" 
            SelectCommand="SELECT [client_id], [name] FROM [clients] union SELECT NULL, '--- pick one ----' ">
        </asp:SqlDataSource>

Greetings!!!

Answer 5

In razor-style implementation at me it looks like this:

@Html.EnumDropDownListFor(
    model => model.Privilege.Role,
    "-- Select role --",
    new
    {
        @style = "width: 216px !important",
        @class = "form-control",
        id = "role",
        required = "required"
     })

And in javascript which is executed on load I have this:

function PutDefaultPrivilegePanelListHints() {
    $('#role').val('');
    ...
}

There is also more flexible solution via unobtrusive validation (not to count on HTML5):

$('.required').each(function () { $(this).rules('add', { required: true, messages: { required: '' } }) });

Of course, there is a server-side check, too. I don't think it's a good idea to cope with classes. For instance, everything I show in the page is some class. This class has several enumerable type properties. It would be a nightmare to replicate all those properties, but making them nullable in some additional class as some ones suggested here on stackoverflow.

After all, why should i change my business logic for the sake of some specific markup? Instead, I deal with everything via javascript and some model checks.