How to Clear and Repopulate Your ASP.NET DropDown List with jQuery

Yes you can call and use your ASP.NET controls from jQuery! Shereen has already posted a blog on how you can access these controls JQuery Accessing the Client Generated ID of ASP.NET Controls so feel free to check it out there first.

Recently we’ve had to create a UI that has a datepicker, and the date that a user selects should determine what values get populated in an ASP.NET dropdown.

Here’s how we did it

We’ve listed below the two controls we’re using in this example: a calendar control and an asp.net drop down list.

1
2

<input id="datepicker" type="text" />
<asp:DropDownList ID="ddlDates" runat="server" Width="100px"></asp:DropDownList>

For the date picker, we used the DatePicker control from jQueryUI. Their demos and documentation are a great starting point, if you have any troubles with the calendar on your site, drop us a line.

Next, we had to add the following references:

1
2

<script src="http://myserver/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://myserver/js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>

Then we wired it up! Good ol’ jQuery!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function PopulateDropDownDates(dateText, numDaysToAdd)
{
    var selectedDate = new Date(dateText);
 
    //clear the dropdown
    $("#<%= ddlDates.ClientID %>>option").remove();
 
    //add todays date
    $("#<%= ddlDates.ClientID %>").append($('<option></option>').val(dateText).html(dateText));
 
    //counter
    for (var i = 0; i <= numDaysToAdd; i++)
    {
        var currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate() + i);
        currentDate = currentDate.getMonth() + 1 + "/" + currentDate.getDate() + "/" + currentDate.getFullYear();
        $("#<%= ddlDates.ClientID %>").append($('<option></option>').val(currentDate).html(currentDate));
    }
}
 
$(document).ready(function() {
 
    $("#datepicker").datepicker({
            onSelect: function(dateText, inst)
            {
                PopulateDropDownDates(dateText, 14);
            }
    });

Voila! That’s it. Works beautifully!

Why We Love WooThemes

In case it’s not obvious, Black Ninja’s site uses WordPress. WordPress makes it super easy for us to keep an active profile on the web via quick and easy updates. But WordPress on it’s own is not enough. We wanted a site that was not only functional but also looked good.

During the early days of Black Ninja, we knew we wanted to get something up quickly but with little cost. We are a serious company, who prides itself on it’s professionalism, passion and dedication to the work we do and we wanted a site to reflect that. We’re also a fun bunch, so a bit of humor and playfulness was important too. We spent a fair bit of time trying to find a good theme to compliment our WordPress installation and content we’d already posted to our site. Most of what we’d found was reasonable, but the style and sleekness was not quite what we were looking for. Free doesn’t necessarily mean better so we were open to both.

Then we came across WooThemes, and I have to admit, we were hooked from minute one! First impressions are really important and WooThemes didn’t disappoint. They certainly had their stuff together regarding their website. It was clean, professional and full of activity. All very good signs. Their demo page was thorough, and what i mean by that is: the content was all there, the colors were available to pick between and the pages were presented in a way that made it easy to visualize YOUR content in place of theirs.

The price point was the next big plus for us. As a small business and a relatively new startup it wasn’t feasible to pay $500 dollars for a theme. WooThemes hit the spot with their $70 dollar single license theme or $150 for the developer license if you’re interested in using the theme on multiple client sites and require the image files. How can you even go wrong with a price like that we figured?

Doing a bit of reading also makes it quite obvious very quickly, that the team behind woothemes is not only passionate but very talented at what they do. The forums are very active and I’m usually able to point out quite quickly who the woothemes guys are. They visit their forums frequently and they take an active approach to helping users with their support/theme issues. Honestly, you don’t get that level of support from many places even if you are paying for it.

These guys actively twitter, they are constantly updating and getting user feedback and every once in a while they get us excited about some cool promotional offer they have going on. April Fools for example was the 4 for 1, buy 4 themes for the price of 1. And let’s not forget their generous new 2 for 1 permanent offer allowing you to buy 2 themes at the price of 1. And for those of you who haven’t already noticed, they offer some of their themes for FREE as a way of showcasing those themes. How cool is that? How many companies would do that when they clearly don’t have to!

We love these guys because they are constantly fresh, exciting to watch and a lot of fun to observe grow and expand their theme lineup. They genuinely care about their customers and you won’t have any troubles finding some help if that’s what you’re seeking. If you haven’t already checked out woothemes, I encourage you to do so and I guarantee you won’t be disappointed.

If you’re currently using WooThemes, post a comment, we’d love to hear your feedback.

BTW, both Shereen and Matthew use WooThemes on their personal blogs too!