<Asp:Sqldatasource Id= S1 Runat= Server Datasourcemode= Dataset

ASP.NET 2.01

<HTML>

<asp:SqlDataSource id="s1" runat="server" DataSourceMode="DataSet"

ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" UpdateCommand="Update zzz SET name=@name WHERE vno=@vno" />

<asp:GridView runat="server" AutoGenerateColumns="false" DataKeyNames="vno" AutoGenerateEditButton="True"

DataSourceID="s1">

<asp:BoundField HeaderText="Voucher" DataField="vno" />

<asp:BoundField HeaderText="first name" DataField="name" />

</columns>

</asp:GridView>

</FORM>

</HTML>

The above program updates data in the zzz table. We now set to true the AutoGenerateEditButton property that shows the edit link along with every record. We also create the columns by hand as we may not want the user to change all fields. When we run the above program and click on the Edit link, we now get two links update and cancel. Choosing update changes the value in the table. We tried to make the field vno readonly but this in turn undefined the variable vno. Thus we should make changes to only the name field and not the vno field. The DataSourceMode can take two values only, dataset or DataReader. This property decides who the select statement does its job. By specifying DataSet, the data is read into a DataSet object like we do when we wrote C#code. Here we are allowed to page and sort. Choosing DataReader we get a read only forward only cursor.

Grid View and more

<html>

<asp:GridView ID="GridView1" runat="server" DataSourceID="s1" AllowPaging=true PageSize=5>

</asp:GridView>

<asp:SqlDataSource ID="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind" SelectCommand="SELECT * FROM customers" />

</form>

</body>

</html>

The PageSize property allows us to decide the size of the page or number of records that get displayed on a single page. By default we get a series of number at the bottom of the screen that allows us to jump to any page. If we use the PageSettings tag we can decide the format of the links that allow us to navigate. The Mode property now gives us four links that lets us move to the first , last or next or previous pages. We can replace these links with a picture instead. We have four options for the mode property numeric, the default, NumericFirstLast or NextPrevious. File tips.gif is present in c:\winnt\web.

<HTML>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" >

</asp:GridView>

</FORM>

</HTML>

The row style tag allows us to change the attributes of each and every row. We change the backcolor and forecolor and font-italic properties. We then use the alternatinggrow style tag to change the properties of every other row of the grid view. Thus every even row will be DarkBlue and every odd row will be red.

<HTML>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" backimageurl="tips.gif" >

</asp:GridView>

</FORM>

</HTML>

Do not try this program as you will not see any data, only multiple tips. The backimageurl property allows us a display a background image in the whole grid view. If the image is smaller than the gridview, its gets repeated. Wecould have a logo of our company displayed as the back ground.

<HTML>

<head>

<style>

.c1

{

font: 12pt verdana;

color:orange;

}

.c2

{

font: 18pt times;

color:blue;

}

</style>

void abc(Object o, EventArgs e)

{

g1.CssClass=((g1.CssClass=="c1")?"c2":"c1");

b1.CssClass=((b1.CssClass=="c1")?"c2":"c1");

}

</script>

</head>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" id="g1" CssClass="c2" >

</asp:GridView>

<p>

<asp:button Text="Click" OnClick="abc" runat="server" />

</FORM>

</HTML>

A cascading style sheet or a .css file is a file that contains things like the color or font that the html page should use. We use css files to maintain consistency in the appearance of the page. We define words or styles using the style html tag. We have created two style sheets c1 and c2 and they must begin with a dot. In the Grid view like all controls has a CssClass property where we specify the style sheet class. We use c2 and we get a blue color grid view text. We next click on the button which uses the ?: operator or the if statement to toggle the style sheet class from c1 to c2 and vice versa. This is how we change the appearance of the grid view. Like we said the button and all classes have a cssClass property and this is how we can give a consistent look and feel to the entire page.

Our button control becomes a input tag with the class property. This only means that style sheets is a html or a browser concept. Nothing to do with asp.net 2.0.

<HTML>

<head>

void abc(Object o, EventArgs e)

{

int i = g1.SelectedIndex;

l.Text = "You choose record " + i.ToString() + " whoose value is " + g1.DataKeys[i].Value.ToString();

}

</script>

</head>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" id="g1" datakeynames="vno" onselectedindexchanged="abc" autogenerateselectbutton="true" >

</asp:GridView>

<p>

<asp:label runat="server" id="l" />

</FORM>

</HTML>

The grid view allows us to control every aspect of its operations. If we set the property autogenerateselectbutton as true we will see a list of links with the wordselect oneach and every record. The onselectedindexchanged property will now call a functionabc each time we select the link select. In this function abc we can access the property SelectedIndex which is another word for record number. The first row has record number 0, then 1 , 2 etc. The array DataKeys stores all the primary key values or the datakeynames fileds. Thus we will also see the value of the vno column also. The selectedrowstyle tag changes the attributes of the row we have selected. A visual aid to tell us which row has been currently chosen.

<HTML>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" id="g1" AllowPaging=true PageSize=4 >

</asp:GridView>

<p>You are viewing Page <%= g1.PageIndex %> of <%= g1.PageCount %>

</FORM>

</HTML>

The Grid View control has two properties PageIndex that tells us which page we are viewing and PageCount that tells us how many pages we have. The PageIndex property starts from 0 so it is a good idea to add one to it. This is how we can create our own footer if we like.

<HTML>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" id="g1" AllowPaging=true PageSize=4 showfooter="true" >

</asp:GridView>

</FORM>

</HTML>

The header of a gridview shows up by default, the footer requires us to set the showfooter property to true. We use the tags FooterStyle, PagerStyle and HeaderStyle to set the colors of these sections. This is how we can control the look of every part of the gridview.

<HTML>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" id="g1" autogeneratecolumns="false" >

<asp:BoundField DataField="name" HeaderText="vijay" />

<asp:buttonfield buttontype="Button" headertext="Your name" text="mukhi"/>

</columns>

</asp:GridView>

</FORM>

</HTML>

The default for the grid view is that the select statement decides the column displayed. If we set the autogeneratecolumns property to false we get no columns at all in our display. The columns tag allows us to specify the columns we want to display in the order we want. The simplest tag is the BoundField where the DataField is the name of the field and Header text the header text. The button field gives us a button with the same static text.

<HTML>

void abc(Object o, GridViewRowEventArgs e)

{

if(e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Cells[1].Text = "<u<b>" + e.Row.Cells[1].Text + "</b</u>";

}

</script>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" id="g1" onrowdatabound="abc" >

</asp:GridView>

</FORM>

</HTML>

The onrowdatabound event makes sure that the function abc gets called before the row gets displayed. Thus if our table has 10 rows, abc will get called 10 times. This function also gets called before headers and footers get displayed. The GridViewRowEventArgs parameter e has an object row that stands for the current Row which is of type GridViewRow. The row type member can take 6 different types, DataRow like above, footer, header, pager, null row and separator. Thus we use an if statement so that weapply our changes to a valid row. Then the row object has an member Cells that is of type TableCellCollections and using these collections we can get at the individual cells or columns. We start always counting from 0 so that cells[1].text will represent the second column.

<HTML>

void abc(Object o, GridViewRowEventArgs e)

{

if(e.Row.RowType == DataControlRowType.DataRow)

{

int i = Int32.Parse(e.Row.Cells[0].Text);

if ( i >= 10)

e.Row.Cells[0].ForeColor = System.Drawing.Color.Red;

else

e.Row.BackColor = System.Drawing.Color.Blue;

}

</script>

<asp:SqlDataSource id="s1" runat="server" ConnectionString="server=localhost;uid=sa;pwd=;database=Northwind"

SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSourceID="s1" id="g1" onrowdatabound="abc" >

</asp:GridView>

</FORM>

</HTML>

We take flexibility a step further. We first convert our vno column to a number using the parse function. We then change the ForeColor property of the table cell to red of the first column to red if the vno field is less than 10. Else we change the color of the entire row to blue.

void abc(Object o, GridViewRowEventArgs e)

{

if(e.Row.RowType == DataControlRowType.DataRow)

{

int i = Int32.Parse(e.Row.Cells[0].Text);

if ( i >= 10)

e.Row.Cells[1].Text = "VM";

}

There is no stopping at what we can do. If the field vno is larger than 10 we replace the name field to my initials. Thus what gets displayed and how it gets displayed is all in our hands.

Caching a page

<%@ OutputCache Duration="20" VaryByParam="none" %>

void Page_Load(Object sender, System.EventArgs e)

{

l.Text = System.DateTime.Now.ToString();

}

</script>

<html>

<asp:label id="l" runat="server" />

</form>

</html>

Normally whenever we click on refresh. The system goes back to the server and re executes all our code. The DateTime.Now gives us a different value each time. Now however as we have set the duration to 20 seconds, we see the same page. Thus the page is given to us from the cache and not re executed. Only after 20 seconds will we see the date time change. Thus by keeping something the cache we get a faster response but may get stale data.

<%@ OutputCache CacheProfile="vijay" VaryByParam="none" %>

void Page_Load(Object sender, System.EventArgs e)

{

l.Text = System.DateTime.Now.ToString();

}

</script>

<html>

<asp:label id="l" runat="server" />

</form>

</body>

</html>

web.config

<?xml version="1.0"?>

<system.web>

</outputCacheProfiles>

</outputCacheSettings>

</caching>

</system.web>

</configuration>

As far as possible place all rules outside the aspx file. We create a cache profile called vijay and set the duration to 60 seconds and enable it in the web.config file. We use the cacheprofile keyword to refer to the cache called vijay. Now the tim will only change after 60 seconds of pressing refresh. The idea is to create multiple such profiles in our config file and let application access these profiles.

<%@ OutputCache duration=30 VaryByParam ="t1" %>

void Page_Load(Object sender, System.EventArgs e)

{

l.Text = "l " + System.DateTime.Now.ToString();

l1.Text = "l1 " + System.DateTime.Now.ToString();

}

void pqr(object o, EventArgs e)

{

l.BackColor = System.Drawing.Color.FromName(t1.Text);

l1.BackColor = System.Drawing.Color.FromName(t2.Text);

}

</script>

<html>

<asp:label id="l" runat="server" />

<p>

<asp:label id="l1" runat="server" />

<p>

<asp:TextBox id="t1" runat="server" />

<p>

<asp:TextBox id="t2" runat="server" />

<p>

<asp:Button id="b2" Text="Button2" runat="server" OnClick="pqr" />

</form>

</body>

</html>

May be a big example but extremely simple. We have two text boxes and one button. In Page_Load we set the two labels l and l1 to the time. On the button click we set the two colors of the labels which we write in the two text boxes. We use the function FromName to convert a text name like red into a color. If there was no caching each time we clicked on the button the background color of the labels will change. We have set the duration to 30 seconds and the VaryByParam property is set to t1and not to control t2. Thos means that each time change the color or text in the first control t1 and click on the button, the color of thelabel changes. However if we change the text of the second text box and click on the button, not only does the color not change at all but the color already present is displayed in the text box overwriting the color we wrote . Thus we have the choice of caching some values and not caching other values.

&lt;Asp:Sqldatasource Id= S1 Runat= Server Datasourcemode= Dataset

<Asp:Sqldatasource Id= S1 Runat= Server Datasourcemode= Dataset