Developing a Web Project with Microsoft Visual C# 2010
- 10/15/2011
- Starting Visual Web Developer 2010 Express
- Creating the No-Code Project
- Creating the No Code Website
- Get Going with C#
Creating the No-Code Project
Web development is substantially different from desktop development. For one thing, when creating a web application you’re always interacting with a web server, even if that server is installed on your own system. A desktop application has no such intermediary—the operating system executes the application directly on the local system. In addition, web applications normally rely on a browser to host them on the client computer. You’ll encounter a number of these differences as the book progresses, but this chapter will introduce you to a few of the desktop/web application differences.
The example in this section is a simple project. You’ll create an ASP.NET application with a basic interface. As with the desktop applications presented in Chapter 1, you’ll let the IDE create the required source code for you.
Starting the New Project
This section of the chapter shows how to build a project. This process is typical for every kind of project, even if you’re using a different template than the one discussed in this section. Of course, each template produces a different kind of application, so what you see after you complete the process will differ depending on which template you’re using. Carefully follow these steps to get started.
Create a New Web Project
Choose Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express. You’ll see the IDE start up.
Click New Project. You’ll see the New Project dialog box shown here.
Notice that Visual Web Developer 2010 Express supports both Visual Basic .NET and Visual C#. Make sure you always select the Visual C# folder to work with the C# templates. Otherwise, you’ll create a Visual Basic .NET application.
Highlight the Visual C# folder. You’ll see a number of subfolders that help you locate application templates by type. For example, if you click the web folder, you’ll see only those templates associated with web projects.
Choosing a specific type can save time when you know the type of application you want to create. The center pane of the New Project dialog box contains the list of templates within a particular folder. The right pane describes the template you select. Notice that the left pane confirms that you’ve selected a Visual C# template.
The New Project dialog box also contains controls to change the appearance of the center pane. You can choose small or larger icons. In addition, you can sort the templates in a specific order.
Select a project type. The example application uses the ASP.NET Web Application template.
Type the name No Code Project in the Name field. Notice that the Solution Name field automatically changes to reflect the name you just typed in the Name field. The Solution Name field can contain a different value. A solution is a kind of container. You can store multiple projects in a single solution. For example, you might store an application and its test program in a single solution. Thus, the Solution Name field can be different from the project name because it reflects the name for a multi-project solution.
Choose a location where you want to store the project files. (Click Browse to display the Project Location dialog box to choose the folder you want to use.) The default location is c:\users\<User Name>\documents\visual studio 2010\Projects; however, you can choose any location on your hard drive to store the project. Unlike the desktop applications created in Chapter 1, the simple act of creating a project stores files on disk, which is why you must choose a storage location in the New Project dialog box.
Select the Create Directory For Solution option if you want the solution file to appear in its own folder. This feature is useful primarily when you’re creating a multiple-project solution, because each project will appear in its own subfolder. However, keeping the option selected for a single project solution doesn’t cause any problems, so normally you keep this option selected.
Click OK. The IDE will create the new project for you based on the template you select. Some templates provide default content; others are completely blank. The template used for the example project provides the default content shown here.
)
)
)
The default display takes you to the code immediately, which isn’t what you want in this case. You can click Design to see the graphical interface or click Split to see a combination of the graphical interface and code. Click Design and you’ll see the graphical view of the default site, as shown in Figure 2-2.
)
Figure 2-2 The sample application includes a number of interesting elements.
That’s quite a bit of content. The “Understanding the Default Site” section explains all this content in a little more detail.
Understanding the Default Site
The default site that the ASP.NET Web Application template creates contains a number of individual elements. Each element contributes toward the whole site. In many cases, you’ll want to keep all these elements as a starting point for your project. But because they can prove confusing, this section explains the most important elements—the ones you need to know about now to create a program without coding anything. Later, this book describes more of the template elements so you can begin coding your website.
Looking at the Elements
Before going any further, it’s important to understand how these default site elements appear in the IDE. If you can see the Properties window, click the Auto Hide button in the upper-right corner. Click Solution Explorer, and then click the Auto Hide button so the window remains fixed in position. You’ll see a list of the default site elements like the one shown in Figure 2-3.
Figure 2-3 Solution Explorer makes it possible to see all of the files for your application.
Solution Explorer provides access to all the files that make up the default site, even those you won’t use for this example. The entries you need to know about for this project are:
Site.Master Provides a template that gives the entire site the same look and feel. This file is the master page—a page that controls all the other pages. Using a master page makes it possible to create complex sites with far less code. The master page contains the overall site design, so you need to make changes to the master page only when you want to change your entire site to have a different look and feel.
Site.css Describes the formatting used for the entire site. For example, if you want all headings to use a bold font, you’d place that information in this file.
Default.aspx Contains the content for the first page that anyone who visits your site sees when they enter your site using just the domain URL. (As with any other site, someone can enter a page-specific URL to access another content page directly.) This default page normally contains an overview of your site as well as links to other information on your site.
About.aspx Holds information about your site, the application, or your organization. The default site provides this simply as a placeholder page; you won’t find any actual content on this page.
The default site contains a number of features that you may not require at all. For example, the master page contains a link to a login page that users can use to log on to your site. Unless you need this security feature, you probably won’t keep it in place. However, for now you won’t need to worry about whether these features are in place. The example in this section doesn’t use them, and you don’t need to worry about them.
Working with the Master Page
The master page, Site.Master, contains the overall design for your site. When you open a content page that uses the master page, you see an entry for it in the upper-right corner of the page in Design view.
Begin by looking at the Def ault.aspx file that you see when Visual Web Developer 2010 Express first opens the project for you. If you place the cursor in any location controlled by the master page, you’ll see a red circle with a line through it, as shown in Figure 2-4.
)
Figure 2-4 The master page contains all of the elements that are common to all pages on a website.
To change the site name, open the master page by clicking the Site.Master link in the upper-right corner. Figure 2-5 shows what you see when you click this link and choose the Design tab.
)
Figure 2-5 In order to change master page content, you must open the Site.Master file.
All the elements that were previously inaccessible are now ready to edit. Making a change here affects every page that uses this master page. Now that you can access the master page, you can make changes to it.
Edit the Master Page
Type No Code Project for the heading.
Press Enter to create another line.
Change the Block Format to Heading 2 and type An Example of Working with an ASP.NET Application. Notice that the color of the text is unreadable against the background.
Highlight the entire line, click Foreground Color, and choose Red as the new color.
Scroll to the right side of the page. Highlight and delete the login entries because this example doesn’t use them. At this point, your Site.Master file should look like the one shown on the next page.
This shows the Split view of the file. As you can see at the top, the code reflects the changes made in the various steps. Notice that changing the color of the second heading creates a new style entry. This change appears only in the Site.Master file, not in the Site.css file used to control the styles for the entire site.
Save and close the Site.Master file.
)
Changing the Default.aspx Content
The Default.aspx file contains content. The master page controls the overall layout of the page and the Style.css file controls the appearance of the page. So when you work with this page, you’ll typically want to focus on the actual content, using the other two resources only when you want to change the layout or appearance of all the pages on your site.
This part of the example displays a custom heading and an image as content. Use these steps to make the changes.
Add Content to Default.aspx
Highlight the existing heading text and type An Image on a Web Page. The next step is to display an actual image.
Highlight the existing text under the heading and delete it.
Click the Toolbox tab, and then click Auto Hide to keep it displayed. As with Windows Forms applications, you can use one of three techniques to add controls to a webpage:
Drag the control from the Toolbox and drop it onto the page.
Single-click a control within the Toolbox and then click the page where you want the control to appear.
Double-click the control within the Toolbox, placing it in a default location on the page.
Use one of the preceding three techniques to add an Image control to the webpage.
Close the Toolbox by clicking Auto Hide.
Display the Properties window by clicking its tab and then clicking Auto Hide.
Be sure that the Image control you added is selected, and then type StellarImage into the (ID) property field. The (ID) property serves the same purpose as the (Name) property for Windows Forms applications—it identifies the control so that you can access it easier later.
Type 400 in the Height property. This property sets the height of the image in pixels. If you don’t set the image height, the page displays the image at the same size as the image source.
Type http://apod.nasa.gov/apod/image/1104/m74_baixauli_900.jpg in the ImageUrl property. The image will display on the page automatically.
Type 450 in the Width property. This property sets the image width in pixels. If you don’t set the image width, the page will display it at the original size (839 x 746), which is too large. Your Default.aspx page should now look like this.
)
){kind=link}
At this point, it’s helpful to close the Properties window and click Source. You’ll see the source code used to create Default.aspx—there isn’t much, as shown in Figure 2-6.
)
Figure 2-6 Even though the application output looks complex, it doesn’t require much code.
The source code begins with some ASP script code. Any code you see that appears between the delimiters <% and %> is ASP script. This script defines programming-related features of Default.aspx, including the programming language (C#), the name of the master page file, and the name of the file used to hold the C# code for the page (the code behind file). Setting AutoEventWireup to “true” simply means that any events that the user generates on the page (such as clicking a button) will automatically get passed to the C# code that supports the page. The Inherits entry tells which class within the code behind file to use with this page. You’ll discover more about ASP script later in this book; for now, all you really need to know is that entry defines some aspect of the page.
After the ASP script code, you see an <asp:Content> tag. This is also an ASP.NET entry that refers to a kind of control used on webpages. In this case, the control is described in the Master.Site file. The ContentPlaceHolderID=“HeadContent” entry tells you that this is the header content from the Master.Site file. You can place header-specific information for Default.aspx here, such as <meta> tags that describe the page content. Meta-information is information about something else—in this case, <meta> tags describe the content of the page.
A second <asp:Content> tag appears next. This one uses the ContentPlaceHolderID=“MainContent” entry from the Master.Site file. The content appears within this placeholder. There’s a level 2 heading (the <h2> tag) that contains the content title you defined and a paragraph (<p> tag) that contains the Image control, which is actually an <asp:Image> tag. Each property you defined earlier appears as a separate attribute in the file. You’ll see more examples of how this kind of content works as the book progresses.
Viewing the Master.Site File Code
The “Changing the Default.aspx Content” section earlier in this chapter explored the code used to define the default page. That code relies heavily on the master page code that resides in the Master.Site file. Reopen this file by clicking the Site.Master link in the Default.aspx file Design view. Click Source when the Master.Site opens. You’ll see the code shown in Figure 2-7.
)
Figure 2-7 The Site.Master file contains a lot of code that applies to all pages that use it.
The first line is an ASP script similar to the one you saw in Default.aspx, and serves the same purpose. Of course, Master.Site doesn’t contain any MasterPageFile entry—because it’s the master page!
Immediately below the ASP script, you’ll see some entries that you’d find in any webpage, such as the <!DOCTYPE>, <html>, and <head> tags. These are all standard for a webpage. However, look inside the <head> tag and you’ll see some ASP.NET entries. The <asp:ContentPlaceHolder ID=“HeadContent” runat=“server”> tag is a placeholder tag that defines the position of header content that will be added later by the various pages that rely on this master page. You’ll remember seeing the HeadContent identifier from the Default.aspx file—this is where that identifier comes from. The <head> tag also contains a <link> tag that points to the Site.css file, which defines all the styles for the site.
The “Working with the Master Page” section already discussed the <body> tag content briefly. One of the tags you want to pay attention to in the <body> tag is the <asp:ContentPlaceHolder ID=“MainContent” runat=“server”/> tag. This tag describes the other content placement tag you saw in Default.aspx. Those <asp:Content> tags are where you’ll add page-specific content in the pages that rely on this master page. The other tags in the <body> tag describe the layout and content features common to all pages. Don’t worry about getting too deeply into this information now; just view it, start becoming familiar with the tag names, and start thinking about how the various pieces interact with each other.
Viewing the Site in a Browser
You’ve looked at the master page, Master.Site, and a content page that relies on the master page, Default.aspx. It’s time to see the application in action. Press F5, choose Debug | Start Debugging, or click Start Debugging on the Standard toolbar. The IDE starts the ASP.NET Development Server. This server appears as an icon in the Notification Area. Right-click the icon and you’ll see three options on the shortcut menu:
Open in Web Browser Opens a copy of the default page in the default browser. The server and the browser run independently. You can close the browser and reopen the page by choosing this option.
Stop Stops the ASP.NET Development Server and shuts it down. This isn’t the same as shutting down a web server installed on your system. You can restart the server at any time by pressing F5 again.
Show Details Displays information about this particular ASP.NET Development server, as shown here (clicking the link opens a copy of the default page in your browser).
After the ASP.NET Development Server starts, it opens a copy of your default browser and displays the Default.aspx page, as shown in Figure 2-8.
)
Figure 2-8 The example application displays a picture within a browser, and also provides access to other site features.
Notice that the URL contains a port setting (the 2244 after the localhost domain in the Address field). The IDE configures each of your applications to use a different, non-standard, port as a security feature. Using a non-standard port makes it less likely that someone will attempt to gain access to your system through the ASP.NET Development Server.
If you’re using a default Internet Explorer setup, you’ll likely see the warning note displayed at the top of the client window in this screenshot. Click the warning message and you’ll see a shortcut menu. Choose the Enable Intranet Settings option. At this point, you’ll see a message box warning you that intranet settings are less secure than Internet settings. Click Yes to enable the intranet settings so that you can easily debug your ASP.NET applications. The page will redisplay with all the features in a usable state.
Notice the two tabs on the page: Home and About. If you click About, you’ll see the About.aspx page content. It doesn’t look like the pages have changed, but the page content has. The Address field does change to show the change in pages, but the overall effect is that only the content changes, not the layout. ASP.NET provides a host of very cool effects that you’ll try out as you go through the examples in the book. When you finish working with the example, right-click the ASP.NET Development Server icon in the Notification Area and choose Stop from the shortcut menu.