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 Website
Visual Web Developer 2010 Express gives you a choice between creating a project and a website. There are situations when you will use a project instead of a website—each type has advantages and disadvantages. The purpose of this section is to explore the difference between projects and websites.
Defining a Website Location
A project always appears on your hard drive. You create the project as described in the “Starting the New Project” section of this chapter. Websites can begin on the hard drive, just like projects—but you can also create them on either a website, using the Hypertext Transfer Protocol (HTTP), or on a File Transfer Protocol (FTP) site, using FTP. The following steps help you get a new website started.
Create a New Website
Choose Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express. You’ll see the IDE start up.
Click New Web Site. You’ll see the New Web Site dialog box shown here.
One of the first things you should notice is that fewer projects are available when working with a new website. For example, no Silverlight projects are available when using this option, nor will you find an entry for using Azure. Even though a website offers more location flexibility, you lose the option of using certain types of templates. Of course, if you need the location flexibility, using a new website project will still likely be your best choice.
Select a project type. For this example application, select the ASP.NET Web Site template.
Select an option from the Web Location drop-down list. Use File System for this example, as shown in the preceding figure.
Provide a location (path) and name in the location field. When working with a website, you don’t have the option of using a solution to group projects together. This example uses a File System connection in the default directory, with No Code Site as its location. You need to provide one of three kinds of information in this field, depending on the option you selected from the Web Location drop-down list:
File System Provide a path and website name. The default path is C:\Users\<User Name>\Documents\Visual Studio 2010\WebSites\, but you can use any location on a local hard drive or on a network drive that you can access. As with projects, 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. Click Browse to display a Choose Location dialog box like the one shown here where you can choose a file system location anywhere your system can access.
HTTP Supply a fully qualified URL for the website you want to use. The URL must include the http:// protocol. Click Browse to display the Choose Location dialog box. In this case, you can choose between Local IIS and Remote Site options. In both cases, you end up with a fully qualified URL pointing to the website. When working with a Local IIS site, you can also select the Use Secure Sockets Layer option to create a secure connection to the site (when the site supports the SSL).
FTP Supply a fully qualified URL and accompanying information to access an FTP site. Unless your site allows anonymous access, you must click Browse in this case to display the FTP information. This information includes the server domain, port number, initial server directory, whether to use passive mode, and the login information (name and password).
Click OK. The IDE creates a new website for you. The basic site features look precisely the same as the project features described earlier.
)
)
Adding a New Page
In the project example earlier in the chapter you modified Default.aspx. You could perform precisely the same changes in this site, but you can make other changes. In this case, you’ll add another page to the site using the following steps.
Click the Solution Explorer tab and then click Auto Hide to keep the window open. You’ll see a list of folders and files contained within the site, as shown here.
Right-click the topmost (site) entry in the list and choose Add New Item from the shortcut menu. You’ll see the Add New Item dialog box, as shown on the next page.
Highlight the Web Form entry, as shown in the figure. (As you can see from the figure, you can add quite a few items using this dialog box, some of which are discussed later in this book.)
Type Image.aspx in the Name field. This is the name of the file as it appears in Solution Explorer later.
Select the Select Master Page option. This selection will create a page that uses the existing master page, rather than a stand-alone page that uses its own layout and formatting.
Click Add. You’ll see the Select a Master Page dialog box shown here.
Because only one master page is associated with this site, you see only one entry in the list in the right pane. However, your site can use as many master pages as needed to fully define the characteristics of your site. If your site places the master pages in a special folder, you can navigate to that folder using the entries in the left pane.
Highlight Site.master and click OK. You’ll see a new page added to your project as shown in Solution Explorer. The page contains only the ASP script and the two placeholder entries for the header and main content, as shown here.
Click Auto Hide in Solution Explorer to hide the window. Display the Toolbox by clicking its tab and then clicking Auto Hide.
Drag an Image control onto the Source window so that it appears like the one shown here.
Close the Toolbox by clicking Auto Hide.
Display the Properties window by clicking its tab and then clicking Auto Hide.
Type StellarImage in the (ID) property. Notice that you can see each of the changes you’re making in the Source window. This is one advantage of using the Source window over using the Design window. Of course, you can’t see what’s actually happening to the control—all you can see is the code that your change is generating.
Type 400 in the Height property. This example won’t set the Width property; the page automatically maintains the aspect ratio when you set just one of the Width or Height property values.
Type http://apod.nasa.gov/apod/image/1104/m74_baixauli_900.jpg in the ImageUrl property. Because you’re working in the Source window, you won’t see the image, but the image will appear if you click Design.
Close the Properties window by clicking Auto Hide.
)
)
)
Adding the Page to the Site Menu
You have a shiny new page—but no way to access it. At this point, you need to add this new page to the master page so that you can select it in the browser.
Click Design on the new Image.aspx page. Click the Site.Master link in the upper-right corner. The Site.master file opens.
Select the square that contains the words Home and About. Notice the odd arrow that appears when you do this. Many controls provide a similar arrow. When you click the arrow, you see a Menu Tasks dialog box like the one shown here.
Click Edit Menu Items. You’ll see the Menu Item Editor window shown here.
This editor lets you change the characteristics of this control without writing any code. As with many other tasks, the IDE writes the code for you in the background based on the input you provide. Writing code this way is less error prone and considerably easier, so always look for these handy control-specific editors whenever possible.
Click Add A Root Item. You’ll see a new root item added to the list in the left pane.
Select the NavigateUrl property and then click the ellipsis button (...) that appears on the right side. You’ll see the Select URL window shown here.
Highlight the Image.aspx entry in the right pane and click OK. The IDE automatically adds the correct entry to the NavigateUrl property for you.
Type Image in the Text property. Notice that the IDE automatically adds Image to the Value property for you. Click OK. The control now has a new entry, Image, as shown here.
)
)
)
You’re ready to begin using the new page. When the application runs, you’ll be able to select the new page you’ve added simply by clicking its tab.
Trying the Site in a Browser
It’s time to try out the changes you’ve made to the site you created. Begin by choosing File | Save All, pressing Ctrl+Shift+S, or clicking Save All on the Standard toolbar to save your application changes. Now press F5, choose Debug | Start Debugging, or click Start Debugging on the Standard toolbar to see the website in your browser. At this point you see the message shown in Figure 2-9.
){kind=link}
Figure 2-9 You must enable debugging in order to see what your website is doing.
A project is configured for a developer to work through issues from the outset and then create a production environment later. On the other hand, a site starts as a production environment, so you must specifically enable debugging. Select the Run Without Debugging option and click OK. The site opens in your browser. Click the Image tab and you’ll see the new page you added, as shown in Figure 2-10.
)
Figure 2-10 The new page contains an interesting image.
Feel free to explore the application. When you’re finished, right-click the ASP.NET Development Server icon in the Notification Area and choose Stop. The server will stop, and you’ll be able to make additional changes to your project.