Developing codeless apps with Whidbey

The next version of the .NET Framework version 2.0 has been released in a public beta version. It includes a host of new enhanced features, which will help in developing applications faster and also add new capabilities, which were time consuming to develop in earlier versions.

The tool for creating Web Applications has been renamed to Visual Web Developer and surely the name is surprising because it is practically impossible to create a web application by just dragging and dropping controls. So let us see how we can develop web applications using Visual Web Developer. We will create a report like this seen in Figure 1. At the top is a drop down list box which will filter the records based on the selected state.

Figure 1. The final view of the report created in Visual Web Developer.

Start Microsoft Visual Studio 2005 and the screen will appear as seen in Figure 2.

Figure 2. The opening screen of Visual Studio 2005.

Let us create a new web site.

In Visual Studio 2005 the concept of creating web sites has greatly improved from earlier versions. In earlier versions it was required to configure Internet Information Services (IIS) and have administrative privileges to create web sites in IIS. This is no longer needed in Visual Studio 2005. The following sources can be used for creating web sites.

File System.

Local IIS

FTP Sites

Remote Sites

Source Control

Figure 3. Different sources for creating web sites.

Let us select File | New and then select Web Site. This will display the dialog box as seen in Figure 5.

Figure 4. Creating a new web site.

Figure 5. Dialog box for creating new web site.

Let us select the project type as Visual Basic, the project Template as ASP.NET Web Site and save the web site in F:\VS2005\CIOLCodeLessApplication. In earlier versions Visual Studio.NET would create an IIS site and then map the folder to the IIS site.

Figure 6. The web application created in the folder specified.

Now we will insert a table and clicking on Layout | Insert Table will show the wizard as seen in Figure 7.

Figure 7. The wizard for creating tables in HTML.

Select Template and choose Header. This will create the table as seen in Figure 8.

Figure 8. The table created after selecting Header as the template.

Insert a Heading in the top half, align it centre, format the font and color and then type the text "Report for OneSource Corporation".

Now we will use SQL Server Express, the new code name for SQL Server 2005 — Desk top Edition and the successor to MSDE (Microsoft Data Engine). By default the instance name for SQL Server Express is SQLExpress and we will configure this in Data Connections. After creating the connection we will see the connection to the pubs database as seen in Figure 9.

 

Figure 9. The data connection to Pubs database in Server Explorer.

Now the beauty of Visual Web developer is that we can drag and drop tables on to the form and when you drag a table a GridView is created. Note that this GridView is the successor to the familiar DataGrid in previous versions. Now select the table authors and then drag it to the lower half of the table. Note that the GridView has identified the columns from the table "Authors" and there is nothing to be done to configure the data source of the GridView which was required in the DataGrid. The result is seen in Figure 10.

Figure 10. After dropping the table on the form.

Note that a new pop up window appears next to the Grid View with a list of commands. This is new in Visual Studio 2005 and is known as Smart Tasks because the common tasks related to that control will appear in that menu.

Figure 11. The Smart Task window.

Select AutoFormat and then choose Rainy Day and then click on Apply.

Figure 12. The Auto Format Window.

 

Now click on Debug — Start and then the application will launch. Now you will get this window as seen in Figure 13.

Figure 13. The prompt for enabling debugging

Click on OK.

Now you will see that Visual Web Developer has launched its own web server to run the application. This is seen in Figure 14.

Figure 14. The alert that Visual Web Developer is running its own web server.

Now the browser will launch with the application as seen in Figure 15.

Figure 15. The application launched in the browser.

Wow we have completed a web application without coding and just developed it visually.

Now let us enhance it so that we can filter the records based on a criteria. Let us filter the records on a state. We will create a drop down list box with all the states and when we select a state from the drop down list box the report will be filtered based on the state.

Modify the report to include a row in between the header and the grid and insert a drop down list box and type the phrase "Select State" next to it. The output is shown in Figure 16.

Figure 16. A drop down list box added to the form.

Now click on the common task sheet for the drop down list box and then select "Edit Items" Enter two states "CA" and "UT" as shown in Figure 17.

Figure 17. Items added to the drop down list box.

Now click on the common task pane for the SQL Data Source and then select the default pubs connection and click Next. Now you will have to modify the sql statement to filter the data based on the state selected in the drop down list box.

Select the first option "Specify Columns from a table or view" and then the lower half of the screen will be enabled. Select the first check box "*" in the columns box and then click the "Where" button and then click Next.

Figure 18. Configuring the SQL Statement to include a "where" clause.

Now complete the screen for the where clause as seen in Figure 19.

Notice that the option of selecting the source of the where condition is enhanced in Visual Studio 2005. The possible options for the source can be any of the following.

• None



• Control



• Cookie



• Form



• Profile



• Query String



• Session

Figure 19. Configuring the parameters for the "Where" Clause.

What we have done is configuring the SQL Statement to filter the data based on the state whenever the state is selected from the drop down list box. So the Select Statement becomes 'Select * from authors where state = "The selected value of the drop down list box"'.

Finally running the application will show the drop down list box with the two states "CA" and "UT" and selecting any one of the states will filter the report. The output is seen in Figure 19 and Figure 20.

Figure 20. The data filtered for the state "CA"

Figure 21. The data filtered for the state "UT"

Wow! we have completed the application without typing a single line of code.

Disclaimer

"Since this article was written when the technology .NET 2.0 is still in development, there is no guarantee that the features explained will be there in the final version and is subject to change. This article should be taken only for getting a general idea of what is going to be available in .NET 2.0 and not the actual features that will be a part of the final release of .NET 2.0"