Getting Started With ASP.NET

This tutorial shows how to create a simple ASP.NET project and demonstrates many of the basic features Webbo provides to help you build your web applications.

Create the project

First we need to create a folder to contain our project. Run Webbo and make sure the Explorer view is open. By default this will be located in your personal documents folder, use the toolbar buttons to move the root of the tree view if necessary. Right-click the root folder and select 'Create Folder'. Type the name of the project, 'Hello Web', and press enter. Next, make the new folder the root of the tree view by right-clicking and selecting 'Open'. The root of the Explorer tree view will be the document root of our application.

Next we need to add the basic skeleton for our ASP.NET project. Open the 'File' menu and open the 'New From Template' menu. Navigate through 'ASP.NET' and 'Projects' and select the 'Website' template. This will create the basic application. Double-click 'Default.aspx' to open the page ready for editing. Open a new line between the opening and closing tags of the 'form' element and type '<'. Press ctrl+space to activate the Code Assist: you should see a list of HTML tags ready for insertion into the text.

HTML Code Assist

Press 'h' to locate the 'h1' tag and press enter. A header tag pair will be inserted into the text. Note the editing position remains within the first tag. This is to allow tag attributes to be added easily: simply type a space and hit ctrl+space again to a list of all the available attributes. Let's add a class to our header. Display the attribute list and press 'c' (or just move the selector manually) to highlight 'class' and press enter. The attribute is inserted and this time the editing position is moved to the double quotes of the attribute value. Type the class name (e.g. 'intro') and then add some text (e.g. 'Hello Web!') between the tags to provide the heading.

Preview the application

Next we need to preview our work. First, run the ASP.NET development server by opening the 'Tools' menu and selecting 'Start ASP.NET Web Server'. The server will start and appear on screen and as an icon in the system tray. Hide the server window by minimizing it to the system tray; click the tray icon to show it again. To shutdown the server make it visible and click the stop button.

ASP.NET Development Server

With the server running we can preview the site using Webbo's server preview features. First we need to select a preview browser. Open the browser selection list on the toolbar and select the required browser.

Preview Browser Selection

This will list Internet Explorer, which is selected by default, and Firefox, Safari and Opera if Webbo was able to detect them when it was first run. Additional browsers may be added by opening the 'Tools' menu and selecting 'Options' and 'Server Preview'.

Preview Browser Setup

A page open in the editor can be previewed directly by pressing F9 or clicking the 'Preview Server Page' toolbar button. Alternatively, the browser can be opened on the site root without referring to a specific page by pressing ctrl+F9 or clicking the 'Preview Server Root' toolbar button. Note there will probably be a short delay the first time you preview the site as ASP.NET loads the .NET runtime and compiles the page.

Add some server controls

So far this is a pretty static application, let's add some controls to make it do something useful like telling the time.

Open a new line beneath the header tag and insert a button control: type '<asp:' and press ctrl+space. This will open the Code Assist and present a list of the available server controls. Select 'Button' from the list and press enter to insert the tag. Again the editing point moves to help you provide the control's ID. Type 'button1' to name our button. Move the editing position to immediately after the closing quote and insert a space. Press ctrl+space to list the control's properties. Select 'Text' and press enter to insert the attribute. Enter the value 'Update' to provide a label for the button. Next we need to add a control to allow some dynamic text to be displayed. Use the Code Assist to insert a Literal control named 'literal1' after the button.

Next we need to add the server event to update the text each time we click the button. We can do this by adding an event handler to the button in the 'Page_Load' method included in the page. Move the editing position to the body of 'Page_Load' and type 'butt'. Press ctrl+space to open the Code Assist and select 'button1' from the list (this wasn't really necessary as it's probably quicker to just type the full name but it serves to illustrate the Code Assist capabilities available). Next type '.' and press ctrl+space to show the members of the button object. We want to respond to the button's click event so locate it in the list. At this point we can just press enter (or double-click) to insert it into the text and this is what we would do for a property or method but as this is an event we can do something more. Right-click the 'Click' event in the Code Assist list to display the event handler menu.

Event Handler Menu

Select 'Insert anonymous event handler' to insert the handler into the code. For our simple example we will not be using the 'sender' or 'e' parameters so we can just delete them; if we need to use them we will have to provide alternative names as those inserted will clash with the parameters of the method itself.

We now have an empty event handler, time to add some more code. Move to the body of the handler and type 'lit' and press ctrl+space to insert the name of the literal. Next type '.' and locate and insert the 'Text' property from the Code Assist lookup. Similarly use the Code Assist to assemble the rest of the line.

Code Assist

Preview the page, the time should update each time the button is clicked. The full page should look like this:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="Site.css" />
</head>
<script runat="server">

    private void Page_Load(object sender, EventArgs e)
    {
        button1.Click += delegate
        {
            literal1.Text = DateTime.Now.ToString();
        };
    }

</script>
<body>
    <form id="form1" runat="server">
        <h1 class="intro">Hello Web!</h1>
        <asp:Button ID="button1" Text="Update" runat="server"></asp:Button>
        <asp:Literal ID="literal1" runat="server"></asp:Literal>
    </form>
</body>
</html>

Add some Ajax

The time is updated each time the button is clicked but at the expense of a server postback and page refresh. Let's enhance the application to use partial-page updates using the ASP.NET Ajax UpdatePanel control.

First add a ScriptManager control. Open a new line after the header tags, type '<asp:' and press ctrl+space. Select 'ScriptManager' and insert the control. For this application we will not be referencing the control directly so just delete the ID attribute (or provide a name of your choice).

Now we need to add the UpdatePanel. This is a composite control featuring sub-elements used to define the panel's contents. Webbo's Code Assist can only insert simple tags so we need to find another way to add the sub-elements. One way is to simply type them in manually but in this case we can use a snippet.

First make some space after the ScriptManager and move the editing position to where we want to insert the UpdatePanel. Open the 'Edit' menu and select 'Snippets'. Navigate through 'ASP.NET' and 'Control Templates' to select 'Update Panel Template'. This will insert a full UpdatePanel control into the page (again provide an ID or simply delete the attribute). Now drag the Button and Literal controls into the ControlTemplate tag to allow them to be managed by the UpdatePanel. The full page should now look like this:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="Site.css" />
</head>
<script runat="server">

    private void Page_Load(object sender, EventArgs e)
    {
        button1.Click += delegate
        {
            literal1.Text = DateTime.Now.ToString();
        };
    }

</script>
<body>
    <form id="form1" runat="server">
        <h1 class="intro">Hello Web!</h1>
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Button ID="button1" Text="Update" runat="server"></asp:Button>
                <asp:Literal ID="literal1" runat="server"></asp:Literal>
            </ContentTemplate>
            <Triggers>
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Preview the page and click the update button: notice how the time is updated without refreshing the whole page.