Search

Categories

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Send mail to the author(s) E-mail

# Thursday, November 05, 2009
ASP.NET Web Client Front End - Ch12
( ASP.NET Best Practise | Events )
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.
Comments [0] | | # 
Related posts:
Delegates and Events
Web.debug.config
Tooling and Setup
Matrix Rain Effect in C# Console App
CodeCamp 2008 Christchurch
All comments require the approval of the site owner before being displayed.
Name
E-mail
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):
Live Comment Preview