ASP.NET 2.01 <HTML> <FORM runat="server"> <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" />

bubblemessengerSecurity

Nov 5, 2013 (3 years and 7 months ago)

98 views

ASP.NET 2.01


<HTML>

<FORM runat="server">

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


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


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

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


DataSourceID="s1">

<columns>

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

<asp:BoundField Hea
derText="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 t
he 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
spec
ifying 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>

<form runat="server">

hi

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

<PagerSettings Mode="NextPreviousFirstLast" FirstPageImageUrl="tips.gif" />

</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 bo
ttom 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>

<FORM runat="server">

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


SelectCommand="SELECT * FROM zzz" />

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

<rowstyle backcolor="LightCyan" forecolor="DarkBlue" font
-
italic="true"/>

<alter
natingrowstyle backcolor="PaleTurquoise" forecolor="Red" font
-
italic="false"/>

</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>

<FORM runat="server">

<asp:SqlDataSource id="s1" runat="server"
ConnectionS
tring="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>

<script language="C#" runat="server">

void abc(Object o, EventArgs e)

{

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

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

}

</script>

</head>

<FORM runat="server">

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


SelectCommand="SELECT * FROM zzz" />

<asp:GridView runat="server" DataSource
ID="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 w
here 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 app
earance 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.


<input type="submit" name="b1" value="Click" id="b1" class="c1" />


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>

<script language="C#" runat="server">

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>

<FORM runat="server">

<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" >

<selectedrowstyle backcolor="blue" forecolor="red" />

</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. T
he 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. T
he 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>

<FORM runat="server">

<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 h
ow 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>

<FORM runat="server">

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


SelectCommand="SELECT * FROM zzz" />

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

<FooterStyle ForeColor="Black" BackColor="red"></FooterStyle>

<Pager
Style ForeColor="Blue" BackColor="yellow"></PagerStyle>

<HeaderStyle ForeColor="Green" BackColor="Pink"></HeaderStyle>



</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>

<FORM runat="server">

<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" >

<columns>

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

<asp:b
uttonfield 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 f
ield gives us a button with the same static text.


<HTML>

<script runat="server" language="c#">

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>

<FORM runat="server">

<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" onrow
databound="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 heade
rs 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 separ
ator. 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 f
rom 0 so that cells[1].text will represent the second
column.


<HTML>

<script runat="server" language="c#">

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>

<FORM runat="server">

<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 fun
ction. 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 == DataCon
trolRowType.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 an
d how it gets displayed is all in our
hands.


Caching a page

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

<script language="c#" runat="server">

void Page_Load(Object sender, System.EventArgs e)

{

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

}

</script>

<html>

<form runat="server">

<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" %>

<script language="c#" runat="server">

void Page_Load(Object sender, System.EventArgs e)

{

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

}

</script>

<html>

<form id="form1" runat="server">

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

</form>

</body>

</html>


web.config

<?xml version="1.0"?>

<configuration>


<system.web>

<caching>

<outputCacheSettings>


<outputCacheProfiles>


<add name="vijay" enabled="true" duration="60"/>


</outputCac
heProfiles>

</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 dura
tion=30 VaryByParam ="t1" %>

<script language="c#" runat="server">

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>

<form id="form1" runat="server">

<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 clicke
d
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.