Editing Web Sites

Now it's time to play with the new VS .NET version. Let's go! Start with a new ASP.NET Web Site project. The first thing you'll see is an almost empty ASP.NET page—only the HTML body is in there.

When you take a look at the generated page, you'll realize that the new VS .NET works without code-behind. This shouldn't upset you too much—code-behind is still supported in an updated and slightly different way. The IDE offers several views of a single file, a concept you may already be familiar with from Web Matrix. Three tab buttons allow you to switch between the different views:

• The Design button shows the visual editor.

• The Source button provides the whole file, including the server-side source code.

• The Server Code button extracts the first <script> block of the file and displays it.

By default, the window appears in Source mode.

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. By the way, instead of naming the newly created pages web-form?.aspx, VS .NET names them default?.aspx. Makes sense, doesn't it?

Placing Server Controls

The editor now supports adding server controls in Design view as well as in Source 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. Don't be surprised if you edit a tag in Source view. There is an extended version of IntelliSense at your service.

The new version of VS .NET answers the prayers of a lot of developers: 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. Now go and celebrate!

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 2-5. As changes are saved, the mark changes from yellow to green.

Figure 2-5: VS .NET now fully preserves your HTML code.

You'll find something new in the Toolbox, too: structure. Because the number of controls has increased dramatically, the Toolbox is split into several categories: Core, Data, Personalization, Security, Validation, Navigation, and HTML.

Editing Controls

So what about editing controls in VS .NET? It's hard to believe, but this has become much more convenient, too. With few exceptions, you don't need to edit control parameters in the HTML source code. You can change almost everything in Design view.

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. Clicking a smart tag opens a context menu with all the provided options, as shown in Figure 2-6. By the way, insiders call this task-based editing.

Figure 2-6: VS NET now supports smart tags.

Smart tags are a pretty cool feature now that you can edit virtually any template in Design view. In the smart tag menu of the data control, you can choose Edit Templates. The list allows you to select one template or even a whole group of templates. Just fill the templates with some text and controls as usual. Figure 2-7 shows the new feature in action.

Figure 2-7: Editing templates is much easier now.

Don't worry about specifying the data-binding expression in the HTML source code, which can be challenging sometimes. Each and every control in a template 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 2-8 shows, you can either bind selected properties to a data source or enter an expression to be evaluated as usual.

Figure 2-8: You can assign data bindings easily using this dialog box.

If you look closely at Figure 2-8, 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. Until now the syntax looked like this:

 <%# 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 bound data is 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 2-9. Here are some of the improvements:

• A border is displayed around the current row, making it easier to see the row you're editing.

• You can use the Tab key 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 2-9: The table editing features have been slightly improved.

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 .NET supports them in the same way. Instead of displaying a meaningless gray box, VS .NET now shows the content of a control. Starting with the Beta version, the VS .NET IDE will display the content of user controls while you edit a page. The current Alpha version, however, still uses the gray box. And more bad news about the Alpha version: Although it provides a Properties window to edit properties, you can't use it because it's a still a bit buggy at the moment. But both will be improved in the Beta version.

With these two extensions, user controls have become more attractive, haven't they?

Enhanced Support for Control Developers

The next improvement relates to custom controls. At least this is the plan of the ASP.NET team. Some of the possible improvements are enrichment of task-based editing, addition of in-place editing, and access to the development environment, including an active source document, directives, and so on. For now, these are only plans—none has been implemented in the current Alpha version.

Validating HTML Source Code

VS .NET comes with some new features related to HTML source code validation. The current validation schema for each ASPX page is displayed at the lower right of the status bar. Just click the schema and the Options dialog box will appear, in which 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 .NET and are also marked directly in the source code. A tool tip shows a description of the problem.

Figure 2-10: Select the validation schema you want to target.

Creating Events Handlers

So what has happened to the event-handling method creation process? It has been simplified. Though the automatic generation of the code body of a standard event by double-click onto the desired control in Design view isn't new (but it's still a nice feature, of course!), VB .NET developers can now use the Properties window to create an event-handling method. C# developers know how to do this already.

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

Figure 2-11: Just select the event you need to handle.

As you can see, everything is fine on the server side. Now what about on the client side? Support is available there too. If you select Source view, the left list contains the group 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 list. Creating the related event-handling method within a client-side script block is a matter of one mouse-click. Figure 2-12 shows this with window_onload.

Figure 2-12: You can now apply even client-side event handlers easily.

Tip

The objects and events listed in Source view may vary depending on the selected validation target.

Using IntelliSense

Compared to previous versions, in the new version of VS .NET the IntelliSense capabilities are highly enhanced. In the final release, the helpful window will be always at your service:

• On editing server code in HTML view

• On editing server code in Source view

• On editing client-side code in HTML view

• On editing server controls, HTML tags, CSS, and directives

• On editing C# or Visual Basic source code files

• On editing ASMX files (from the Beta version on)

• On editing ASHX files (from the Beta version on)

As in VS .NET 2003, preselection of frequently used class members and support for VB .NET while implementing interfaces are in the function set.

I really like IntelliSense's support for client-side scripts in the new version of VS .NET (see Figure 2-13). According to the selected validation schema (see the "Validating HTML Source Code" section for more information), all available objects and their members are listed. Sound good? Then enjoy creating client-side functions!

Figure 2-13: IntelliSense now supports client-side scripting.