asp.net introduction

ASP.NET Tutorial

Creating an empty asp.net webproject
web.config
connect asp.net to database
display query results (simple)
display query results (fancy)
Cascading Style Sheets (css)
output images to website
Output images to website (optimized)

Creating an empty asp.net webproject

Run visual studio 2008, go to 'file/new/project' and select 'ASP.NET Empty Web Application'. Running this project will open your default browser and show a directory listing of your project.

asp.net create new project

To add a default (empty) page, in the 'solution explorer' right-click and select 'add/new item'. Select an "Web Form", name it "default.aspx" and click on add. Now running your project notice your browser redirects you to the '/default.aspx'-page - which is still empty.

asp.net add new item

web.config

Now let's take a look at the web.config. In the solution explorer double-click on the 'web.config' to open it and add the statement as marked below. asp.net web.config

Now it would be nice if we could get this string from within the asp-page. In the solution explorer find the 'default.aspx' entry and open it. It will show two subfiles, being 'default.aspx.cs' and 'default.aspx.designer.cs'. Open the default.aspx.cs and you will see a method called Page_Load(...). Add the code as displayed in the below screenshot. You can just copy the two lines in the function and right-click on 'SqlConnection' and 'Resolve Dependency' - do the same for ConfigurationManager (it will then automatically update the 'using' statements at the top as necessary).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
namespace webapp
{
  public partical class _default : System.Web.UI.Page
  {
    protected void Page_Load (object sender, EventArgs e)
    {
      SqlConnection conn = new SqlConnection (
        ConfigurationManager.ConnectionString["logsConnectionString"].ToString());
      int breakhere = 1; // dummy-line, so we can easily put a breakpoint
    }
  }
}

Now put a breakpoint on the line "int breakpoint = 1" and run your application. In the watch-window, verify that the string you entered into the web.config previosuly is correctly retrieved.

connect asp.net to database

The web.config now contains a reference to the database 'webdb' - which we didn't create yet. Make sure sql-express with management tools (free download) is installed and configured and run 'sql server management tools'. In the connection explorer, right-click on 'databases' and create a new database named 'webdb' (leave all other options to default) and add a new table into the database

open it and right-click on 'tables' in the 'webdb' database
add two columns
- id, type=integer, don't allow 'null'
- log, type=text, don't allow 'null'
Change the table name to 'logs'
right-click on the new 'logs' table and select 'edit top 200 rows'
add a few rows with dummy-data, which we can use for testing

Now we want to access this database from within our Page_Load-method. Change the code look in the below screenshot:

asp.net database query

We open an SqlConnection to the database specified in the web.config. Then we create a query to select 'everything' from the logs-table. Then we loop through all resulting entries. These should match with the dummy-values you entered previously in the database.

Display query results (simple)

The next step is to display the query results in the webpage. We will create a new method (which is called automatically) and move the code we have so far from Page_Load into Render, as seen below in the screenshot. We also add a "write.Write" call which generates text for the webpage

asp.net render page

And running it, will look like this:

asp.net render output

Display query results (fancy)

We can make it look a bit more fancy by generating a table with the table-tags

asp.net render output

And running it, will look like this:
asp.net render output

Cascading Stylesheets (css)

Now instead of hardcoding everything, we can use stylesheets (css). Open the file default.aspx. Add the block as shown below in the screenshot.

asp.net render output

Notice the ".d" and ".detail" in the style-definitions, and how to use it in the code-part of the project.

asp.net read database

Output images to website

Find a nice icon (for example on google images) and copy it to your project directory. Add the following stylesheet definition to the default.aspx:

asp.net css

and change the Render-code like below

asp.net css

Output images to website (optimized)

If you use an image multiple times, it will be fetched multiple times from the server. Imagine a large database table where you have a limited amount of images, but many entries. Loading such a page will be slow.

We can use a small trick: We add all images into one large image, and use offsets to render the correct one. This can drastically speed up your page loading-time.

<!-- trick: shift "to the right", so that the image is at 0,0 and 
     then draw & clip to 'w/h' pixels (no-repeat) -->
td.NORMAL{background: url(/icons.png) no-repeat; background-position: 0px 0px; padding:0; margin:0;width:26px; height:26px; }
td.ERROR{background: url(/icons.png) no-repeat; background-position: -26px 0px; padding:0; margin:0;width:26px; height:26px; }
td.EXCEPTION{background: url(/icons.png) no-repeat; background-position: -26px 0px; padding:0; margin:0;width:26px; height:26px; }

<!-- display like this: -->
<table><tr><td class="ERROR"/></tr></table>

Main Menu