ProgramGood.Net - Events

ASP.NET Web Client Front End - Ch12

Dave Mateer — Wed, 04 Nov 2009 21:36:27 GMT

I know I've skipped a few chapters.. but hey.. who is perfect? Sometimes, it is good to get to some concrete results to give some pespective.

After months of playing with code (why do things always take longer than you think..?), and having a blast, I've now forgotton everything I know about asp.net. So time to do some spikes.

Here is a super simple reminder of asp.net syntax and simple events:

Default.aspx (\code\tddBook\SimpleAspSpike)

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebSite2testWebProj._Default" %>
<!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 id="Head1" runat="server">
<title>Untitled Page</title> </head> <body> <form id="form2" runat="server">
<div> hello world from html<br /> <%= "Hello
from asp.net" %> <br /> This is a
label: <asp:Label ID="label1" runat="server" />
<br /> The time is:
<%= System.DateTime.Now.ToLongTimeString()%> <br /> This is a
textbox: <asp:TextBox runat="server" ID="textbox1" /><br
/> A button: <asp:Button runat="server" ID="button1" Text="press
me" onclick="button1_Click" /><br
/> Label2 is here:
<asp:Label ID="label2" runat="server" /><br
/> asp.net uses viewstate.. so the button is just
a submit button, which then goes back to the server, refreshes the page with the new data in the
label2 label. <br /> </div> Autopostback is set in the
following DropDownList (server control)... makes contact with the server each time
an item is selected..
which we can use to wire up an event..onselectedindexchanged<br
/> <asp:DropDownList runat="server" ID="GreetList" AutoPostBack="true" onselectedindexchanged="GreetList_SelectedIndexChanged">
<asp:ListItem Value="no
one">No one</asp:ListItem> <asp:ListItem Value="world">World</asp:ListItem>
<asp:ListItem Value="universe">Universe</asp:ListItem>
</asp:DropDownList><br /> Label3: <asp:Label ID="label3" runat="server" />
<br /> </form> </body> </html>

And the Default.aspx.cs

using System; using System.Web.UI; namespace WebSite2testWebProj
{ public partial class _Default
: Page { protected void Page_Load(object sender,
EventArgs e) { Response.Write("Hello
from Page_Load in codebehind"); label1.Text = "Hello
from the codebehind into a label"; textbox1.Text = "Textbox
from codebehind"; } protected void button1_Click(object sender,
EventArgs e) { label2.Text = "button
pressed"; } protected void GreetList_SelectedIndexChanged(object sender,
EventArgs e) { label3.Text = "Hello,
" + GreetList.SelectedValue;
} } }

Ok, looking good so far.

Difference between CodeBehind and CodeFile

WebSite or Web Application Project?
http://www.dotnetspider.com/resources/1520-Difference-between-web-site-web-application.aspx

WebSite is really simple, with no project file. Web Application Project has a project file.

Found that remembering how to access databases isn't too easy:

looking at old project:
http://treasuresprint.blogspot.com

Realised I didn't put up the sourcecode at the time, and have managed to find it on my laptop:

Connecting to and displaying data from a DB very easily:

Deafult.aspx (\code\tddBook\DBConnectySpike)

<form
id="form1" runat="server">
<div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$
ConnectionStrings:TreasureConnectionString %>" SelectCommand="SELECT
[StuffId], [Description] FROM [Stuff]"></asp:SqlDataSource> <br
/> <br /> this is a
gridview&nbsp;<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="StuffId" DataSourceID="SqlDataSource1">
<Columns> <asp:BoundField DataField="StuffId" HeaderText="StuffId" InsertVisible="False" ReadOnly="True" SortExpression="StuffId" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
</Columns> </asp:GridView> <br /> this is a
datalist<br /> <br /> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate> <asp:Literal ID="Literal2" runat="server" Text="Description:"></asp:Literal>
<asp:Literal ID="Literal1" runat="server" Text='<%#
Eval("Description")
%>'></asp:Literal> </ItemTemplate> <EditItemTemplate> <asp:Literal
ID="Literal2" runat="server" Text="Description:"></asp:Literal>
<asp:TextBox ID="TextBox1" runat="server" Text='<%#
Eval("Description")
%>' Width="208px"></asp:TextBox>
</EditItemTemplate> </asp:DataList><br /> <br /> this is a
details view</div> <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4" DataKeyNames="StuffId" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Height="50px" Width="341px">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<CommandRowStyle BackColor="#D1DDF1" Font-Bold="True" />
<EditRowStyle BackColor="#2461BF" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<Fields> <asp:BoundField DataField="StuffId" HeaderText="StuffId" InsertVisible="False" ReadOnly="True" SortExpression="StuffId" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
</Fields> <FieldHeaderStyle BackColor="#DEE8F5" Font-Bold="True" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:DetailsView> <br /> <br /> </form>

And in the web.config:

<connectionStrings>
<add name="TreasureConnectionString" connectionString="Data
Source=localhost;Initial Catalog=Treasure;Persist Security Info=True;User ID=dave;Password=letmein" providerName="System.Data.SqlClient"/>
    </connectionStrings>

So it should come out like this:

Thoughts
ASP.NET offers some controls to make life 'easier' such as databinding, edit, deleting, sorting on the gridview: All pretty powerful for RAD, however for testable apps.. am not sure this is the way. Or perhaps other Grid controls like Telerik are better. Maybe best to Keep it Simple.

Ideally we want testable code, with a thin layer of UI code on top.

A
gridview with update <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$
ConnectionStrings:TreasureConnectionString %>" SelectCommand="SELECT
[StuffId], [Description] FROM [Stuff]" UpdateCommand="UPDATE
Stuff SET Description=@Description WHERE StuffID=@StuffID"> </asp:SqlDataSource>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataKeyNames="StuffId" AutoGenerateEditButton="true" DataSourceID="SqlDataSource2">
<Columns> <asp:BoundField DataField="StuffId" HeaderText="StuffId"/>
<asp:BoundField DataField="Description" HeaderText="Description"/>
</Columns> </asp:GridView>

And DropDownList / TextBox common usage:

This is all in the DB spike source code here:
DBConnectSpike.zip (15.17 KB)

Data Control Summary
http://quickstarts.asp.net/QuickStartv20/aspnet/doc/ctrlref/data/default.aspx

Gridview - the classic Grid..edit, delete, sort, page. Takes advantage of DataSource controls
DataList - items in a repeating list
DetailsView - typically used.. if a gridview item is selected, the detailsView is displayed to edit.
FormView - same as above but with no built in template.
Repeater - has no built in layout or styles. No column layout. No Edit/Del

Going through the SearchPage.aspx.. trying to get any of this application to compile. Have got source from book.. however.. good practise to chop code and and try and work through. Hmm - sometimes better to revert back to compiling code in source control.

This project is in need of refactoring... too complex currently. Would like to 'defactor' for simplicity, then put some patterns back in. Webservice would be first to go, and use POCOs. XSD definition for DTOs would go as well, with simple objects as definitions. DAL I'd like to take out Datasets and use a manual DAL.

Most important thing is to get it working. Good thing about this project so far, is that it is testable at every level.

Matrix Rain Effect in C# Console App

Dave Mateer — Wed, 25 Feb 2009 19:47:32 GMT

Thanks to the original author of the code (google m7tr1x)..

I had some great fun looking at the code, understanding how this effect works, and refactoring.

The original code is below.. I suggest scrolling down, and looking at the refactored code and pictures describing how the effect works.

Enjoy!

#define readkey using System; namespace m7tr1x
{ class Program
{ static void Main(string[
] args) { Console.Title = "tH3
M7tr1x 3ff3<t"; Console.ForegroundColor = ConsoleColor.DarkGreen;
Console.WindowLeft = Console.WindowTop = 0;
Console.WindowHeight = Console.BufferHeight = Console.LargestWindowHeight;
Console.WindowWidth = Console.BufferWidth = Console.LargestWindowWidth; #if readkey
Console.WriteLine("H1T
7NY K3Y T0 C0NT1NU3 =/"); Console.ReadKey(); #endif Console.CursorVisible = false; int width,
height; int[
] y; int[
] l; Initialize(out width, out height, out y, out l); int ms; while ( true )
{ DateTime t1 = DateTime.Now;
MatrixStep(width, height, y, l); ms = 10 - (int)(
(TimeSpan)( DateTime.Now - t1
) ).TotalMilliseconds; if (
ms > 0 ) System.Threading.Thread.Sleep(ms); if (
Console.KeyAvailable ) if (
Console.ReadKey().Key == ConsoleKey.F5 ) Initialize(out width, out height, out y, out l);
} } static bool thistime = false; private static void MatrixStep(int width, int height, int[
] y, int[
] l) { int x;
thistime = !thistime; for (
x = 0
; x < width ; ++x ) { if (
x % 11
== 10 ) { if (
!thistime ) continue;
Console.ForegroundColor = ConsoleColor.White;
} else {
Console.ForegroundColor = ConsoleColor.DarkGreen;
Console.SetCursorPosition(x, inBoxY(y[x] - 2 - (
l[x] / 40 * 2
), height)); Console.Write(R); Console.ForegroundColor = ConsoleColor.Green;
} Console.SetCursorPosition(x, y[x]); Console.Write(R); y[x] = inBoxY(y[x] + 1,
height); Console.SetCursorPosition(x, inBoxY(y[x] - l[x],
height)); Console.Write(' '); } } private static void Initialize(out int width, out int height, out int[
] y, out int[
] l) { int h1; int h2 = (
h1 = (
height = Console.WindowHeight
) / 2
) / 2;
width = Console.WindowWidth - 1;
y = new int[width];
l = new int[width]; int x;
Console.Clear(); for (
x = 0
; x < width ; ++x ) { y[x] = r.Next(height);
l[x] = r.Next(h2 * (
( x % 11
!= 10
) ? 2 : 1 ), h1 * (
( x % 11
!= 10
) ? 2 : 1 )); } } static Random
r = new Random(); static char R
{ get { int t = r.Next(10); if (
t <= 2 ) return (char)(
'0' + r.Next(10)
); else if (
t <= 4 ) return (char)(
'a' + r.Next(27)
); else if (
t <= 6 ) return (char)(
'A' + r.Next(27)
); else return (char)(
r.Next(32, 255) ); } } public static int inBoxY(int n, int height)
{ n = n % height; if (
n < 0 ) return n + height; else return n;
} } }

Here is the refactored code:

using System; namespace matrix
{ class Program
{ //
fields static Random
rand = new Random(); //
properties static char AsciiCharacter
{ get { int t = rand.Next(10); if (t
<= 2) //
returns a number return (char)('0' + rand.Next(10)); else if (t
<= 4) //
small letter return (char)('a' + rand.Next(27)); else if (t
<= 6) //
capital letter return (char)('A' + rand.Next(27)); else //
any ascii character return (char)(rand.Next(32,
255)); } } //
methods static void Main()
{ Console.ForegroundColor = ConsoleColor.DarkGreen;
Console.WindowLeft = Console.WindowTop = 0;
Console.WindowHeight = Console.BufferHeight = Console.LargestWindowHeight;
Console.WindowWidth = Console.BufferWidth = Console.LargestWindowWidth;
Console.WriteLine("Hit
Any Key To Continue"); Console.ReadKey(); Console.CursorVisible = false; int width,
height; //
setup array of starting y values int[]
y; //
width was 209, height was 81 //
setup the screen and initial conditions of y Initialize(out width, out height, out y); //
do the Matrix effect //
every loop all y's get incremented by 1 while ( true )
UpdateAllColumns(width, height, y); } private static void UpdateAllColumns(int width, int height, int[]
y) { int x; //
draws 3 characters in each x column each time...  //
a dark green, light green, and a space //
y is the position on the screen //
y[x] increments 1 each time so each loop does the same thing but down 1 y value for (
x = 0
; x < width ; ++x ) { //
the bright green character Console.ForegroundColor = ConsoleColor.Green;
Console.SetCursorPosition(x, y[x]); Console.Write(AsciiCharacter); //
the dark green character - 2 positions above the bright green character Console.ForegroundColor = ConsoleColor.DarkGreen; int temp = y[x] - 2;
Console.SetCursorPosition(x, inScreenYPosition(temp, height)); Console.Write(AsciiCharacter); //
the 'space' - 20 positions above the bright green character int temp1 = y[x] - 20;
Console.SetCursorPosition(x, inScreenYPosition(temp1, height)); Console.Write(' '); //
increment y y[x] = inScreenYPosition(y[x] + 1,
height); } //
F5 to reset, F11 to pause and unpause if (Console.KeyAvailable)
{ if (Console.ReadKey().Key
== ConsoleKey.F5) Initialize(out width, out height, out y); if (Console.ReadKey().Key
== ConsoleKey.F11) System.Threading.Thread.Sleep(1); } } //
Deals with what happens when y position is off screen public static int inScreenYPosition(int yPosition, int height)
{ if (yPosition
< 0) return yPosition + height; else if (yPosition
< height) return yPosition; else return 0;
} //
only called once at the start private static void Initialize(out int width, out int height, out int[]
y) { height = Console.WindowHeight;
width = Console.WindowWidth - 1; //
209 for me.. starting y positions of bright green characters y = new int[width];
Console.Clear(); //
loops 209 times for me for ( int x = 0
; x < width ; ++x ) { //
gets random number between 0 and 81 y[x] = rand.Next(height);
} } } }

how it works:

The screen draws each column.. my screen is 208 wide.. so it loops 208 times, each time drawing a bright green character, dark green character, and a space.

The second loop.. the y value has been incremented by 1.

The 3rd loop

Enjoy!