Home > ASP.NET and Dynamic Languages > Previous Topics > Walkthrough: Databinding

To create a file system Web site

1. In Visual Studio, in the File menu, click New Web Site. The New Web Site dialog box is displayed.
2. In the Language list, click a dynamic language such as IronPython to make it the default language for the Web site.

   Note  You can use statically compiled languages in the same Web application by creating pages and components in different programming languages.

3. Under Visual Studio installed templates, click ASP.NET Web Site.
4. In the Location box, select the File System box, and then enter the name of the folder where you want to keep the pages of your Web site. For example, type the folder name C:\DatabaseWebSite.
5. Click OK. Visual Studio creates the folder and a new page named Default.aspx.

To add an Access database to the project

1. If the Web site does not already contain an App_Data folder, in Solution Explorer, right-click the name of your Web site, click Add ASP.NET Folder, and then click App_Data.
2. In Visual Studio, in Solution Explorer, right-click the App_Data folder, and then click Add Existing Item.
3. In the Add Existing Item dialog box, browse to the Northwind.mdb file, and then click Add.

To add AccessDataSource and DataList controls to the page

1. Open the Default.aspx page (or another page that you want to use) and switch to Design view.
2. From the Data group in the toolbox, drag an AccessDataSource control onto the page.

   Note  If the Access Data Source Tasks menu does not appear, right-click the control and then click Show Smart Tag.

3. On the Access Data Source Tasks shortcut menu, click Configure Data Source. The Configure Data Source wizard is displayed.
4. On the Choose a database page, in the Microsoft Access Data file box, type ~/App_Data/Northwind.mdb or use the Browse button to select the .mdb file.
5. Click Next to open the Configure Select Statement page, and then click Specify columns from a table or view.
6. In the Name list, click Categories.
7. Select the CategoryName and Description check boxes and then click Next.
8. Optionally, click Test Query to test your query.
9. Click Finish.
10. From the Data group in the toolbox, drag a DataList control onto the page.
11. On the DataList Tasks menu, in the Choose Data Source box, click AccessDataSource1.
12. Click Ctrl+F5 to run the page with the default layout.
13. Close the browser.

To use dynamic language code with the DataList control

1. Switch to Source view.
2. Remove the Eval methods from the DataList1 control markup. When you are finished, the DataList control markup will look like the following:

   <asp:DataList ID="DataList1" runat="server"
       DataSourceID="AccessDataSource1">
       <ItemTemplate>
           CategoryName:
           <asp:Label ID="CategoryNameLabel" runat="server"
               Text='<%# CategoryName %>'>
           </asp:Label><br />
           Description:
           <asp:Label ID="DescriptionLabel" runat="server"
               Text='<%# Description %>'>
           </asp:Label><br />
           <br />
       </ItemTemplate>
   </asp:DataList>

   The data bindings are now simply dynamic language code. Because the code is dynamic, the field names can be resolved using late binding.

3. Click Ctrl+F5 to run the page, and verify that the page looks the same.
4. Close the browser.

To use dynamic language code to change the appearance of fields

1. Switch to the code for the page, and add the following import statement:
   
   

   		
   from System.Drawing import Color
   

   IronPython
   
   
2. Add the following function to return a color based on the size of a string:
   
   

   		
   def ColorPicker(input):
       input = str(input)
       if len(input) > 10:
           return Color.Yellow
       else:
           return Color.White
   

   IronPython
   
   
3. Return to the Web page markup, replace the text CategoryName: with the text The <%# CategoryName.upper() %> category includes: (for Managed JScript use toUpperCase() instead of upper()), and remove the CategoryNameLabel Label control from the item template.

   When you are finished, the item template will look like the following.

   		
   <ItemTemplate>
       The <%# CategoryName.upper() %> category includes:
       Description:
       <asp:Label ID="DescriptionLabel" runat="server"
           Text='<%# Description %>'>
       </asp:Label><br />
       <br />
   </ItemTemplate>
   

   IronPython
   
   

   The dynamic language compiler will resolve the field name and apply the ToUpper() method to the field. Be sure to include the parentheses. If you omit them, the compiler generates an object representing the method itself, which will not display anything.

   Note   You can use either the Python upper method or the .NET Framework ToUpper method.

4. Remove the text Description: above the DescriptionLabel control, and add a BackColor attribute to the DescriptionLabel control. When you are finished, the item template will look like the following.
   
   

   		
   <ItemTemplate>
       The <%# CategoryName.upper() %> category includes:
       <asp:Label ID="DescriptionLabel" runat="server"
           Text='<%# Description %>'
           BackColor='<%# ColorPicker(CategoryName) %>' >
       </asp:Label><br />
       <br />
   </ItemTemplate>
   

   IronPython
   
   

   The dynamic language compiler will evaluate the expression and call the ColorPicker method, changing the background color of descriptions for category names longer than ten characters.

5. Press Ctrl+F5 to run the page and verify that the category name appears in upper case, and that the description has a yellow background color whenever the category name is longer than ten characters.

Databinding Example in IronPython

Databinding Example in Managed JScript