Creating Your First ASP .NET Web Application in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

In this article we will take an "as needed" approach, discussing only the techniques we will use in our applications.

 

To understand ASP.NET and Visual Studio .NET integration, we will write a simple non-GDI+ Web application. In this application we will add some controls to a Web page: a generic button, a text box, and an Image button. After adding these controls, we will write code in the button click event handler that will read the contents of the text box as a file name and display the file in the Image button. Let's get started!

 

Creating a Web Application Project

 

Creating a new ASP.NET Web application using Visual Studio .NET is simple: First we create a new project by choosing File | New | Project | Visual C# Projects and then selecting the ASP.NET Web Application template. As Figure 12.3 shows, we give our application the name FirstWebApp. It resides in the GDIPlusGuide folder of localhost, which is the default Web server on our local machine.

 

The Location box displays the default option of http://localhost and the application name. Here localhost represents the default the IIS server running on our local machine. The default virtual directory for localhost is c:/Inetpub\wwwroot.

 

NOTE

 

If you are using a remote server for you development, you'll need to provide your server name instead of localhost. You can either create the project in the root of the server or create a new folder.

 

Clicking the OK button creates a new directory, FirstWebApp, in the server's virtual directory. It also creates a new Web application and sends us to the default WebForm1.aspx page (see Figure 12.4)

 

Figure 12.3: The FirstWebApp project

 

From here we can edit our page's HTML. Two modes are available: Design and HTML (see the bottom left corner of Figure 12.4). We click the HTML button on edit the code, as shown in Figure 12.5

 

The HTML view shows us the HTML code of a page, its controls and its control properties. The HTML editor also lets us edit the HTML manually.

 

If we switch back to the design mode and right-click on the page, we see several options: View HTML Source, Build Style, View in Browser, View Code, Synchronize Document Outline, and so on.

 

We can set the properties of a page by selecting Properties from the context menu (which we bring up with a right mouse-click). The Properties menu opens the DOCUMENT Property Pages windows (see Figure 12.6). Three tabs are available in this window: General, Color and Margins, and Keywords. Most of the properties are self-explanatory. The General tab contains page title, background image, target schema, character set, page layout, and client and server language properties.

 

 

Figure 12.4: The default WbForm1.aspx page

 

 

Figure 12.5: The HTML view of WebForm1.apsx

 

 

Figure 12.6: An ASP.NET document's page properties

 

The Page Layout property has two options: GridLayout and FlowLayout. We use GridLayout when we want to drop controls to the page and reposition them. If we want to add text to the page, we must set the page layout to FlowLayout. After we set the Page Layout property to FlowLayout, the editor works as a text editor.

Conclusion

Hope the article would have helped you in understanding ASP.NET Web Application in GDI+. Read other articles on GDI+ on the website.