Using Dynamic Languages with ASP.NET

This walkthrough provides you with an introduction to dynamic languages for ASP.NET. It guides you through creating a simple page in Microsoft Visual Studio, adding controls, and adding event handlers using dynamic languages.

Tasks illustrated in this walkthrough include:

• Adding controls to the default page.
• Adding event handlers in a separate code file, using dynamic languages.
• Adding a second page with event-handling code in the page.

Prerequisites

In order to complete this walkthrough, you will need:

• Microsoft Visual Studio 2008 or Visual Web Developer 2008 Express Edition.
• A copy of the website included in the ASP.NET Dynamic Language Support download. There is currently no project template, so it is necessary to copy the website in order to start with a blank ASP.NET Dynamic Language website.

This walkthrough assumes that you have a general understanding of working in Visual Web Developer. For an introduction, see Walkthrough: Creating a Basic Page in Visual Web Developer.

Creating a Web Site

In this part of the walkthrough, you will create a Web site with a dynamic language as the default language.

To create a Web site with a default ASP.NET Web page

1. Copy the files from the ASP.NET Dynamic Language Support project into an empty directory.
2. In Visual Studio (or Visual Web Developer), in the File menu, click Open Web Site. The Open Web Site dialog box is displayed.
3. Select the directory in which you copied the files in step 1. Make sure that FileSystem is selected in the left panel of the dialog.

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

4. Click Open. Visual Studio opens the folder as a website and displays the files in the Solution Explorer.

Adding Controls to the Default Page

In this part of the walkthrough, you will add server controls to the page.

To add controls to the page

1. Switch to Design view.
2. In the Toolbox, from the Standard group, drag three controls onto the page: a TextBox control, a Button control, and a Label control.
3. Put the insertion point above the TextBox control, and then type Enter your name: to create a caption for the text box.

Programming the Button Control

For this walkthrough, you will write code that reads the name that the user enters into the text box and then displays the name in the Label control.

To add a button event handler

1. Right-click the page and click View Code to show the separate code file. For example, if you are using IronPython, the file is Default.aspx.py.

   The file contains a stub event handler for the Load event of the page.

   Note: In IronPython, pass is a placeholder that does nothing.

2. Replace the stub event handler with the following code to set the label text when the page is initialized:

   IronPython

   		
   def Page_Load(sender, e):
   if not IsPostBack:
   Label1.Text = "...Your name here..."

3. Add the following code to create an event handler for the button's Click event:

   IronPython

   		
   def Button1_Click(sender, e):
   Label1.Text = Textbox1.Text

   In this release, event handlers must be coded and bound manually. You cannot create them by double-clicking a control in Design view or by selecting an event in the Properties window.

   Because dynamic languages do not have typed parameters and variables, you do not need to know the type of the event argument object.

   Note: In this release, IntelliSense support for dynamically typed variables is limited. You can press CTRL+SPACE to get a list of code elements that are currently in scope.

4. Switch to Default.aspx and go to Source view, and then bind the event handler by adding an OnClick attribute to the Button control markup, as shown in the following example:

   <form id="form1" runat="server">
   <div>
   Enter your name:<br />
   <asp:TextBox ID="TextBox1" runat="server">
   </asp:TextBox>
   <asp:Button ID="Button1" runat="server" Text="Button"
   OnClick="Button1_Click"/><br />
   <br />
   <asp:Label ID="Label1" runat="server" Text="Label">
   </asp:Label>
   <br />
   </div>
   </form>

5. Press CTRL+F5 to run the page in the browser using the ASP.NET Development Server.
6. Enter a name into the text box and click the button. The name you entered is displayed in the Label control. If the name does not appear, check the spelling of the event handler in the OnClick attribute.
7. In the browser, optionally view the source of the page you are running.
8. Close the browser.

Programming the Button Control

For this walkthrough, you will add dynamic language code in a script block.

To add a default button event handler

1. Switch to Source view.
2. Add the following code to initialize the label and to create an event handler for the button's Click event.

   IronPython

   		
   <script runat="server">
   def Page_Load(sender, e):
   if not IsPostBack:
   Label1.Text = "...Your name here..."
   
   def Button1_Click(sender, e):
   Label1.Text = Textbox1.Text
   </script>

3. In the Button control, bind the event handler by adding the OnClick attribute, as you did previously in this walkthrough. The following example shows the markup.

   <asp:Button ID="Button1" runat="server" Text="Button"
   OnClick="Button1_Click"/><br />

4. Press CTRL+F5 to run the page in the browser using the ASP.NET Development Server.

Working with Dynamic Language Code in the DataList Control

In this part of the walkthrough you will use dynamic language code to perform data binding instead of using the Eval method that is generated by default for declarative data binding.

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.

Because the bindings are dynamic language code, you can use them to change the way the field values are displayed. In this part of the walkthrough, you will change the case of the CategoryName field, and change the background color of the Description field depending on the length of the CategoryName field.

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:

   IronPython

   		
   from System.Drawing import Color

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

   IronPython

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

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

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

   IronPython

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

   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.

   IronPython

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

   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.