Вы находитесь на странице: 1из 3

According to Microsoft, "ASP.NET is a technology for building powerful, dynamic Web applications and is part of the .

NET
Framework". NET is language independent, which means you can use any .NET supported language to make .NET
applications. The most common languages for writing ASP.NET applications are C# and VB.NET. With MS Visual Studio
installed, we're ready to create our first ASP.NET website. In VS, this is very easy. Open the File menu and select "New
Web Site". Select C# in the Language dropdown. Now, click the Ok button to create this new website.
VS will create a very basic website for you, consisting only of a Default.aspx file (and it's partner, the Default.aspx.cs file)
and an App_Data folder.
Let me show you how you can say hello to the world from ASP.NET. Open the Default.aspx (if it's not already opened) by
doubleclicking it in the Solution Explorer. It already contains a bunch of HTML markup, as well as some stuff you probably
won't recognize, like the Page directive in the top, or the runat attribute on the form tag.
First of all, we will add a Label control to the page. A Label control is some what simple, since it's just used to hold a piece
of text. Add the following piece of HTML-looking code somewhere between the set of <form> tags:
<asp:Label runat="server" id="HelloWorldLabel"></asp:Label>

Secondly, add this script block somewhere on the page, preferably below the Page directive in the top:
<%
HelloWorldLabel.Text = "Hello, world!";
%>

To see the page in action, use Debug -> Start Without Debugging, or simply press F6. Visual Studio will now compile your
project, and launch the page you're working on in your default browser. The page will simply have a piece of text which
says "Hello, world!"
Here is the complete listing:
<%
HelloWorldLabel.Text = "Hello, world!";
%>
<!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>
<asp:Label runat="server" id="HelloWorldLabel"></asp:Label>
</div>
</form>
</body>
</html>

While our first example was fine, we unfortunately broke one of the coding principles of ASP.NET: To separate markup and
code. As you noticed, we added a scripting block (using <% %>), where we wrote a line of C# code to use the label. While
this is just fine for a small and simple example like this, we would soon get a real mess with a bunch of C# code within an
even bigger amount of HTML code. If you throw in some JavaScript and some CSS as well, it will soon become very
chaotic to edit. That's why MS introduced CodeBehind, a technique which allows you to completely separate markup
(HTML, CSS etc.) and code (C#, VB.NET etc.). So let's remove the script block (from <% to %>) and save the file.
As we talked about earlier, VS added a file called Default.aspx.cs. If you can't see it in the Solution Explorer, then click the

little plus sign left of the Default.aspx file. Open this file. Now, if you haven't worked with .NET or another non-web
programming language before, it might look a bit scary at this point. It looks nothing like HTML. However, I will try to
explain the different parts of the content, and soon you will hopefully see that CodeBehind is a great tool to get a better
overview of your work. Here is a complete listing of the file as it looks right now:
using System;
using System.Data;
using System.Configuration;
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 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}

For now, the top part is rather irrelevant to us. It's a list of namespaces being included with the using keyword, for usage in
the file. Since this is an ASP.NET tutorial and not a dedicated C# tutorial, I won't explain this in depth. Next, we have the
class. Classes are a part of the concept of Object Oriented programming, which has become very popular, especially with
languages like Java and C#. OO is a very complex subject, which also won't be explained within this tutorial.
The name of this class is "_Default", and the : (colon) tells us that this class inherits from the Page class in the
System.Web.UI namespace. This means that our page can already do a bunch of things, without any programming,
because it inherits methods and properties from another class. All ASP.NET pages inherits from the Page class, or
another class which inherits from the Page class.
The only method within this class is the Page_Load, which is called everytime the page is loaded. Let's use that to our
advantage, and set the ext from this method. We can use the exact same line of code as before, but of course without the
script block tags. Add the line of code between the { and } characters:
HelloWorldLabel.Text = "Hello, world!";

That's it. Run the project (F6), and have a look. The page looks exactly like before, but we have just used CodeBehind for
the first time
ASP.NET is an event-driven way of making web applications. With PHP and Classic ASP, you have one file, which is
executed line after line, from start to end. However, ASP.NET is very different. Here we have events, which are either
activated by the user in one way or another. In the previous example, we used the Page_Load method. Actually, this is an
event, which the Page class calls when the page is loaded. We will use the same technique in the next example, where
we will add a couple of controls to our simple hello world example. To make it a bit more interesting, we will change the
"world" word with something defined by the user. Have a look at this codelisting, where we add two new controls: A Button
control and a TextBox control.
<form id="form1" runat="server">
<div>
<asp:Label runat="server" id="HelloWorldLabel"></asp:Label>
<br /><br />
<asp:TextBox runat="server" id="TextInput" />
<asp:Button runat="server" id="GreetButton" text="Say Hello!" />
</div>
</form>

As you can see, we now have the 2 new controls added, but they really can't do much at the moment. You can run the
example if you wish to check this out for your self - if you click the button, the page is simply reloaded. Let's change that,
and let's start by doing it the easy way. VS comes with a WYSIWYG editor, and while I hardly ever use it my self, it does
make some things easier, like creating events.
So, click the Design button in the bottom of VS. Now you will see a visual representation of our page. We wish to add a
Click event to the button, and this is very simply - just doubleclick the GreetButton, and you will be taken to the
CodeBehind file of our page. As you can see, a fine new method has been added, called GreetButton_Click. If you have a
look at the Default.aspx file (you need to go from Design view to Source view), you will see that an attribute has been
added to our Button control, telling which method to call when the button is clicked. All this work done with a simple
doubleclick.
Now lets add some code to our new event. We wish to use the text from the TextBox, on our good old Label with the
"Hello, world!" text. This is also very simple, and all it requires is a single line of code:
HelloWorldLabel.Text = "Hello, " + TextInput.Text;

Run the project again (F6), and you will see the our old page with a couple of new controls. The "Hello, world!" text is still
there, because we set it in the Page_Load event. Now try entering a name in the textbox, and press the button. Voila, the
text is changed, and we have just used our first control event. Notice how we can add code which is not necessarily called
unless the user performs a specific task. This is different from the good old Classic ASP/PHP approach, but you will soon
get used to it, and you will probably also come to like it a lot!
Okay, the onclick event from last chapter was easy, but let's try creating all the code required to use an event from
scratch. We will also add yet a new control, to make things more interesting - the DropDownList, which allows the user to
select an item from a list. Add the folowing code snippet somewhere in the Default.aspx file:
<asp:DropDownList runat="server" id="GreetList" autopostback="true">
<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>

This thing works just like a normal HTML SELECT element, which is of course what it's translated into upon rendering.
The only attribute that would seem new to a person with basic HTML experience, is the autopostback. You will learn more
about postbacks in one of the next chapters, but for now, just know that it makes the control contact the server eachtime
an item is selected by the user. We will use this to our benefit now, by adding an event:
<asp:DropDownList runat="server" id="GreetList" autopostback="true"
onselectedindexchanged="GreetList_SelectedIndexChanged">

We are using the onselectedindexchanged event, and assigning a method from CodeBehind which does not yet exist. You
are free to choose the name of the method, but using a convention with the name of the control, an underscore, and then
the name of the event, helps you keep track of it all. We better go create the event, so change to the Default.aspx.cs file,
and add the following method:
protected void GreetList_SelectedIndexChanged(object sender, EventArgs e)
{
HelloWorldLabel.Text = "Hello, " + GreetList.SelectedValue;
}

Once again, we make this extremely simple. We use the SelectedValue property of our dropdown list, which holds the text
from the value property of the selected item. Try running the site, and select an item from the dropdown list. Pretty neat,
huh? All commen controls come with a bunch of usefull events, which you can subscribe to like this.

Вам также может понравиться