Introducing ASP.NET Web Matrix
Pages: 1, 2, 3, 4, 5

Building a Web Application Using ASP.NET Web Matrix

Let's now build a Web application that consumes Amazon's Web service. For a more detailed discussion of Amazon's Web service, see Wei Meng Lee's "Using Amazon's New Web Services."

When the ASP.NET Web Matrix is launched, it will prompt you to add a new file. My intention is to use a DataGrid to bind the results returned from the Amazon's Web service. Hence I selected the Data Pages category and chose Data Report with Paging. Name the page Amazon.aspx (Figure 3).

Figure 3. Creating a new data page

By default, the page will contain the DataGrid control (and some HTML controls):

Figure 4. Default controls in Data Page

Like Visual Studio .NET, ASP.NET Web Matrix allows you to format the layout of the DataGrid control. To do so, simply click on the control and select AutoFormat in the Properties window:

Figure 5. Selecting the AutoFormat feature

Select a scheme that you like. After this, you are going to modify our DataGrid control by editing the HTML (select the DataGrid control and press Ctrl-T):

Figure 6. Modifying the DataGrid control

Insert the codes in bold:

<asp:datagrid id="DataGrid1" runat="server" 
   DataKeyField="No"
   AllowPaging="True" 
   PageSize="5" 
   OnPageIndexChanged="DataGrid_Page" 
   BackColor="#DEBA84" 
   CellPadding="3" 
   CellSpacing="2" 
   width="80%" 
   OnSelectedIndexChanged=
     "DataGrid1_SelectedIndexChanged"
   BorderStyle="None" 
   BorderWidth="1px" 
   BorderColor="#DEBA84">
  <FooterStyle forecolor="#8C4510" 
               backcolor="#F7DFB5">
  </FooterStyle>
  <HeaderStyle font-bold="True" 
               forecolor="White" 
               backcolor="#A55129">
  </HeaderStyle>
  <PagerStyle horizontalalign="Center" 
              forecolor="#8C4510" 
              mode="NumericPages">
  </PagerStyle>
  <SelectedItemStyle font-bold="True" 
                     forecolor="White" 
                     backcolor="#738A9C">
  </SelectedItemStyle>
  <ItemStyle forecolor="#8C4510" 
             backcolor="#FFF7E7">
  </ItemStyle>
  <Columns>
    <asp:buttoncolumn text="Show Details" 
           commandname="Select" 
           ItemStyle-Font-Bold="true" 
           ItemStyle-Font-Size="smaller">
    </asp:buttoncolumn>
  </Columns>
</asp:datagrid>

Pages: 1, 2, 3, 4, 5

Next Page