Your First ASP

Your First ASP.NET Page

Using the Online Control Gallery

ASP.NET Web Matrix includes hooks to the ASP.NET Online Server Control Gallery. The control gallery is a directory of ASP.NET server controls that you can use in your applications. This gallery is frequently updated -- so check back often to find the new controls to download and use within your applications.

In this walkthrough, you will add a Custom control from the Online Component Gallery to a new ASP.NET page.

Open ASP.NET Web Matrix. You will see the New File dialog box appear.
Select (General) from the Templates pane.
Select the ASP.NET Page template.
Type a file path in the Location box.
Type myFirstCustomPage.aspx in the Filename box.
Select Visual Basic in the Language drop-down box.
Click OK. The myFirstCustomPage.aspx file will open in Design view.
Click the Custom Controls tab in the Toolbox on the left-hand side of the tool.
Right-click on the Toolbox to add a custom control. You can add a custom control by browsing the local workstation or by browsing the Online Component Gallery.
Select the Add Online Toolbox Components option. You will see the Component Gallery dialog box appear. This dialog's content is populated by accessing an XML Web Service running on the www.asp.net website.
You can search for components in the Online Component Gallery by Category (default) or Keyword.
Select the Data & XML Controls item in the Categories list view. You will see all Data & XML Controls appear in the results grid.
Select the XMLEditGrid control in the results grid. You will see a description on the control appear in the box below the results grid. The XMLEditGrid control binds an XML File to a DataGrid.
Click Install.
ASP.NET Web Matrix will prompt you with a question dialog box. Click Yes to install the online component into the Global Assembly Cache (GAC).
You will then see the XMLEditGrid appear in the Custom Controls toolbox. This server control has now been downloaded and installed on your machine -- allowing you to use it on any ASP.NET page.
From the Custom Controls tab in the Toolbox, drag the XMLEditGrid control onto the ASP.NET page.
Create a new XML File to bind against the XMLEditGrid:
1. Select New from the File menu.
2. Select (General) from the Templates pane.
3. Select the XML File template.
4. Type a file path in the Location box.
5. Type myFirstXMLFile.xml in the Filename box.
  Note The file extension for an ASP.NET page is aspx. The file extenstion for an XML File is xml.
6. Click OK. The myFirstXMLFile.xml file will open.
7. Add XML elements and XML attributes to myFirstXMLFile.xml:
```
<?xml version="1.0" encoding="utf-8" ?>
<Orders>
    <Order>
        <ID>1</ID>
        <OrderDate>4/23/2002</OrderDate>
        <CustomerName>Bob Smith</CustomerName>
    </Order>
    <Order>
        <ID>2</ID>
        <OrderDate>5/12/2002</OrderDate>
        <CustomerName>Sally Jones</CustomerName>
    </Order>	
</Orders>
```
8. Save and close the file.
Select the Design tab of the ASP.NET Page and select the XMLEditGrid control.
Select the XMLFile property in the Properties window.
Set the XMLFile property of the XMLEditGrid to myFirstXMLFile.xml. This property binds the XML File to the XMLEditGrid.
Select the XMLEditGrid control.
Click the Auto Format link at the bottom of the Properties window.
The XMLEditGrid Auto Format dialog box will appear. This dialog box allows you to select from a predefined set of colors, border styles, and other settings (referred to as a scheme) and apply them to the XMLEditGrid control.
Select the Simple 1 option in the scheme ListBox. When you select a scheme, the scheme's settings are applied to properties of the control. Note the preview of how the XMLEditGrid will look with the scheme applied.
Click OK.
Save and run the ASP.NET page.
Your ASP.NET page will automatically appear in a new instance of your Web browser. The XMLEditGrid displays a row for each of the Order nodes in the myFirstXMLFile.xml file.
Click the Add new item link.
You will see a new row at the bottom of the XMLEditGrid.
Type 3 in the ID column, 6/1/2002 in the OrderDate column, and John Doe in the CustomerName column.
Click the Save New Item button. This operation will save the contents of your edit back to the XML file on your web server. Note that this operation does require that the web server has file security permissions to write to that file (otherwise you will see a security exception occur when you hit the save button). By default ASP.NET applications running under IIS do not have file write permissions (you need to expliclty grant the "ASPNET" account write access to a file).
Open myFirstXMLFile.xml.

You will see a new row with an OrderID of 3 in the XML File:

<?xml version="1.0" encoding="utf-8" ?>
<Orders>
    <Order>
        <ID>1</ID>
        <OrderDate>4/23/2002</OrderDate>
        <CustomerName>Bob Smith</CustomerName>
    </Order>
    <Order>
        <ID>2</ID>
        <OrderDate>5/12/2002</OrderDate>
        <CustomerName>Sally Jones</CustomerName>
    </Order>
    <Order>
        <ID>3</ID>
        <OrderDate>6/1/2002</OrderDate>
        <CustomerName>John Doe</CustomerName>
    </Order>	
</Orders>

Close the Web browser instance.

Next Step >>