16-May-07 (Created: 16-May-07) | More in 'CS-dotnet'

Annotated asp.net 101 for the smarts

Introduction

For an experienced html web programmer it shoudl be really quick to start writing code in any framework as the concepts are similar. This article will give you a quick start to start developing web pages while highlighting the important elements with out fluff. This information is distilled from a number of web sources and also books.

Prerequisites

it is assumed that you are familiar with the general idea of asp.net where html controls are represented as server side control objects. The web page with an extension of .aspx will contain the placement and configuration of these control. The codebehind file contains the manipulating logic for these controls.

This exercise

The goal of this exercise is to display the output of a select statement in a data grid. Make one of the columns hyperlinked so that one can see the details in a separate web page. The deliverables are two aspx pages with their respective code behind files.

Basic structure of the aspx page


<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="well-locations.aspx.cs" Inherits="well_locations" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="wellGrid" runat="server">
        </asp:GridView>
    
    </div>
    </form>
</body>
</html>

Annotated code

The page contains only one server side control called GridView. This is available in the data controls section of the visual studio 2005. You won't find it in server controls or html controls. It is odd that a visual control is placed under a data control.

The id of this control is available in the code behind file as an object whose type is GridView.

The "server" attribute on the xml nodes indicates to asp.net that these xml nodes should be processed on the server and also available to the page as objects where appropriate. If it is omitted those nodes are passed to the client.

Intent of this page

I want this page to paint all the columns coming back from the select statement in a table. At this point I dont want to pick and chose my columns yet.

The code behind file


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using com.ai.application.implementation;

public partial class well_locations : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.wellGrid.DataSource = getAspireDataset();
        this.wellGrid.DataBind();

    }
    private DataSet getAspireDataset()
    {
        Hashtable parms = new Hashtable();
        DataSet rtnDs = (DataSet)AppServices.getObject("/request/getwells2"
            , parms);
        //rtnDs.WriteXml(Console.Out, XmlWriteMode.IgnoreSchema);
        return rtnDs;

    }
}

Code annotation

Notice how a dataset is obtained from a data base utility and the outtput is directly bound to the grid control. The "getwells2" symbolic select statement is in the web.config file. 


<request name="GetWells2" 
type="com.ai.db.generic.GenCommandExecutorForDataSet,Aspire.Net" 
commandstring="select * from iit_well_loc" params="">
</request>

For now assume that this library executes the select statement and returns a dataset.

Some notes on web.config

It is odd that visual studio 2006 does not create web.config by default. Read this page for the details and how to create one

Second exercise: choosing the columns I want for the data view


<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="wellGrid"  AutoGenerateColumns="False" runat="server">
            <Columns>
                <asp:HyperLinkField 
                    DataTextField="well_nm" 
                    HeaderText="well name" 
                    DataNavigateUrlFields="well_loc_id" 
                    DataNavigateUrlFormatString="/test-website/well.aspx?wellid={0}" 
                    />
            </Columns>
        </asp:GridView>
    
    </div>
    </form>
</body>
</html>

Code annotation

I have removed some repetetive http headers.

The explicit columns needed are defined as children of the gridview xml node. The "columns" is a collection of columns which are indicated as children of the "columns" node. The type of columns that can go into a dataview are fixed and can be found in the documentation for data view.

Visual studio 2005 gives a nice visual way of disovering these things half way through. The rest can be found out from google with that starting point.

It is not only necessary to choose the columns I want but also necessary to turn off the rest of the columns. This is done by setting the autogeneratecolumns to false.

Understanding the hyperlinkfield column type

Read this article on understanding this columns

The datatextfield indicates the text of the hyper link. It points to a column in the select statement. The navigation url points to the structure of the url. The navigation url field indicates the column name to use as a substitute to the earlier string. It is a bit confusing but the above example is all there is to it.

The code behind


public partial class well_locations : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.wellGrid.DataSource = getAspireDataset();
        this.wellGrid.DataBind();

    }
    private DataSet getAspireDataset()
    {
        Hashtable parms = new Hashtable();
        DataSet rtnDs = (DataSet)AppServices.getObject("/request/getwells2"
            , parms);
        //rtnDs.WriteXml(Console.Out, XmlWriteMode.IgnoreSchema);
        return rtnDs;

    }
}

The detail page aspx


<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="dataGridPanel" runat="server" width="100%">
        <asp:GridView ID="wellGrid"  runat="server">
        </asp:GridView>
        </asp:Panel>
        
        <asp:Panel ID="noWellPanel" runat="server" width="100%">
            <h3>Sorry you need a wellid to get there</h3>
        </asp:Panel>     
        
    
    </div>
    </form>
</body>

Code Annotation

I have displayed only one row with all the columns.

I have put two panels. One panel is shown if there is not wellid passed. If it is passed then the grid panel is shown. The code behind should make this clear

Code behind


public partial class well_locations : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string wellid = Request["wellid"];
        if (wellid == null)
        {
            this.dataGridPanel.Visible = false;
            this.noWellPanel.Visible = true;
            return;
        }
        this.noWellPanel.Visible = false;
        this.dataGridPanel.Visible = true;
        this.wellGrid.DataSource = getAspireDataset(wellid);
        this.wellGrid.DataBind();

    }
    private DataSet getAspireDataset(string wellid)
    {
        int wellId = Convert.ToInt32(wellid);
        Hashtable parms = new Hashtable();
        parms["@wellid"] = wellId;
        DataSet rtnDs = (DataSet)AppServices.getObject("/request/getSingleWell"
            , parms);
        //rtnDs.WriteXml(Console.Out, XmlWriteMode.IgnoreSchema);
        return rtnDs;

    }
}

Code Annotation

See how the pannel visibility is controlled programmatically.

See how parameters are passed to the select statement.

The select definition


<request name="GetSingleWell" 
type="com.ai.db.generic.GenCommandExecutorForDataSet,Aspire.Net" 
commandstring="select * from iit_well_loc where well_loc_id=:wellid" params="@wellid">
</request>

Notice the syntax for the oracle binding parameters. It took me two hours to realize the problem.

References

1. Understanding oracle 10g

2. How can I add an existing project to a website solution in visual studio 2005

3. How to use hyperlinkedfield

5. what is the anatomy of an asp.net web page

6. My complete set of notes on dotnet