Displaying Text Fields

This basic example displays several fields from a database table on a web page.  An HTML layout page is created with one FieldValue code generation tag for each database field to be displayed.  This example illustrates:

1. How the FieldValue tag – one of the most-used code generation tags – is used to display data at any location within your web page.

2. How several related FieldValue tags are bound to their underlying data sources – a single database table in this example.

3. How the Record code generation tag is used to group related FieldValue tags together for the purpose of displaying multiple fields from a single selected database record.

Description

Generated Page

Layout Page File

 

<div align="center">

     <GEN:Record Name="Product">

     <table cellpadding="5" style="border-collapse: collapse" border="1"

              bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0">

          <tr style="font-family:Verdana; font-size:10px">

              <td align="right">Product Id:</td>

              <td style="font-weight: bold">

                   <GEN:FieldValue Name="ProductId" />

              </td>

          </tr>

          <tr style="font-family:Verdana; font-size:10px">

              <td align="right">Product Name:</td>

              <td style="font-weight: bold">

                   <GEN:FieldValue Name="ProductName" />

              </td>

          </tr>

          <tr style="font-family:Verdana; font-size:10px">

              <td align="right">Unit Price:</td>

              <td style="font-weight: bold">

                   <GEN:FieldValue Name="UnitPrice" />

              </td>

          </tr>

          <tr style="font-family:Verdana; font-size:10px">

              <td align="right">Units in Stock:</td>

              <td style="font-weight: bold">

                   <GEN:FieldValue Name="UnitsInStock" />

              </td>

          </tr>

     </table>

     </GEN:Record>

</div>

Procedure

Step 1:  Set the properties for the Product tag.

The ID of the product will be supplied on the URL as a value for the Product query string parameter.

Step 2:  Set the data source properties for each of the FieldValue tags to their respective fields by selecting the table and field name.

For the individual FieldValue tags, select each of the ProductID, ProductName, UnitPrice and UnitsInStock and select the appropriate database field from the Products table to display.  If the name of the code generation tag is the same as the field name of the enclosing record, the Page Properties dialog automatically selects the field as a convenience.  The automatic selection occurs when you select each of the code generation tags.

Step 3:  Build the application.

Step 4:  Open a new browser and enter this URL to display the page:

http://localhost/Tutorial/Tutorial%20Pages/DisplayRecord.aspx?Product=1

Product is the query string parameter and the value 1 is the primary key value of the specific Product record to be selected and displayed.