Sunday, January 30, 2011

Simple Asp.net page

Simple ASP.net page (using Visual studio)!!!

If you are going to start developing a web application in microsoft technology then asp.net is the platform you are looking for...

Before start writing code for a simple asp.net page, a question clicks on my mind .....

Q- As a beginner, what i would expect when i have to start coding to make a simple web page using asp.net technology?
A- I would like to see my web page running along with knowing some of the basic funda's of doing coding using asp.net at that time .

Some of the concepts to keep in mind before starting:
1 - We can use any language C# or VB to do coding in Asp.net as basic .net framework is there to handle language compatibility.

2 - Unlike a traditional desktop program (which users start by running a stand-alone EXE file), ASP.NET applications are almost always divided into multiple web pages. This division means a user can enter an ASP.NET application at several different points or follow a link from the application to another part of the website or another web server.

3 - ASP.NET File Types:-
  • Ends with .aspx -> These are ASP.NET web pages.
  • Ends with .ascx -> These are ASP.NET user controls. User controls are similar to web pages,except that the user can’t access these files directly. Instead, they must be hosted inside an ASP.NET web page. User controls allow you to develop a small piece of user interface and reuse it in as many web forms as you want without repetitive code.
  • Ends with .asmx -> These are ASP.NET web services—collections of methods that can be called over the Internet.
  • web.config -> This is the XML-based configuration file for your ASP.NET application. It includes settings for customizing security, state management, memory management, and much more.
  • Global.asax -> This is the global application file. You can use this file to define global variables (variables that can be accessed from any web page in the webapplication) and react to global events (such as when a web applicationfirst starts).
  • Ends with .cs -> These are code-behind files that contain C# code. They allow you to separate the application logic from the user interface of a web page.
4 -ASP.NET server-side controls:-
ASP.NET actually provides two sets of server-side controls that you can incorporate into your web forms.

  • HTML server controls -> These are server-based equivalents for standard HTML elements.These controls are ideal if you’re a seasoned web programmer who prefers to work with familiar HTML tags (at least at first). They are also useful when migrating ordinary HTMLpages or ASP pages to ASP.NET, because they require the fewest changes.
  • Web controls -> These are similar to the HTML server controls, but they provide a richer object model with a variety of properties for style and formatting details. They also provide more events and more closely resemble the controls used for Windows development.Web controls also feature some user interface elements that have no direct HTML equivalent,such as the GridView, Calendar, and validation controls.
Now, lets start to create a simple new web form in Visual Studio. To do this,
select Website -> Add New Item. In the Add New Item dialog box, choose Web Form, type a name for the new page (such as SimplePage.aspx), make sure the Place Code in Separate File option is checked,and click Add to create the page.


In the new web form, some of the basic code would be automatically included in the .aspx file.The code contains many elements one such is page directive.
The page directive gives ASP.NET basic information about how to compile the page.
It indicates the language you’re using for your code and the way you connect your event handlers.If you’re using the code-behind approach, which is recommended, the page directive
also indicates where the code file is located and the name of your custom page class.

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="SimplePage.aspx.cs" Inherits="SimplePage" %>

In an ASP.NET web form, the doctype gets second place, and appears just underneath the page directive.
The doctype indicates the type of markup (for example, HTML or XHTML) that you’re
using to create your web page. Technically, the doctype is optional, but Visual Studio adds it
automatically. This is important, because depending on the type of markup you’re using there
may be certain tricks that aren’t allowed. For example, strict XHTML doesn’t let you use HTML
formatting features that are considered obsolete and have been replaced by CSS.
The doctype is also important because it influences how a browser interprets your web page.


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Every XHTML document starts out with this basic structure (right after the doctype):

"<"html xmlns="http://www.w3.org/1999/xhtml" ">"
"<" head runat="server" ">"
"<" title ">" Untitled Page "<" /title ">"
"<" /head ">"
"<" body ">"
"<" /body ">"
"<"/html ">"

When you create a new web form in Visual Studio, this is the structure you start with.
Here’s what you get:
  • XHTML documents start with the tag and end with the tag. This element contains the complete content of the web page.
  • Inside the element, the web page is divided into two portions. The first portion is the element, which stores some information about the web page. You’ll use this to store the title of your web page, which will appear in the title bar in your web browser. (You can also add other details here like search keywords, although these are mostly ignored by web browsers these days.) When you generate a web page in Visual Studio, the section has a runat="server" attribute. This gives you the ability to manipulate it in your code (a topic you’ll explore in the next chapter).
  • The second portion is the element, which contains the actual page content that appears in the web browser window.
In an ASP.NET web page, there’s at least one more element. Inside the element is a
element. The element is required because it defines a portion of the page that
can send information back to the web server. This becomes important when you start adding
text boxes, lists, and other controls. As long as they’re in a form, information like the current
text in the text box and the current selection in the list will be sent to the web server using a
process known as a postback.

As far as we are familiar with the basic structure of .aspx page in web application in asp.net now, we will see where can we do the coding in web form.

Writing Code :

The Code-Behind Class:-
When you switch to code view, you’ll see the page class for your web page.

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class SimplePage: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}

This simple page is the class where we can add logic(Although good practice is to write business logic code in some class library which can be referenced into your asp.net web application ) to do some simple work in our application.

Now in order to show some thing on the webpage, I am writing some code in Page_Load event :

public partial class SimplePage: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("Hello World");
}
}

This code will display " Hello World " on your first web page when we run the website using F5 command in visual studio.

Finally its over ,your first web page is running....:)

* Please try to see the Page Life Cycle overview from http://msdn.microsoft.com/en-us/library/ms178472.aspx to go for next stage.


I hope this would prove somewhat helpful for you guys to get some conceptual view before running you first web page in asp.net technology.