Introduction

Microsoft has up to now offered Visual Studio .NET 2003 for web developers creating ASP.NET web sites. Although the Visual Studio .NET 2003 IDE allows developers to build web projects there are severe shortcomings of this IDE – including the tendency of the HTML editor to delete or ‘improve’ parts of developer written code, reformatting the HTML every time you switch from design mode to code mode, no in-built remote deployment options etc. On the other hand, Microsoft also offered Web Matrix, a free lightweight ASP.NET IDE aimed towards hobbyist and students. Web Matrix does not sport rich features like IntelliSense, Source Control etc. that are usually needed for professional development.

The new version of Visual Studio 2005 fills in these gaps and provides web developers with an environment especially optimized for their needs. Here’s a list of some of the features offered by the new environment:

• "project-less" development . Project files are no longer necessary. The integrated development environment (IDE) gets all the required information directly out of the directory. So it’s a breeze to have multiple developers/designers work on a web site, not least because this solves a longstanding issue if you are using with source control. In Visual Studio .NET 2003 if a developer checked out the project in order to eg. add a file, no other develop could add more pages until the project files is checked-in again.


• New Project Locations . Besides real IIS projects, you’re now able to store site files directly in the file system and access the projects via FTP and FrontPage Server Extensions – this facilitates remote development, which again might make it easier for multiple developers to work on a project – they don’t all need to .host their own copy of the site.


• VS integrated web server . This is comparable to "Cassini" a free web server to host ASP.NET applications; with itw own integrated web server Visual Studio no longer requres Internet Information Services (IIS) required during development, although IIS-based projects are still supported. Projects created using the integrated web server are only accessible on the workstation and cannot be accessed from the network; this ensures no one accesses the site while its being developed.


• Inline Source Code . VS .NET can handle inline source code within the ASPX file, and it offers a revised code-behind model. (This model has colloquially been referred to as code-beside and we’ll use that term in this article series to distinguish it from the older code-behind model).


• Intellisense . Regardless of where editing takes place, full support of IntelliSense and debugging is available including files, such as .aspx files, where this was not the case in VS.NET 2003.


• Better HTML Editor . The new editor makes sure that manually entered HTML source code will remain unchanged; custom formatting and designs won’t be lost.


• HTML Validation Engine . An exchangeable validation engine allows developers to check the HTML source code against standards such as Extensible Hypertext Markup Language (XHTML). Failures are entered into the Task List.

This article will give you a high level overview of developing a web project in VS 2005, and in the process show you more about some of the above listed features. This article will focus mostly on the improved VS 2005 user interface, rather than on the internal changes to ASP.NET, which means we won’t be saying much about the much-publicised new code-beside model. Internal topics will be covered in a follow-up article.

Figure 1 shows an integrated sample web site project being edited within VS .NET. At first sight, the differences between the old and new versions seem to be small, but after a few minutes working with the IDE you’ll discover that the new environment is easier and more manageable

Figure 1. The new Visual Studio 2005 at work.
This figure has been reduced in size to fit in the text. To view the full image Click here

System Requirements

This article is based on Beta2 release of Visual Studio 2005. It’s currently available for downloads in the MSDN Subscribers section. The DVD’s of Beta2 are also available to order from Microsoft. The version of the .NET runtime for Beta2 is v2.0.50215.

Visual Studio 2005’s installation process is self-explanatory. After you install Visual Studio 2005, a new group, Microsoft Visual Studio 2005 Beta2, is available in your Start menu. Start it by clicking the Microsoft Visual Studio 2005 Beta2 link. The IDE’s documentation is accessible via the Microsoft Visual Studio 2005 Documentation link. The IDE’s documentation describes the improvements in ASP.NET and introduces the new VS 2005 version

VS2005 Web Application Basics

In this section, I cover how to create a new web site and open existing ones with the new version of VS 2005. Also, I show you how to migrate applications created with the older version of the IDE.

To create a new web site, you can use a local install of IIS 5.0, 5.1, or 6.0. Alternatively, it is possible to store the web site directly in your local file system or to access it via FrontPage Server Extensions and even via FTP.

Creating a New Web Site

The New -> Web Site dialog box (which you access through the File menu) offers all opportunities mentioned previously, as shown in Figure 2. When you click the Browse button, the Choose Location dialog box appears (see Figure 3), from which you can select the site’s storage location. If you choose File System , you can create new directories. If you choose Local IIS you can create a site on your local IIS Server. If you choose FTP you can create a site on a remote server to which you have FTP access. If you choose Remote Site you can create a site on a remote web server that has FrontPage Extensions installed.

One big change you will notice is that instead of grouping ASP.NET Projects under a particular language, Web Sites have become a separate entry and when you create a Web Site you can select your programming language of preference.

Figure 2. Creating a new web site

Figure 3. In the Choose Location dialog box, you choose among the File System, Local IIS, FTP Site, or Remote Site options.

It’s worth drawing attention to the the three buttons located towards the top right corner of the dialog shown in Figure 3, just below the Close and Help buttons. These respectively allow you to directly create a new Web application, create a new virtual directory and delete an existing virtual directory directly from the IDE rather than going to the IIS Manager.

In VS 2005 Beta2 there is also a Personal Web Site starter kit that you can use as starting point for your own web site or as a means to explore the new features of ASP.NET v2.0. You can select this when you create a new web site (see Figure 2). You can also download more starter kits from Microsoft’s web site – http://lab.msdn.microsoft.com/express/vwd/starterkit.

Something different from previous approaches is that there’s no special project file generated at the time of project creation. From now on, every file within the selected directories belongs to the project automatically. This approach simplifies adding new files, including references to the bin directory, and moving projects. Distributing a complete project is now a job for XCopy . If you work in a team with source control, you’ll love this new approach. The solution file is still however used to keep all the details of the web site together.

Opening an Existing Web Site

Opening a web site is very easy too through VS 2005’s Open Web Site dialog box, shown in Figure 4. This is similar to the New Web Site dialog box shown in Figure 2, in that it offers direct access to the file system, the local IIS, an FTP server, and any server offering FrontPage Server Extensions. You can also open projects managed by source control systems like Visual SourceSafe.

Figure 4. To open a web site, just point to the corresponding IIS Virtual Directory in the Open Web Site dialog box.

Migrating an Existing VS .NET 2002/2003 Web Application

Changes in the project management features are among the reasons that you need to migrate VS .NET 2002 and 2003 applications before you use them in the new version. VS 2005 has a Conversion Wizard that guides you through the conversion process (as shown in Figure 5); this wizard is automatically launched when you open a project that was created in previous version of VS.NET.

Figure 5. Web Project Migration Wizard

The wizard asks you if you want to create a backup copy of your project or overwrite the existing project. After that it proceeds with the conversion. All changes are logged in a file, ConversionReport.txt . Also a nice formatted XML report is generated as shown in figure 6 .

Figure 6. Project Migration Report

The migration wizard does a couple of things including:

• It deletes the project and *.webinfo file that are no longer required.


• It reformats the solution file to meet the requirements of VS2005.


• It moves the AssemblyInfo.cs and Global.asax.cs files to the new App_Code directory so they can be auto-compiled.


• It deletes any .dll or .pdb files from the bin directory, which would have contained the compiled web project – since these reference the older runtime.


• It replaces all the Codebehind attributes in the .aspx and .ascx files with the new Codefile attribute.


• It modifies all codebehind classesthat had been defined in *.aspx.cs files (for C#, similarly for VB) and redefines these as partial classes.


• It marks as protected all private event handling methods.

There may be other changes to ensure that the migrated projects conform to the new ASP.NET 2.0 requirements, but the above are the main changes you’re likely to notice.

Editing a Web Site

If you have created a new ASP.NET Web Site project in VS2005. The first thing you’ll see is an almost empty ASP.NET page-only the HTML body is in there. The default DocType of the page is set to XHTML and the default layout is now Flow Layout instead of that – for many developers, including myself – annoying Grid Layout that was the default in VS 2003.

To create a new page, just right-click the project node in Solution Explorer and then select Add new Item . Alternatively, you can choose the same command from the Website menu. You will notice instead of naming the newly created pages webform?.aspx (as was the case in earlier versions), VS 2005 names them default?.aspx .

Some User Interface Improvements

Now you’ve seen what’s new in the process of creating or opening a project and basic editing, we’ll take a tour through some of the main improvments to the Visual Studio user interface that you’ll notice.

Placing Server Controls

The editor now supports adding server controls in Source view as well as in Design view. Just drag the control out of the Toolbox and drop it at the desired location. The current cursor position and selection (if one exists) remain unaffected when you change the view. In both views you can rely on the Properties window to manipulate a control. IntelliSense has now been enabled in HTML Source view, so even if you write in-line code you can still take advantage of IntelliSense.

The new version of VS 2005 solves the HTML reformatting issue from earlier versions of VS. It doesn’t pick your manually entered HTML code to pieces as the previous versions did. Changes will be made in the particular context only-for example, if a new control is inserted. Even if you switch between the views, there will be no changes.

Showing Changes to your Code

If a row in the source view is modified by the environment or by the developer, it’s marked in yellow next to the row number, as shown in Figure 7. As changes are saved, the mark changes from yellow to green.

Figure 7. VS 2005 now marks any edits you make to your code.

The Toolbox has been restructured because the number of controls has increased dramatically. The Toolbox is now split into several categories: Standard. Data, Validation, Navigation, Login, WebParts, HTML and General (see Figure 1).

Smart Tags and Data Binding

Another new VS .NET feature is smart tags , which are available for all controls with assigned design-time actions-the so-called verbs. Verbs are actions defined by the control creator that are exposed by the Visual Studio IDE in design mode, these help to perform routine tasks on the control quickly. Clicking a smart tag (a small arrow on the top right of the control) opens a context menu with all the provided options, as shown in Figure 8 .

Figure 8. VS 2005 now supports smart tags.

Smart tags are very useful for editing templated controls like DataGrid, DataList, Repeater etc. You can visually edit any template in Design view. In the smart tag menu of the control, you can choose Edit Templates . The list allows you to select one template for editing. Just fill the templates with some text and controls as usual. Figure 9 shows the new feature in action.

Figure 9. Visually editing templates of a DataList control.

Specifying the data-binding expression in the HTML source code for controls like DataGrid, Repeater, etc.can be challenging sometimes. Each and every control in the template of these controls features an extended smart tag menu. Select Edit DataBindings and a dialog box pops up that allows you to enter or edit the binding. As Figure 10 shows, you can either bind selected properties to a data source or enter an expression to be evaluated as usual.

Figure 10. You can assign data bindings easily using this dialog box.

If you look closely at Figure 10, you should be able to figure out which expression I’ve used for data binding. The syntax has been significantly shortened and therefore simplified compared to the old versions. In previous versions of ASP.NET the syntax for databinding in a DataList or Repeater look like the following:

<%# DataBinder.Eval(Container.DataItem, "MyField") %>

Using the new syntax, the same result is achieved with fewer characters:

<%# Eval("MyField") %>

This was made possible through the integration of a new protected method called Eval in the Page class. It’s nice to know that you can still use an overloaded implementation of this method by passing an additional format string:

<%# Eval("MyDateField", "{0:d}") %>

Note that in the preceding dialog box, you aren’t required to put the data binding in brackets.

In addition to using Eval, you may also use the new method XPath, as long as the control is bound to XML:

<%# XPath ("orders/order/customer/@id") %>

You can, of course, also pass a format instruction as a second parameter.

Enhanced Table-Editing Support

Improved support for HTML tables is yet another enhancement in VS .NET. You add a table using the Table menu, and though the subsequent editing of single cells hasn’t changed in a major way, it has become easier to manage, as shown in Figure 11. Here are some of the improvements:

• A border is displayed around the current cell (in figure 11, this is the bottom right cell), making it easier to see the cell you’re editing.


• You can use the Tab key as well as the arrow keys to switch between cells.


• You can select rows, columns, and cells by holding down the Ctrl key, even if the elements you’re selecting aren’t connected.


• You can change the properties of all selected items in one shot.


• You can connect cells.


• You can move tables more easily using the mouse.








Figure 11. The table editing features have been improved.
This figure has been reduced in size to fit in the text. To view the full image Click here

User Controls

If you like the way Web Matrix (since version 0.6) supports user controls, you’ll be pleasantly surprised to discover that VS 2005 supports them in the same way. Instead of displaying a meaningless gray box, VS 2005 now shows the content of the user control. In Figure 12, I have placed the Header usercontrol on the Default page. You can see it being rendered as well as a Smart Tag that allows me to switch to editing the user control.

Figure 12. Rendering User Controls on Pages

Customizing the IDE

The new version of VS has a highly configurable development environment, even more so then VS.NET 2003. In particular, you can configure the formatting of text editors to fit your individual needs. Figure 13 shows a part of the Options dialog box. It allows you, for example, to specify in detail if a line break is inserted before an angle bracket in C#, how parameters should be arranged, and much more.

Figure 13. You can customize virtually any editor behavior.

Many of these options were of course present in VS.NET 2003, but there are many more options in VS2005. Also, for your convenience, you can save your complete settings as an XML file and copy it to a different system. This way, it’s possible to enforce companywide coding guidelines. Just select Import/Export Settings from the Tools menu. Figure 14 shows the Export Settings dialog box.

Figure 14. In the Import/Export Settings dialog box you back up, share, and reset your individual IDE settings.

Writing HTML

Besides the improvements just covered, VS 2005 offers some enhanced support when working with HTML markup. In particular there is better support for validating your HTML and for tracking relationships between tags.

Validating HTML Markup

VS 2005 comes with some new features related to HTML source code validation. In the new HTML Source Editing toolbar you can choose among several alternatives, for example, XHTML 1.0 Strict, XHTML 1.0 Transitional, Internet Explorer 6.0, and so on. Errors appear in the Task List provided by VS 2005 and are also marked directly in the source code. A tool tip shows a description of the problem.

Figure 15. Select the validation schema you want to target.

Tag Jump

Just like in many of today advanced HTML editors the Visual Studio 2005 IDE has a quick tag jump feature that lets you quickly select the tag you are editing and see all the parent tags. This feature is highly useful while working with complex nested table structures where you are not sure which table cell belongs to which table row. Figure 16 shows how the tag jump feature lets you quickly look at the parent tags of the selected tag.

And now when you switch from Design view to Source view your cursor position is not lost, it’s positioned at the tag that was selected in design view.

Figure 16. Tag Jump to view/select parent tags

Creating Event Handlers

Events and event handlers haven’t escaped the list of topics where substantial improvments in the Visual Studio user experience have been made, with both improved visual support for creating server-side event handlers and brand new support for client-side events.

Server-Side Event Handlers

The event-handing process has been simplified in VS 2005. Just as before, you can have VS automatically generate the event handling method outline by double-clicking on the desired control in Design view. However, VB .NET developers can now alternatively use the Properties window to create an event-handling method. In ASP.NET 2.0 the code behind model has been dropped in favor of what is commonly being referred to as the code beside model. According to this model, the ASPX page and the code file are now defined as the same class using the partial classes feature that has been added to both C# and VB. Since the two files form a part of the same class, plumbing code in the source file to get the event handling methods wired is no longer required.

All languages provide two drop-down lists in HTML view and Source view, as shown in Figure 17. In one list you can select the control, and in the other you can choose the event. If you do so, the method outline is automatically generated.

Figure 17. Just select the event you need to handle.

Client-Side Event Handlers

VS2005 offers some much-needed new support for client-side event handlers: Now, just as you can automatically add event handling methods in the Source View of the code file, similarly in the Source View of the .aspx file you can add client-side JavaScript event handling methods. Select Source View for a .aspx file and then look at the two drop-down lists at the top of the code window. The left hand list contains a group called Client Objects & Events . As the group’s name suggests, you get access to objects such as window and document that are offered by a client-side script language (JavaScript, for example). After you select an object, the supported events are displayed in the right hand list. Creating the related event-handling method within a client-side script block is a matter of one mouse-click. Figure 18 shows this feature in action with window_onload . (Unfortunately one feature that is still missing is integrated support for a separate .js file to contain JavaScript for use across the website.)

Figure 18. You can now apply even client-side event handlers easily.
This figure has been reduced in size to fit in the text. To view the full image Click here

Using IntelliSense

Compared to previous versions, in the new version of VS 2005 the IntelliSense capabilities are highly enhanced. The helpful little window will be always at your service:

• On editing server code in HTML view – New in VS 2005


• On editing server code in Source view


• On editing client-side code in HTML view – New in VS 2005


• On editing server controls, HTML tags, CSS, and directives – New in VS 2005


• On editing C# or Visual Basic source code files


• On editing asmx files – New in VS 2005


• On editing ashx files – New in VS 2005

I really like IntelliSense’s support for client-side scripts in the new version of VS .NET (see Figure 16). According to the selected validation schema (see the "Validating HTML Source Code" section for more information), all available objects and their members are listed.

Figure 19. IntelliSense now supports client-side scripting.

Conclusion

In this article we have surveyed some of the core new user-interface capabilities of the new version of Visual Studio, focusing in particular on how to create and edit web sites (formerly known as web applications). The new version handles projects more in a more lightweight manner, which makes it easy to share projects in teams or just copy them to another machine. You won’t need to create virtual apps on your local IIS anymore. The enhanced code editors and IntelliSense support increases developer productivity.

We haven’t yet said much about features that are internal to the design of ASP.NET and the way VS interacts with this – that will be the subject of the follow-up article, which will in particular cover the new code-beside model and debugging.