Export (0) Print
Expand All

New Server Controls Provided by the ASP.NET Web Matrix

 

Bill Evjen
International .NET Association

September 2003

Applies to:
    Microsoft® ASP.NET
    Microsoft Visual Studio® .NET
    Microsoft Visual Basic® .NET
    Microsoft Visual C#® .NET
    Microsoft Visual J#™ .NET

Summary: Learn how to use new server controls provided by the ASP.NET Web Matrix to display and edit data from Microsoft SQL Server and Microsoft Access databases, and how to import ASP.NET Web Matrix controls into Visual Studio .NET. (18 printed pages)

Contents

Introduction
New Server Controls
Summary

Introduction

Recently, the second version of the ASP.NET Web Matrix was released to the public. The Web Matrix is a free .NET development tool provided by Microsoft® that allows you to build ASP.NET pages as well as XML Web services in either Microsoft Visual Basic® .NET, C# or J#. You can download the Web Matrix from the ASP.NET Web site.

Many Web developers who have been primarily working with Microsoft's other IDE, Microsoft Visual Studio® .NET, might not yet have taken a look at the Web Matrix, thinking that there isn't anything there for them. But the Web Matrix is worth a look, even if you are primarily using Visual Studio .NET for your ASP.NET development.

The Web Matrix is an outstanding IDE. It is lightweight, fast, and allows you to quickly and easily build your ASP.NET pages. This article will take a look at some of the new server controls that the Web Matrix has that you cannot find in Visual Studio .NET. Finally, we'll take a look at how to import these new server controls from the Web Matrix into Visual Studio .NET for those developers who prefer working with Visual Studio .NET.

New Server Controls

The ASP.NET Web Matrix allows you to build your ASP.NET web pages in a very similar manner to using Visual Studio .NET. Both IDEs allow you to drag and drop server controls from a Toolbox onto a design surface. Once a server control has been placed on a design surface, you can set its properties to manipulate the output of the control.

If you look at the list of server controls that are available to you in the Web Matrix, you will notice that many of the server controls are the same server controls that you have seen in Visual Studio .NET. For instance, you will notice that the Web Matrix has the typical Label, Literal, RadioButton, ListBox, and Image server controls. Also, some of the provided server controls in the Web Matrix are the same as controls in Visual Studio .NET, but have a different name. For instance, the File Field server control in Visual Studio .NET is in the Web Matrix, but is called File Upload. Even though you will find the same familiar server controls in the Web Matrix that you can find in Visual Studio .NET, the exciting thing is that you can find some new server controls that are not present in Visual Studio .NET. These new server controls include:

New HTML server controls

  • ImageButton
  • GroupBox
  • Anchor
  • Span
  • Div
  • Panel
  • IFrame
  • Form

New Web server controls

  • SqlDataSourceControl
  • AccessDataSourceControl
  • MxDataGrid

This article will primarily look at the new Web server controls, as they are the most exciting new additions.

The ASP.NET Web Matrix's New Web Server Controls

As listed above, the Web Matrix provides three new web server controls that you cannot find in Visual Studio .NET—the SqlDataSourceControl, AccessDataSourceControl, and the MxDataGrid server controls. These are outstanding new server controls that provide your ASP.NET applications wonderful new functionality.

SqlDataSourceControl

If you have been working with ASP.NET a while using Visual Studio .NET, you will know that if you want to display data from a Microsoft SQL Server™ table within a DataGrid server control, that there are typically a lot of steps that you have to take before this is accomplished. For instance, to do this, you will have to create a number of new objects first. The first thing you need to do is create a SqlConnection object followed by a SqlCommand object. Once those objects are in place, you can then create a SqlDataReader to populate your DataGrid by binding the result to the DataGrid. In the end, this will give you a table containing the contents of the data you were retrieving (such as the Customers table from the Northwind database).

Microsoft has made this process considerably easier for us now with the addition of this new server control provided by the Web Matrix—the SqlDataSourceControl server control. The SqlDataSourceControl takes care of all of these extra steps for you. By using this server control, there is therefore no need to create all these additional objects just to work with SQL data.

For an example of this, follow these steps using the SqlDataSourceControl along with the typical DataGrid server control to get at the Customers table from the Northwind database in SQL Server:

  1. Create a new ASP.NET page in the ASP.NET Web Matrix using either Visual Basic .NET or C#.
  2. Drag a DataGrid server control onto the design surface.
  3. Set the style of the DataGrid to something more interesting by clicking the AutoFormat link in the Properties window.
  4. Drag a SqlDataSourceControl server control onto the design surface.

After you drag this control onto the design surface, you will notice that it is represented by a gray box. Highlight the gray box and you will see the control's properties appear in the Properties window within the Web Matrix. This is shown in Figure 1.

Aa479004.aspnet-newsrvrcntrls-webmatrix-01(en-us,MSDN.10).gif

Figure 1. SqlDataSourceControl properties in the ASP.NET Web Matrix

Once highlighted, you will need to give the following values to the ConnectionString and SelectCommand properties.

ConnectionString: server='localhost'; trusted_connection=true; Database='Northwind'
SelectCommand: Select * From Customers

Once set, you can now start associating this new database access control to the DataGrid control that is on the page. To do this, highlight the DataGrid and set the value of the DataSource property to SqlDataSourceControl1.

Now that the DataGrid is ready, you need to bind the DataGrid to this data source. You can easily do this in the Page_Load event. In the end, the code for your ASP.NET page should be similar to what is illustrated here in Code Sample 1.

Code Sample 1. Page_Load Event in Visual Basic .NET

<%@ Page Language="VB" %>
<%@ Register TagPrefix="wmx"
   Namespace="Microsoft.Matrix.Framework.Web.UI" 
   Assembly="Microsoft.Matrix.Framework, Version=0.6.0.0, 
   Culture=neutral, PublicKeyToken=6f763c9966660626" %>

<script runat="server">

   Sub Page_Load(sender As Object, e As EventArgs)
      DataGrid1.DataBind
   End Sub

</script>

<html>
<head>
</head>
<body>
   <form runat="server">
      <p>
         <asp:DataGrid id="DataGrid1" runat="server" 
            DataSource="<%# SqlDataSourceControl1 %>" 
            BorderStyle="Solid" GridLines="Vertical" 
            BorderWidth="1px" BorderColor="#999999" BackColor="White" 
            CellPadding="3" ForeColor="Black">
            <FooterStyle backcolor="#CCCCCC"></FooterStyle>
            <HeaderStyle font-bold="True" forecolor="White" 
               backcolor="Black"></HeaderStyle>
            <PagerStyle horizontalalign="Center" forecolor="Black" 
               backcolor="#999999"></PagerStyle>
            <SelectedItemStyle font-bold="True" forecolor="White" 
               backcolor="#000099"></SelectedItemStyle>
            <AlternatingItemStyle 
               backcolor="#CCCCCC"></AlternatingItemStyle>
         </asp:DataGrid>
      </p>
      <p>
         <wmx:SqlDataSourceControl id="SqlDataSourceControl1" 
            runat="server" ConnectionString="server='localhost'; 
            trusted_connection=true; 
            Database='Northwind'" SelectCommand="Select * From 
            Customers"></wmx:SqlDataSourceControl>
      </p>
      <p>
         <asp:DropDownList id="DropDownList1" runat="server" 
            DataSource="<%# SqlDataSourceControl1 %>" 
            DataTextField="CompanyName" 
            DataValueField="CustomerID"></asp:DropDownList>
      </p>
   </form>
</body>
</html>

Code Sample 1. Page_Load Event in Visual C#

<%@ Page Language="C#" %>
<%@ Register TagPrefix="wmx" 
   Namespace="Microsoft.Matrix.Framework.Web.UI" 
   Assembly="Microsoft.Matrix.Framework, Version=0.6.0.0, 
   Culture=neutral, PublicKeyToken=6f763c9966660626" %>

<script runat="server">

   void Page_Load(Object sender,EventArgs e) {
      DataGrid1.DataBind();
   }

</script>

<html>
<head>
</head>
<body>
   <form runat="server">
      <p>
         <asp:DataGrid id="DataGrid1" runat="server" 
            DataSource="<%# SqlDataSourceControl1 %>" 
            BorderStyle="Solid" GridLines="Vertical" 
            BorderWidth="1px" BorderColor="#999999" BackColor="White" 
            CellPadding="3" ForeColor="Black">
            <FooterStyle backcolor="#CCCCCC"></FooterStyle>
            <HeaderStyle font-bold="True" forecolor="White" 
               backcolor="Black"></HeaderStyle>
            <PagerStyle horizontalalign="Center" forecolor="Black" 
               backcolor="#999999"></PagerStyle>
            <SelectedItemStyle font-bold="True" forecolor="White" 
               backcolor="#000099"></SelectedItemStyle>
            <AlternatingItemStyle 
               backcolor="#CCCCCC"></AlternatingItemStyle>
         </asp:DataGrid>
      </p>
      <p>
         <wmx:SqlDataSourceControl id="SqlDataSourceControl1" 
            runat="server" ConnectionString="server='localhost'; 
            trusted_connection=true; 
            Database='Northwind'" SelectCommand="Select * From 
            Customers"></wmx:SqlDataSourceControl>
      </p>
      <p>
         <asp:DropDownList id="DropDownList1" runat="server" 
            DataSource="<%# SqlDataSourceControl1 %>" 
            DataTextField="CompanyName" 
            DataValueField="CustomerID"></asp:DropDownList>
      </p>
   </form>
</body>
</html>

Pressing F5 in the Web Matrix and running this ASP.NET page will give you the following results as shown here in Figure 2.

Aa479004.aspnet-newsrvrcntrls-webmatrix-02(en-us,MSDN.10).gif

Figure 2. Displaying a SQL Server database in Internet Explorer

The main thing to notice from the above code sample is that the SqlDataSourceControl itself has a different tag prefix than the other controls. You will notice that the specific ASP.NET controls that can only be found in the Web Matrix will have the tag prefix of wmx instead of the typical asp.

In the end, this process to get the Customers table data out of SQL and displayed in a DataGrid was very simple when you compare it to how it is typically done without the use of the SqlDataSourceControl.

You can use the SqlDataSourceControl to populate any of the controls that can be bound to data sources. For instance, you can easily use the SqlDataSourceControl to dynamically populate a DropDownList server control. To do this, change the value of the SelectCommand property to Select CustomerID, CompanyName From Customers. Then drag a DropDownList server control onto the design surface and change the following properties to the values listed here:

DataSource: SqlDataSourceControl1
DataTextField: CompanyName
DataValueField: CustomerID

Then in the Page_Load event of the ASP.NET page, use the following code:

Visual Basic .NET

DropDownList1.DataBind

C#

DropDownList1.DataBind();

Running this page will give you a DropDownList (Figure 3) that visually displays all the company names from the Customers table in the Northwind database from SQL Server. If you look at the source of the page itself (right-click on the page in the browser, and then click View Source), you will notice that the value of each item listed in the drop-down list is the value of the item's CustomerID.

Aa479004.aspnet-newsrvrcntrls-webmatrix-03(en-us,MSDN.10).gif

Figure 3. Displaying CustomerIDs in a DropDownList

We will look more at using the SqlDataSourceControl later, when we look at using the MxDataGrid server control.

AccessDataSourceControl

In addition to being able to easily connect to SQL Server using the SqlDataSourceControl, you can also connect to any Microsoft Access database (an .mdb file) just as easily by using the AccessDataSourceControl that is provided with the Web Matrix.

There isn't that much difference between these two new ASP.NET Web Matrix data controls. You work with the AccessDataSourceControl in same manner as the SqlDataSourceControl.

Microsoft Access comes with a sample database called Northwind, just as SQL Server does. The samples in this paper use the sample Northwind database that is found at C:\Program Files\Microsoft Office\OFFICE11\SAMPLES\Northwind.mdb from the Office 11 beta. You can get to the sample Northwind database within Access by clicking Help/Sample Databases/Northwind Sample Database. If you do not have the database installed, you will be prompted to install it.

Once the sample database is installed, you can then use this sample .mdb file and the AccessDataSourceControl provided by the Web Matrix to work with the samples in this paper.

For an example of using this new control, follow these steps using the AccessDataSourceControl along with the DataGrid server control to get at the Customers table from the Northwind database in the .mdb file:

  1. Create a new ASP.NET page in the ASP.NET Web Matrix using either Visual Basic .NET or C#.
  2. Drag a DataGrid server control onto the design surface.
  3. Set the style of the DataGrid to something more interesting by clicking the AutoFormat link in the Properties window.
  4. Drag an AccessDataSourceControl server control onto the design surface.

Just like the SqlDataSourceControl, the AccessDataSourceControl is represented on the Design surface as a gray box. Highlight the gray box and give these properties the following values:

ConnectionString: Provider=Microsoft.Jet.OLEDB.4.0; 
   Data Source=C:\Program Files\Microsoft Office\OFFICE11\SAMPLES\Northwind.mdb
SelectCommand: Select * From Customers

Then returning to the DataGrid on the Design surface, highlight the DataGrid1 control that is on the page and give the DataSource property the value of AccessDataSourceControl1.

The last step is to then bind the DataGrid within the Page_Load event of the ASP.NET page. In the end, you code should look similar to what is shown here in Code Sample 2.

Code Sample 2. Binding the DataGrid within the Page_Load event in Visual Basic .NET

<%@ Page Language="VB" %>
<%@ Register TagPrefix="wmx" 
   Namespace="Microsoft.Matrix.Framework.Web.UI" 
   Assembly="Microsoft.Matrix.Framework, Version=0.6.0.0,
   Culture=neutral, 
   PublicKeyToken=6f763c9966660626" %>

<script runat="server">
   Sub Page_Load(sender As Object, e As EventArgs)
      DataGrid1.DataBind()
   End Sub
</script>

<html>
<head>
</head>
<body>
   <form runat="server">
      <p>
         <asp:DataGrid id="DataGrid1" runat="server" 
           DataSource="<%# AccessDataSourceControl1 %>"></asp:DataGrid>
      </p>
      <p>
         <wmx:AccessDataSourceControl 
            id="AccessDataSourceControl1" runat="server" 
            ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0; Data " & _
            "Source=C:\Program Files\Microsoft " & _
            "Office\OFFICE11\SAMPLES\Northwind.mdb" 
            SelectCommand="Select * From Customers">
         </wmx:AccessDataSourceControl>
      </p>
   </form>
</body>
</html>

Code Sample 2. Binding the DataGrid within the Page_Load event in C#

<%@ Page Language="C#" %>
<%@ Register TagPrefix="wmx" 
   Namespace="Microsoft.Matrix.Framework.Web.UI" 
   Assembly="Microsoft.Matrix.Framework, Version=0.6.0.0, 
   Culture=neutral, PublicKeyToken=6f763c9966660626" %>

<script runat="server">
   void Page_Load(object sender, EventArgs e) {
      DataGrid1.DataBind();
   }
</script>

<html>
<head>
</head>
<body>
   <form runat="server">
      <p>
         <asp:DataGrid id="DataGrid1" runat="server" DataSource="<%# 
            AccessDataSourceControl1 %>"></asp:DataGrid>
      </p>
      <p>
         <wmx:AccessDataSourceControl 
            id="AccessDataSourceControl1" runat="server" 
            ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0; Data " +
            "Source=C:\Program Files\Microsoft " +
            "Office\OFFICE11\SAMPLES\Northwind.mdb" 
            SelectCommand="Select * From Customers">
         </wmx:AccessDataSourceControl>
      </p>
   </form>
</body>
</html>

In the end, this will give you a simple page that displays the entire Customers table from the Northwind Access database in a simple table in the browser (shown here in Figure 4). After just assigning a couple of properties and using one line of code, you were able to retrieve data from an Access data source.

Aa479004.aspnet-newsrvrcntrls-webmatrix-04(en-us,MSDN.10).gif

Figure 4. Displaying an Access database in Internet Explorer

MxDataGrid Server Control

The MxDataGrid server control is also a brand new server control that is included in the Web Matrix, but is not available in Visual Studio .NET. This control is quite similar to the DataGrid control, but makes turning on paging and sorting of a DataGrid far easier than using the traditional DataGrid Web control.

To show you an example of this, let's just pull up the Suppliers table from SQL Server in this MxDataGrid control with paging and sorting enabled. The first step is to create a new page in the Web Matrix. For this example, let's create a simple ASP.NET page. You will find this in the General templates.

Name the file MxDataGridExample.aspx, and choose either Visual Basic .NET or C# to code your page. Once created, you will be presented with the file in design mode. Drag an MxDataGrid onto the design surface. Unlike the DataGrid control, there aren't any template styles ready for you to use, so to jazz its display up a bit, you will need to make the appropriate changes to the control in the Properties window.

Once you have the control appearance you wish, drag a SqlDataSourceControl onto the Design surface as well. Set the SqlDataSourceControl's properties to the following:

ConnectionString: server='localhost'; trusted_connection=true; 
   Database='Northwind'
SelectCommand: Select * From Suppliers

Highlight the MxDataGrid control and change the following properties:

AllowPaging: True
AllowSorting: True
DataSourceControlID: SqlDataSourceControl1
PageSize: 4

After these properties are set, compile and run the page. Figure 5 illustrates what is returned in the browser.

Aa479004.aspnet-newsrvrcntrls-webmatrix-05(en-us,MSDN.10).gif

Figure 5. Using MxDataGrid to sort and page data from a SQL Server database

From this example, you will notice a few things—all of them quite cool. First off, to provide the capability of paging and sorting, you didn't need to type any code for this. You simply had to change the values of two properties, and then paging and sorting was automatically enabled for you. The other item you should notice is that you didn't need to add MxDataGrid1.DataBind() to your code since this process is taken care of for you as well. All of these things add up to a tremendous time saver.

The grid of data that is displayed in the browser from this control allows the user to click one of the column headings to sort the contents in the grid. The user is also able to page through the records by clicking the arrows at the bottom of the grid. Just like the DataGrid control, you can easily control and manipulate how these items are displayed and function by changing the control's properties.

Now let's use the same controls and turn on editing capabilities within the grid for the end user. This is one of those functions that would have normally taken quite some time to program yourself in the past using just the DataGrid control, but now it is quite easy to do when you are using the MxDataGrid server control.

To do this, you will need to change just a couple of properties within the MxDataGrid server control. The first change is to the Fields property. Highlight the MxDataGrid control, and then click the button next to the Fields property in the Properties window of the Web Matrix. This is shown in Figure 6.

Aa479004.aspnet-newsrvrcntrls-webmatrix-06(en-us,MSDN.10).gif

Figure 6. Changing the Fields property of the MxDataGrid control

Clicking this button will open the MxDataGridField Collection Editor. This is shown here in Figure 7.

Aa479004.aspnet-newsrvrcntrls-webmatrix-07(en-us,MSDN.10).gif

Figure 7. MxDataGridField Collection Editor

The MxDataGridField Collection Editor will allow you to easily add and modify columns that will appear in your grid. In this case, we will want to add a column that will allow the user to edit the contents of a particular row within the grid directly in the browser.

To do this, click the down arrow next to the Add button in the dialog. This will give you a short list of available column types that you can add to the grid. Select EditCommandField.

Once you have done this, you will notice that the EditCommandField column is added to the list of members in the Members section of the dialog, and its properties will be displayed in the EditCommandField Properties section. Give this new column the following property values:

ButtonType: PushButton
CancelText: Cancel
EditText: Edit
UpdateText: Update

Once these values are in place, click OK. You will notice that Edit push buttons have appeared in your grid on the design surface.

In addition to the Fields property, give the following properties these listed values:

DataKeyField: SupplierID
DataMember: Suppliers

Next, highlight the SqlDataSourceControl and make sure that AutoGenerateDeleteCommand, AutoGenerateInsertCommand and AutoGenerateUpdateCommand are all set to True (they should be already).

Once this is all in place, press F5 to compile and run the page. Not only will you have a grid of information that you can easily sort and page through, but you will also have an Edit button at the beginning of each row in the grid.

Clicking Edit will change the row so that you can easily edit the contents of the row. This is shown here in Figure 8.

Aa479004.aspnet-newsrvrcntrls-webmatrix-08(en-us,MSDN.10).gif

Figure 8. Editing the contents of a row

To test it out, change some of the values of the row and then click Update. This will automatically record these changes to the row directly in SQL Server.

Using the New Web Matrix Server Controls in Visual Studio .NET

You don't have to use the ASP.NET Web Matrix in order to use these controls. You can import them into Visual Studio .NET.

A server control is a server control, whether it is from Microsoft or whether it is a custom-built server control done by you. In any case, you can easily import these controls into Visual Studio .NET so that you can use them within any ASP.NET projects that you might build with this IDE.

To do this, open up Visual Studio .NET 2003 (you can also do this with Visual Studio .NET 2002) and create a new ASP.NET Web Application project in the language of your choice. Then open the Toolbox tab where you want these new controls to appear. For instance, if you want the three new Web Matrix server controls to appear in the Web Forms section of the Toolbox like the other Web server controls, then open this tab in the Toolbox. For myself, I created a new tab called "Custom Controls". I did this by right-clicking the Toolbox and choosing Add Tab. This then allows you to assign a name to your new tab.

With this new tab open, right-click on the Toolbox within the area of the open tab, and then click Add/Remove Items. You will then be presented with the Customize Toolbox dialog and you will want to add a reference to the Web Matrix DLL. To do this, click the Browse button within the dialog box and find the Microsoft.Matrix.Framework DLL. You will find this at C:\Program Files\Microsoft ASP.NET Web Matrix\v0.6.812\Framework\Microsoft.Matrix.Framework.dll. Highlight this DLL and then click Open.

Once you have done this, you will now notice that these new controls are listed in the general list of components displayed in the Customize Toolbox dialog. Click OK to have these new controls appear in the Visual Studio .NET toolbox.

Also note that if you wanted to return your Visual Studio .NET toolbox to how it originally was when you first installed it, all you have to do is open the Customize Toolbox dialog again and click the Reset button. This will remove the recently added Web Matrix controls from the Toolbox.

Now that you have these three new Web server controls in your Visual Studio .NET Toolbox, you can use them just as you would if you were using the ASP.NET Web Matrix. For instance, you can use the examples from above in Visual Studio .NET, but instead, you would do any binding in your code-behind instead of doing it inline.

In addition to these new Web server controls, you can also import the new HTML server controls that are offered in the ASP.NET Web Matrix. You might have noticed that when you made reference to the Microsoft.Matrix.Framework DLL that there was no indication that you were also making reference to the new HTML server controls that the Web Matrix offers. The reason for this is because you weren't. The HTML server controls are nothing more than HTML. They are not associated with any particular DLL and are easy to import into Visual Studio .NET.

To do this, have Visual Studio .NET open so that the HTML tab of the Toolbox is open and visible. Then open the ASP.NET Web Matrix so that this IDE is on top of Visual Studio .NET, but so that the HTML sections of each IDE's toolbox is visible (shown here in Figure 9). Once the windows are in place, simply drag the controls that you want to use in Visual Studio .NET from one toolbox to another.

Aa479004.aspnet-newsrvrcntrls-webmatrix-11(en-us,MSDN.10).gif

Figure 9. Importing ASP.NET Web Matrix HTML server controls into Visual Studio .NET

You will notice that after you have dragged one of these controls from the Web Matrix to Visual Studio .NET, that it will be called Markup Fragment. You will still need to right-click this new addition and rename it to the appropriate HTML server control.

Once this is complete, you can then use these new HTML server controls in Visual Studio .NET as you would any other HTML server control. For instance, when using the GroupBox control, drag it onto a Visual Studio .NET design surface, right-click it and then click Run As Server Control. You will then have the same programmatic access to the control just as you would any other HTML server control provided by Visual Studio .NET.

Summary

The ASP.NET Web Matrix is an outstanding new Web development tool that allows you to quickly and easily build your ASP.NET pages. There are a lot of new features in this tool that you will not find in Visual Studio .NET, but by taking a couple of easy steps, you can easily bring some of these new features into the Visual Studio .NET IDE.

The ASP.NET Web Matrix also provides all .NET developers, whether they are using the Web Matrix for their ASP.NET development or not, a series of new server controls. These new server controls—SqlDataSourceControl, AccessDataSourceControl and MxDataGrid—are easily imported into other IDEs to use in your ASP.NET projects.

About the Author

Bill Evjen is an active proponent of .NET technologies and community-based learning initiatives for .NET. He is a technical director for Reuters, the international news and financial services company based in St. Louis, Missouri. Bill is the founder and executive director of the International .NET Association (INETA), which represents more than 100,000 members worldwide. Bill is also an author and speaker and has written such books as ASP.NET Professional Secrets, XML Web Services for ASP.NET, Web Services Enhancements, and the Visual Basic .NET Bible (all from Wiley).

Show:
© 2014 Microsoft