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.
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.
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.
<%@ 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>
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.
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.
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;
}
}
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.
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
<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>
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.
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.
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;
}
}
<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>
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
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;
}
}
See how the pannel visibility is controlled programmatically.
See how parameters are passed to the select statement.
<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.
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
satya - Wednesday, May 16, 2007 10:56:06 PM
How to create a button to submit a form
<asp:Button text="Search"
OnClick="searchButtonId_Click"
ID="searchButtonId" runat="server"/>
satya - Wednesday, May 16, 2007 10:56:55 PM
server side signature for the call back function
protected void searchButtonId_Click(Object obj, EventArgs e)
{
//this is the case of postback
this.setCompoundQueryValues(cq, wellGrid);
this.wellGrid.DataSource = getAspireDataset();
this.wellGrid.DataBind();
}