My Profile
Active Members
TodayLast 7 Days
more...
Awards & Gifts
Online Exams
Fresher Jobs
Our fresher job section is exclusively for fresh graduates! Find jobs for freshers in major Indian
cities including Bangalore, Chennai, Hyderabad, Pune or Kochi
Resources
Find educational articles, blogs, discussion threads and other resources.
Colleges
Find details about any college in India or search for courses.
|
CREATING FIRST WEB FORM IN ASP.NET WITH C#
Posted Date: 21 May 2008 Resource Type: Articles/Knowledge Sharing Category: Computer & Technology
|
Posted By: mohit Member Level: Gold
Rating:  Points: 1
|
|
|
Creating Your First Web Form
In this , you'll create a Web Form that lets you enter some text into a textbox— nothing fancy
here. You click a Submit button to send the text you enter to the server. But then I'll show you just a
tantalizing glimpse of how C# exceeds any previously available Web technology in terms of power. The
server will respond with a GIF image created on-the-fly containing the text you type into the text box.
Step 1: Creating a Project
New Web Project and select the item Visual C# Projects in the left pane of
the New Project dialog . In the right pane, select the Web Application icon (you may
need to scroll to see the icon).
By default, C# names your Web application projects WebApplication with an appended number, for
example, WebApplication1, but you should always enter a specific name. Click in the Name field and
enter CSharpASP. Check the Location field; it should contain the name of the Web server you want to
host this application. Typically, this will read http://localhost. However, you may create a project
on any Web server for which you have sufficient permissions to create a virtual directory and write files.
Make sure the information you entered is correct, and then click OK. VS.NET will create the new project.
You should see the Solution Explorer pane . If the Solution Explorer is not visible, select
View Solution Explorer from the menu bar.
When C# creates a Web application project, it adds several items to the Solution Explorer pane. I'll explain all these in a minute, but first, create a new
folder named ch4. Creating subfolders works exactly like creating subfolders in a Web site: You simply
add the name of the folder to the root URL to view a page in that folder. To create the subfolder, rightclick
the CSharpASP virtual root in the Solution Explorer, click Add, and then click New Folder. Finally,
type ch4 for the folder name.
Select the WebForm1.aspx file and drop it on top of your new ch4 folder. When you drop the file,
VS.NET will move the ASPX file (and any associated files) into the ch4 folder. If the file is already open,
close it first and then move it. Your Solution Explorer pane should look similar to Figure 4.4.
Step 2: Laying Out the Page
Select the WebForm1.aspx file and then right-click it to bring up the context menu. Select Rename from
the menu and rename the file DynamicImage.aspx (don't forget or mistype the extension— it's
required).
Double-click the DynamicImage.aspx file to open it in the editing pane. By default, ASPX pages open
in Design mode. If you're not in Design mode, click the Design tab at the bottom of the editing window to
complete this example.
Right-click somewhere on the surface of the Web Form in the editing window and select Properties from
the context menu. You'll see the DOCUMENT Property Pages dialog .
Enter Dynamic Image Example in the Page Title field. Set Target Schema to Internet Explorer
5.0 and the Page Layout setting to GridLayout. Hit OK when you are finished.
On the left side of your screen, you'll see a Toolbox tab. Move your mouse cursor over the tab; Visual
Studio displays the Toolbox. Click the Web Forms bar, then click the Label Control item. Move your
cursor back into the editing window and draw the Label control. You've just placed a Web Form label
on the page. You should remember that Web Form controls are not the same as HTML controls,
although they look identical; they have a different namespace from the equivalent HTML controls. Web
Form Label controls and HTML Label controls (and most other controls that contain text) have a Text
property like a Windows TextBox control rather than a Caption property like a classic VB Form Label
control.
Next, drop a TextBox control next to the label. That's
it for page design— not elaborate, but functional. Next, you need to write a little code.
Tip You can press F2 to rename a file, just as you can in Windows Explorer.
Tip If you usually prefer to edit the HTML directly, you can change the default by clicking Tools ®
Options and then selecting the HTML Designer item from the list of options. Change the Start
Active Server Pages In option to Design View and then click OK.
Step 3: Writing the Code Behind the Page
Right-click the surface of the Web Form and select View Code from the context menu. If you're not very
familiar with C#, the code is somewhat intimidating, but don't worry, most of it is template code. The
method you want to modify is the code for the Page_Load event.
A Web Form executes the Page_Load event each time it's requested; however, the event contains
code to differentiate between an HTTP GET request and a POST request. The correct .NET terminology
is IsPostBack, meaning that the Web Form has been submitted back to the server. In other words,
when IsPostBack is true, the user has already seen the Web Form page at least once. IsPostBack
is a Page object property. You can think of the Page object and the Web Form as essentially the same
thing. When you need to, you can refer to the object that's running in C# using the keyword this, but
you usually don't need to. Because the Page object is running when the Page_Load event executes,
you don't have to use this keyword explicitly, as in this.IsPostBack, you can just write
IsPostBack by itself.
In this sample page, you want to capture the text that the user enters into the text box, so your code will
go into the bottom section of the If structure. For example, Listing 4.3 shows the code you need to add
to the Page_Load event.
using System.Drawing.Text;
// autogenerated code omitted
private void Page_Load(object sender, System.EventArgs e)
{
if (IsPostBack) {
Response.ContentType = "image/gif";
getImage(TextBox1.Text).Save(Response.OutputStream,
System.Drawing.Imaging.ImageFormat.Gif);
Response.End();
}
Response.Write("Page before posting
");
}
I won't walk you through the entire code to create the image. However, because this is some of the first
C# code , I want to point out just a couple of things. First, the capability to create an
image dynamically— any image— in memory simply wasn't available in classic ASP, in VB6, in C++, or
intrinsically in any earlier Microsoft technology without extensive use of the Windows API. What you're
seeing here is brand-new functionality or, at a minimum, a level of simplicity achieved by no other
Microsoft language so far. Second, while the getImage function itself returns a Windows bitmapformatted
image, the DynamicImage.aspx Web Form returns a GIF-formatted image. In other words,
C# has the power to transform an image from a BMP to a GIF image. Again, while that was possible in
ASP by using externally compiled DLLs, it wasn't easy in earlier Web languages. Here's a function that
Warning Former VB programmers watch out! C# is case-sensitive, so, for example, the property
IsPostBack and the word isPostBack are not the same.
creates a BMP file (yellow text on a black background) from the text entered by the user in the
DynamicImage.aspx Web Form .
private static Bitmap getImage(string s ) {
Bitmap b = new Bitmap(1, 1);
int width, height;
//Create a Font object
Font aFont = new Font("Times New Roman", 24,
System.Drawing.GraphicsUnit.Point);
// Create a Graphics Class to measure the text width
Graphics graphics = Graphics.FromImage(b);
// Resize the bitmap
width = (int) graphics.MeasureString(s,aFont).Width;
height = (int) graphics.MeasureString(s,aFont).Height;
b = new Bitmap(b,new Size(width, height));
graphics = Graphics.FromImage(b);
graphics.Clear(Color.Black);
graphics.TextRenderingHint = TextRenderingHint.AntiAlias;
graphics.DrawString(s, aFont, new SolidBrush(Color.Yellow), 0, 0);
graphics.Flush();
return(b);
}
In the Page_Load method (refer to Listing 4.3), the page sets the Response.ContentType to
image/gif because the browser needs to know how to interpret the response. Next, it calls the
getImage method and transforms the resulting BMP to a GIF file. Finally, it writes the binary stream of
bytes containing the GIF file to the browser, which displays the image.
Web applications don't have a defined beginning and end— users can request any page in the
application at any time. To test a specific page, you need to tell VS.NET which page it should run at
startup. In this case, you want the DynamicImage.aspx page to appear when you start the program.
Right-click the DynamicImage.aspx file in the Solution Explorer and select the Set As Start Page item
from the pop-up menu.
You can either build the project first or you can simply tell VS.NET to launch the program, and it will
build the project automatically. To build the project, use one of the Build… options on the Build menu. To
begin running, you can click the Run icon on the toolbar, press F5, or select Start from the Debug menu.
The first time you view the page, the Page_Load event fires. Because the browser requested the Web
Form with the GET method (the first request for the Web Form), the Page.IsPostBack property is
false, so you'll see the text Page Before Posting in your browser.
When you fill in some text and press the Enter key, the browser submits the form to the server. In IE,
HTML forms with a single or HTML control submit automatically when you
press the Enter key.
When you submit the form, the browser requests the DynamicImage.aspx page again, this time with
the POST request method. The Page_Load routine fires again, but this time, the Page object's
IsPostback property will have the value true (because it's a POST request), so the page performs the
process to create an image.
Step 4: Viewing the Results in a Browser
Try it. Save the project and then press F5 to compile and run the project. The IDE opens up a new
browser instance.
Note You must be a member of the Debug Users account to debug ASP.NET applications.
Enter some text into the TextBox control and press Enter to submit the form. The server will respond
with the text you entered in a GIF image sized appropriately to contain the text.
I don't know your level of experience with ASP, VB6, C++ or C#, or ASP.NET, but I can tell you— the
first time I made this code run correctly, I was seriously impressed. Not only is the code that creates the
bitmap only 13 (unwrapped) lines long, but there are no API calls, no handles, no special Declare
statements, no memory management, no worries about memory leaks, and no DLLs to call or register. It
just works. Now think of the hundreds of thousands of hours that people have spent doing exactly this
kind of task for Web applications— drawing text in rectangles. I think this is a better way.
|
Responses
|
No responses found. Be the first to respond and make money from revenue sharing program.
|
|
Watch TV Channels
Watch Asianet TV onlineKairali TV in InternetSurya TV onlineAmritha TV Channel
|