Web Design that taps into the haromny and vision of your dreams.

Creating a Simple ASP.Net Page

Adding pages to a website with ASP.Net

Written By on in C#

1,255 words, estimated reading time 6 minutes.

In this tutorial, we will look at the elements of the default blank ASP page, a few of the ASP.Net components, how to create a simple page and the PostBack.

Active Server Pages (ASP.Net) Series
  1. What is ASP.Net?
  2. ASP.Net for PHP Developers
  3. Creating a Simple ASP.Net Page
  4. ASP.Net Website Navigation Using a SiteMap
  5. Using ASP.Net Master Pages and Content Pages
  6. Validating Input using ASP.Net
  7. Tracing and Remote Debug in ASP.Net
  8. Creating Custom Error Pages with ASP.Net
  9. Managing Session State in ASP.Net
  10. Using Themes and Skins in ASP.Net
  11. Creating User Controls in ASP.Net
  12. Difference between ASP.Net User and Custom Server Controls
  13. Creating Fully Themable Websites with ASP.Net
  14. Ultimate Guide to the Web.Config File
  15. Adding StyleSheets to ASP.Net via C#
  16. Extending the Web Sitemap Xml Document

When you create a new ASP.Net page, by default the page will contain bare bones skeleton XHTML code as shown below.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_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 runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
    </form>
</body>
</html>

The first line defines a few things that the framework needs to know about the page. It is not sent to the browser. It defines what language the page uses, where the code behind is located, the class that this page inherits from and whether to automatically assign event handlers. This line is automatically generated and 99% of the times you don't need to change it.

The next two lines are the standard HTML doctype and html header tags. These you should already be familiar with these. Within the body tag, you will notice that there is a form with an attribute runat="server". This tag tells the ASP.Net compiler that the events within that element should be processed on the server rather than the client. Within this form, your normal page content will go in the div tag.

This simple ASP.Net page is rendered on the browser as:

<!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><title>Untitled Page</title></head>
<body>
  <form name="form1" method="post" action="Default.aspx" id="form1">
    <div>
      <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGS29dOTDoX35MyeDN3AYOtFbdG9ww==" />
    </div>
  </form>
</body>
</html>

You will notice that there is a hidden input object within the client code and the runat tag has been removed from the form tag. The hidden input object is a required element and is produced on every ASP.Net page. The view state contains an encrypted name-value pair for the items on the form. This is used to maintain the status of the page when it is submitted to the server. The view state prevents the form values being lost when going back.

Building a Page

You can put any valid HTML on the page, but if is often better to use standard ASP.Net controls as these have additional features managed by the platform.

You can "upgrade" a standard HTML form element to an ASP.Net control by right clicking it and selecting Run as Server Control. This will add the required runat="server" tag to the control for you.

One of the first things you will probably create is the Page_Load method. The easiest way of doing this is to double click the page in the designer. This will auto-wire up the event for onPageLoad. Within this method, you can set-up the form properties, fill in default values and so on. One of the first things you may want to do is set the page title from the default "Untitled Page" to something more meaningful. This can be done by accessing the page object.

Page.Title = "This is my Page!!!";

All of the ASP.Net controls, including the Page object, exist in the System.Web.UI.WebControls namespace. ASP components that are added to a page usually start with an <asp: tag, for example an input box in ASP.Net:

<asp:TextBox id="TextBox1" runat="server">Hello World</asp:TextBox>

This will be rendered on the browser as:

<input name="TextBox1" type="text" value="Hello World" Id="TextBox1"/>

You can change any of the properties of a control from within the editor using the properties window, or you can change them at runtime in the code behind.

TextBox1.Text = "Another Sample";

Adding Code to a Page

There are three ways of adding code to a page. We have already touched on Code Behind pages, but you can also insert code in the same file as the HTML elements (combined) or embed code within the HTML itself (inline).

The Code Behind method stores all the code in a separate file, usually the page name with .cs appended to the extension. The intention for this method is that you keep the layout separate from the implementation, style from a function.

Combined mode puts the C# (or Visual Basic) code at the top or bottom of the layout page and inline method places blocks of code anywhere within the layout page. The inline method is most commonly used in the PHP language. .Net defaults to Code Behind pages.

We have seen that some elements are marked with a runat="server" attribute. This tells the platform that the events for this element are to be handled using server side code in C# or VB.Net. You can double click on elements in the designer and it will create default event methods just like Windows Forms coding.

<asp:Label ID="lblEnterSomeText" runat="server" Text="Enter some text: "></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" Text="Submit" onclick="Button1_Click" />
<asp:Label ID="lblResult" runat="server" Text=""></asp:Label>
protected void Button1_Click(object sender, EventArgs e)
{
  lblResult.Text = TextBox1.Text;
}

In this example when the user clicks on the button the contents of the text box are shown in the label below. In the next tutorial, we will look at validating user inputs and setting mandatory fields.

Postback

When you submit a form to the server to the same page as the form was displayed on you are invoking a process known as Postback. There is a method called IsPostBack() which can be used to determine if the current page is a postback or a first access. It's probably easier to see than explain. Modify the code above to include a Page_Load event method:

protected void Page_Load(object sender, EventArgs e)
{
  if (IsPostBack)
  {
    lblEnterSomeText.Visible = false;
    lblResult.Visible = true;  
    TextBox1.Visible = false;
    Button1.Visible = false;
  }
  else
  {
    lblEnterSomeText.Visible = true;
    lblResult.Visible = false;
    TextBox1.Visible = true;
    Button1.Visible = true;
  }
}

What this code will do is to hide the input box and button when the form is posted back - i.e. just showing the result. This isn't the best method for hiding elements, but it gives an impression of how the IsPostBack works. You could use it to show/hide options as required or to process submitted data.

We will see more of the IsPostBack in the next tutorial where we look at data validation on forms.

Last updated on: Friday 23rd June 2017

 

Comments
don

don

Hi,

I got the code below that seeks the user to agree so some Terms before going on to another page...

if the user doesn't click the checkbox and clicks the submit button i want looking to update a label element next to the checkbox to prompt the user to check the checkbox or click on "don't agree" (not in code yet)

My problem is updating the label (it could well be any element such as div or textbox) can you help?

This is my code behind stuff for the page that would be displayed when the checkbox is checked.

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
if (Request.RequestType == "POST")
{
// Page has been posted.
// Check tick box is enabled.
if (Request.Form["accept"] == "on")
{
// do nothing. Serve map page.
}
if (Request.Form["accept"] != "on")
{
//update a label,div or span on Form.htm
// to prompt user to check box....

}

}
else
{
// Not been to disclaimer:
Server.Transfer("form.htm");
}

}
}

Reply to don

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me