Wednesday, 20 July 2011

Databinding a DropDownList with ASP.NET 4.0 and C#


This tutorial will demonstrate how to bind data from a database to a drop down list using ASP.NET 4.0 and C#.

Adding a Database
To demonstrate databinding to a drop down list from a database, we are going to make a simple web site with a database in it that holds some states. Then, we will bind those states as items in a drop down list. At this point I have created a new ASP.NET Empty Web Site. To begin:
  1. Right click the project in your solution explorer.
  2. Select add ASP.NET folder.
  3. Select App_Data.
  4. Right click the App_Data folder.
  5. Select add new item...
  6. Select a SQL Database.
  7. Name it 'Database.mdf'.
  8. Click add.
We used over 10 web hosting companies before we found Server Intellect. Our cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

Next, we need to add a table to the database with some sample data in it. To do this:
  1. Expand the Database.mdf folder in your server/database explorer.
  2. Right click the Tables folder.
  3. Select add new table
  4. Add a column to the table named 'State' with a type of 'nvarchar(50)'.
  5. Save the table as 'States'.
  6. Add a few states to the Table. I added Alabama, Alaska, and Arizona respectively.
Adding the Default.aspx Page
Now that we have some data setup in our database, we need to add the web page with a drop down list on it. To do this:
  1. Right click the project in your solution explorer.
  2. Select add new item...
  3. Select a web form.
  4. Name it 'Default.aspx'.
  5. Click add.
  6. Open Default.aspx to design mode.
  7. Drag and drop a dropdownlist onto the web form.
I just signed up at Server Intellect and couldn't be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

After our web form is all setup, all we have left to do is the databinding.

Databinding the DropDownList
Next, we are going to bind the data from our States table to our drop down list. To do this:
  1. Expand the DropDownList Tasks menu.
  2. Select Choose Data Source...
  3. Select <New data source...> from the drop down list.
  4. For the data source type, choose a Sql Database.
  5. Click ok.
  6. For the data connection, choose Database.mdf from the drop down list.
  7. Click next.
  8. Choose to save the connection string and click next.
  9. Leave the default select statement.
  10. Click next.
  11. Here you can test the query to ensure that it is working and click finish.
  12. Ensure that our selected data source is the data source we just added and that our selected data fields for the display and value of the drop down list are both State.
  13. Click ok.
This has setup a connection to our database so that our drop down list will now be populated with the data from our States table.

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and their control panel, very easy to adapt to and their IT team is awesome!

Testing
To test this out, go ahead and load up the web site. Ensure that the drop down list is populated with the items that correspond to the states we added in the database.

The Default.aspx source looks like this:
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server" 
            DataSourceID="SqlDataSource1" DataTextField="State" DataValueField="State">
        </asp:DropDownList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            SelectCommand="SELECT * FROM [States]"></asp:SqlDataSource>
    </div>
    </form>
</body>

No comments:

Post a Comment