List Views

Dynamic Data in Webpages

Building on the previous tutorial that established two new web forms, we will here use one of those to extract a list of records for a given table.

The worked example in this tutorial uses 'SiteList.aspx' as a blank web form based on a master page. The result will be a list of all the sites stored in the database.

Following on from the last tutorial where we created a web form called 'SiteList.aspx' within the 'Restricted' folder. We will be working on that web form in this tutorial, but you may use any new web form based on a master page.

Enter the markup below within the content area.

Following Bootstrap conventions, we establish embedded sections for container, row and then the columns 'col-md-8' and 'col-md-4' (all columns in a row should add up to 12).

We have also set a h3 heading in the left column stating 'List View'.

<section class="container">
  <section class="row">
    <!-- LIST VIEW column -->
    <section class="col-md-8">
      <h3>List View</h3>

    </section>

    <!-- SEARCH column -->
    <section class="col-md-4">

    </section>
  </section>
</section>

 

Now add the ListView control. This can be either by scripting it directly or by dragging it in from the Toolbox (found under 'Data').

Customise the ListView control firstly by setting its ID to 'LvSiteList'.

Secondly, start typing 'OnItemCommand' before closing arrow bracket '>'. Intellisense gives a list of possible events and you may select the correct one from the list.

Having the 'OnItemCommand' be assigned a value will generate another Intellisense prompt, this time to '<Create New Event>'. Select it.

A command name will be automatically generated using the ID and event, i.e. 'LvSiteList_ItemCommand'.

The code-behind tab (SiteList.aspx.cs) should open to show the target of this event.

A new subroutine has been produced in the code-behind and linked to the event you just created.

From within the code-behind, add the following code to 'LvSiteList_ItemCommand' in order to redirect the user to SiteView.aspx, as this will be our single-record view.

There are a few components here in addition to the file location of the redirect. For one, we add '?id=' to the end of the URL before appending the Command Argument.

We will soon configure the Command Argument to pass the 'SiteID' off the record being selected. This will be accessible as a parameter in the SiteView.aspx web page.

Response.Redirect("~/Restricted/SiteView.aspx?id=" + e.CommandArgument.ToString());

We will need to access our database soon and will need to import our Data Access Layer (DAL).

Under all the other 'using' statements at the top of the code-behind, type 'using' followed by the name of the solution and a period. Intellisense should be used to locate your DAL, though it may start with an underscore (_).

Note that file names that use a dash(-) may have been replaced by an underscore (_), i.e. 'DAL-AMS' becomes 'DAL_AMS'.

You should have something like the code shown below:

using AssetManagementSystem._DAL_AMSTableAdapters;

Your code-behind will likely look like this:

Below is the DataSet we previously created: 'DAL-AMS.xsd'

You need to make a note of the TableAdapter name that we will be using for the SiteList, i.e. 'SiteTableAdapter'.

Back in your code-behind, we can create an instance of this TableAdapter to use on this web page.

We can then link the DataSource of our ListView to this TableAdapter.

A DataBind() call will action this update to the ListView.

The code you need to add is below:

SiteTableAdapter siteAdapter = new SiteTableAdapter();
LvSiteList.DataSource = siteAdapter.Get(sID, sName, sStatus, sAddress1, sAddress2, sCity, sPostCode);
LvSiteList.DataBind();

Your code-behind will now look like this:

Going back to our markup view (HTML and ASP script) we can continue with the ListView interface. We will use 'LayoutTemplate' tags to encase a table header-row giving titles to all the columns we will display. A placeholder will signal where the returned items (site records) will be placed.

Notice that the <table> tag has been allocated a suitable ID and Bootstrap classes (table and table-hover). You may adjust these as you see fit.

Create the LayoutTemplate as shown below:

<LayoutTemplate>
  <table runat="server" id="tblEquipment" class="table table-hover">
    <tr runat="server" >
      <th>Site ID</th>
      <th>Site Name</th>
      <th>Status</th>
      <th>Address Line 1</th>
      <th>Address Line 2</th>
      <th>City</th>
      <th>Post Code</th>
      <th>View</th>
    </tr>
    <tr runat="server" id="itemPlaceholder" ></tr>
  </table>
</LayoutTemplate>

To dynamically populate the table with our chosen data we will use an ItemTemplate.

The <td> cells have their 'text' property set to '<%#Eval( "fieldname" ) %>', where the fieldname is an exact column name from the data source table.

The last cell contains a LinkButton that will appear as hyperlinked texted when run in a browser. The CommandArgument is set to the record's ID field so we know which row the user has clicked on. The code to deal with this button will come later. 

<ItemTemplate>
  <tr runat="server">
    <td><asp:Label ID="lblSiteID" runat="server" Text='<%#Eval("[SiteID]") %>' /></td>
    <td><asp:Label ID="lblSiteName" runat="server" Text='<%#Eval("[SiteName]") %>' /></td>
    <td><asp:Label ID="lblStatus" runat="server" Text='<%#Eval("[Status]") %>' /></td>
    <td><asp:Label ID="lblAddress1" runat="server" Text='<%#Eval("[Address 1]") %>' /></td>
    <td><asp:Label ID="lblAddress2" runat="server" Text='<%#Eval("[Address 2]") %>' /></td>
    <td><asp:Label ID="lblCity" runat="server" Text='<%#Eval("[City]") %>' /></td>
    <td><asp:Label ID="lblPostCode" runat="server" Text='<%#Eval("[PostCode]") %>' /></td>
    <td><asp:LinkButton ID="btnView" runat="server" Text="View" CommandName="View" CommandArgument='<%#Eval("SiteID") %>'/></td>
  </tr>
</ItemTemplate>

Note, with Server Explorer open with your database you can check the field names are correctly typed as the 'Eval' parameters.

This assumes you didn't create alternative names when setting up the TableAdapter (data set).

Your markup should now look like this:

Ensure you have some test data in your Site table, and then Run the web page in a browser of your choice.

You may be prompted to login, afterwards you should be directed to your 'Site List' page. Below is an example of what you should see.

Clicking on a 'View' hyperlink should open the 'Site View' page (which is currently blank).

The page's URL should include the text '?id=' followed by the Site ID of the corresponding record. Below demonstrates the page after the first 'View' link was followed, showing '?id=ALPH' in the URL.

There we have it, a web page that returns a list of records from a predefined query.

You may like to get stuck straight into the form view, or we can add a filter and search to the current page.

Dynamic Data in Webpages