542 ❘ CHAPTER 17 DYNAMIC DATA WEB SITE There are four types of templates discussed next. You can use these to make the site look completely different. Page Templates FIGURE 17-10 You use Page templates to change the look of tables in the site. These templates can change the look of all tables or specific tables. Page templates are located in DynamicData ➪ PageTemplates (see Figure 17-10). Entity Templates FIGURE 17-11 Entity templates are user controls to change the layout of tables. This approach gives you more control than using Page templates. For example, you can change the way insert, edit, and view tables are rendered independently. To locate the Entity templates, open Solution Explorer and select DynamicData ➪ EntityTemplates (see Figure 17-11). Field Templates To change the way a specific data type is rendered, you use Field templates. You can locate the Field templates by opening Solution Explorer and selecting DynamicData ➪ FieldTemplates (see Figure 17-12). Filter Templates When you want to change the way the filters are displayed for the tables, change the Filter templates. Filter templates are user controls that allow site users to select data to be displayed in each table. To access the Filter templates, open Solution Explorer and select DynamicData ➪ Filters (see Figure 17-13). FIGURE 17-12 FIGURE 17-13    Creating a Dynamic Data Linq to SQL Web Site ❘ 543 TRY IT OUT Changing the Look and Feel of a Dynamic Data Web Site Code file DDA.zip is available for download at Wrox.com In this Try It Out, you will make updates to the site using Page templates and Field templates. 1. Return to the DDA website. In Solution Explorer, right-click List.aspx located at DynamicData ➪ PageTemplates and choose View Markup. Look for the following H2 element: <h2 class="DDSubHeader"><%= table.DisplayName%></h2> Change it as follows: <h2 class="DDSubHeader">View or update table: <%= table. DisplayName.ToUpper%></h2> 2. View the changes in the site and you will see your change to the page heading, as shown in Figure 17-14. FIGURE 17-14 3. Go back to Visual Studio and switch to Design View on List.aspx . To switch between Design View and Markup View press Shift+F7. Right-click GridView1 and select AutoFormat. GridView1 is shown in Figure 17-15. 4. The AutoFormat dialog will open, showing the available formats for the GridView control. Select Brown Sugar as shown in Figure 17-16 and click OK.    544 ❘ CHAPTER 17 DYNAMIC DATA WEB SITE FIGURE 17-15 FIGURE 17-16 5. Run the application without debugging by pressing Ctrl+F5. If you see an error that the page can- not be found, you need to set the start page. To do so, right-click Default.aspx in the Solution Explorer and click Set as Start Page. Run again and the default page will open. Click the link to the Sales table and you will see the Brown Sugar theme, as shown in Figure 17-17. 6. To change the way text boxes look in edit mode, locate the Text _ Edit . ascx page in the FieldTem- plates folder in Solution Explorer. Right-click the file and select View Designer. 7. Select the TextBox1 control. In the Properties Window, set BackColor to Black and ForeColor to White. 8. To test your changes, press Ctrl+F5. When the site opens, click the link to authors and then click one of the Edit links. You will see the new text box design with a white font and a black back- ground. Your site should look like Figure 17-18.    Creating a Dynamic Data Linq to SQL Web Site ❘ 545 FIGURE 17-17 How It Works FIGURE 17-18 In the previous exercise, you were able to change the way the site looked. Changing Dynamic Data Web Sites is accomplished by using templates. The first change you made was to the text in the markup of the List template. You added the text View or update table: to every page on the site by changing one line of code: <h2 class="DDSubHeader">View or update table: <%= table.DisplayName.ToUpper%></h2> The site uses this template when listing table data unless a specific table has a template that overrides this one. Next, you updated the design on the GridView control. For this change, you used the AutoFormat dialog to select a theme for the data GridView controls. The change affected all tables in the site. What happened behind the scenes is the GridView control’s markup was updated. Figure 17-19 shows the GridView code before the formatting was applied. Figure 17-20 shows the same GridView after    546 ❘ CHAPTER 17 DYNAMIC DATA WEB SITE FIGURE 17-19 FIGURE 17-20    Summary ❘ 547 applying the Brown Sugar theme. If you look closely, you will see all of the styles that were added. You can customize the GridView control just about any way you can imagine using these same styles. The final change was for Textboxes on the edit and insert pages. This change affected all text fields in the database that display as a textbox. It altered the text boxes that display text, making the font white and the background black. If you want to change the design of integer data, you make the same change to the Integer _ Edit . acsx page. SUMMARY In this chapter, you learned how simple it is to create Dynamic Data websites. Using the built-in wiz- ards, you were able to create a complete data maintenance website for the pubs database. After going through the exercises, you should be able to create a data driven site for any of your databases in just minutes. This tool is extremely powerful and as you saw, based on templates. You have access to open the templates and change them so the site can be customized in just about any way you see fit. EXERCISES 1. How do you change the way date and time fields are displayed in a Dynamic Data website in edit mode? 2. How do you change the way insert pages are displayed in a Dynamic Data website? 3. What type of template do you use to change the way the site looks for just one table?    548 ❘ CHAPTER 17 DYNAMIC DATA WEB SITE  WHAT YOU HAVE LEARNED IN THIS CHAPTER TOPIC CONCEPTS Creating Dynamic Data websites Know how to create the site, add a database, create the data model, and set up the site to connect to the database Customizing pages in Dynamic Data websites Understand how to use the Page and Entity templates to change the look and feel of the website Customizing controls in Dynamic Data websites Understand how to use the Field template to change the look and feel of the website Customizing filters in Dynamic Data websites Understand how to use the Filter template to change the look and feel of the website Scaffolding Setting ScaffoldAllTables to True makes all tables available. You can set scaffolding at the table level or globally.    18 ASP.NET WHAT YOU WILL LEARN IN THIS CHAPTER: ➤ A basic overview of web applications (thin-client applications) ➤ The advantages of Web Forms versus Windows Forms ➤ Understanding the control toolbox ➤ Exploring client and server processing ➤ Assessing the possible locations for websites in VS 2010 (IIS and ASP.NET Development Server) ➤ Gaining an understanding of tools for data validation, navigation, security, data entry, and look and feel As we look to the future, the Internet is sure to increase its presence in business, so it follows that developers need to gain knowledge of building robust, dynamic websites. In this chapter, you will learn about building Web Forms applications. You will focus on the basics for website development and moving to database-driven applications. With Visual Studio 2010, you will be building data-driven sites in no time. Visual Studio 2010 is the best tool for creating ASP.NET sites on the market today. It provides you with the best IntelliSense, debugging, and control library to create websites written in Visual Basic. You can build ASP.NET websites (sometimes referred to as Web Forms applications), web services, and even sites targeted for mobile devices in VS 2010. In addition, you do not need IIS or any web server to host your site with VS 2010; ASP.NET Development Server is a built-in web server you can use to host your sites while developing them. NOTE Before you get your first look at the code, you will have a short lesson on the building blocks developers use to create web applications.    550 ❘ CHAPTER 18 ASP.NET THIN-CLIENT ARCHITECTURE In previous chapters, you have seen thick-client applications in the form of Windows Forms appli- cations. Most of the processing is completed by the client application you built earlier, and many of the applications stood on their own and needed no other applications or servers. In web develop- ment, conversely, most of the processing is completed on the server and then the result is sent to the browser. When you develop Web Forms applications, you do not have to distribute anything to the user. Any user who can access your web server and has a web browser can be a user. You must be careful with the amount of processing you place on the client. When you design a thin-client system, you must be aware that your users or customers will use different clients to access your application. If you try to use too much processing on the client, it may cause problems for some users. This is one of the major differences between Windows and Web Forms applications. You will learn about the major difference between these two types of Visual Studio 2010 applications later in this chapter. When dealing with a Windows Forms application, you have a compiled program that must be dis- tributed to the user’s desktop before they can use it. Depending upon the application, there may also be one or more supporting DLLs or other executables that also need to be distributed along with the application. In thin-client architecture, there is typically no program or DLL to be distributed. Users merely need to start their browsers and enter the URL of the application website. The server hosting the website is responsible for allocating all resources the web application requires. The client is a navigation tool that displays the results the server returns. All code required in a thin-client application stays in one central location: the server hosting the website. Any updates to the code are immediately available the next time a user requests a web page. Thin-client architecture provides several key benefits. First and foremost is the cost of initial distribution of the application — there is none. In traditional client/server architecture, the program would have to be distributed to every client who wanted to use it, which could be quite a time-consuming task if the application is used in offices throughout the world. Another major benefit is the cost of distributing updates to the application — again, there is none. All updates to the website and its components are distributed to the web server. Once an update is made, it is immediately available to all users the next time they access the updated web page. In traditional client/server architecture, the updated program would have to be distributed to every client, and the updates could take days or weeks to roll out. Thin-client architecture allows a new version of an application to be distributed instantly to all the users without having to touch a single desktop. Another major benefit is that you can make changes to the back-end architecture and not have to worry about the client. Suppose, for example, that you want to change the location of the database from a low-end server to a new high-end server. The new server would typically have a new machine name. In a traditional client/server application, the machine name of the database server is stored in the code or Registry setting. You would need to modify either the code or the Registry setting for every person who uses the application. In thin-client architecture, you simply need to update the setting of the web server to point to the new database server and you are in business, and so are all of the clients.    Web Forms versus Windows Forms ❘ 551 You can see that in a thin-client architecture model, any client with a browser can access your website and immediately have access to updates. In fact, if your changes were transparent to the user, the client wouldn’t even know that changes had been made. Now that you have a basic understanding of thin-client architecture, let’s look at how Web Forms work. WEB FORMS VERSUS WINDOWS FORMS In this section, you will get an overview of the advantages of both Windows Forms and Web Forms. This will give you an idea of when you build each type of application to solve a customer’s problem. You will almost always have to choose between these two types of architecture when building solutions, so it is important to understand some of the advantages of both. Windows Forms Advantages Windows Forms applications have advantages in some types of systems. Typically, applications that require a responsive interface, such as a point-of-sale system at a retail store, are Windows Forms applications. Also, in most cases, processor-intensive applications such as games or graphics programs are better suited to a Windows Forms program. A major advantage of Windows Forms is trust. When a user installs the application, it is given trust in the current zone. With this high-enough level of trust, you can store data and state about the current session on the local computer. The user can run the application and it can interact with the local file system or Registry seamlessly. Trust is very limited, however, for an Internet application. Another advantage is having control over the client application. This allows you to build a very power- ful, rich user interface. As you will see, numerous controls are not available to a Web Form (although this is becoming less of a difference) to permit the developer to create user-friendly applications. Win- dows Forms allow for a more ample user interface. Also, application responsiveness is an advantage with Windows Forms. With most or all of the pro- cessing being done on the client, the need to send data over the wire can be reduced. Any amount of data sent to servers can cause latency. For an application running locally on a computer, the normal events are handled more quickly. In addition, the speed of data transmission over a local network is much faster than the typical Internet connection. This speed enables data to move across the wire faster and create less of a bottleneck for the user. Web Forms Advantages Although the advantages of Web Forms may seem to be greater than the advantages of Windows Forms, don’t permit this to transform you into a full-time web developer for every project. There will always be times when Windows Forms are a better solution. The greatest advantage of a web application is distribution. To distribute a Web Forms application, just install it on the web server. That’s it. There’s no need to create an installation for every version of Windows, or ship CDs. When you make a change, just publish the change to the web server; and the next time customers access the site, they will use the latest application.    [...]... site 1 Start this project by choosing File ➪ New Web Site Make sure Visual Basic is the language, and select ASP.NET web site For the Location, change the drop-down box to File System and enter [The default path for VS 2010] \Client_ServerProcessing A default path for Windows 7 will look like C:\Users\Bryan\Documents \Visual Studio 2010\ WebSites\Client_ServerProcessing Click OK to create a file system... set in many instances Here VS has specified that the namespace for custom tags will be http://www.w3.org/ 199 9/xhtml If you browse to this site, you will see that this is the XHTML namespace defined by the W3C xml:lang="en" tells the browser the content is in English: After the root HTML element is the HEAD element Children of this element are items... HTML As a developer, you will be able to leave most of this alone Let’s go through each part of the basic HTML briefly The next line in the source code is the !DOCTYPE element This tells IE6 and later that the document conforms to the XHTML 1.0 Document Type Definition (DTD) specified by the W3C for English: ... sheet related to this document, and its location Finally, a ContentPlaceHolder in the HEAD element allows you to add to what you need to each page of the site: Also, Please break the following pink code as it will be broken in production. ... = "Changed" End Sub End Class You have completed your first ASP.NET page In this exercise, you saw a few basic controls and learned that client and server code are handled differently In the next section, you will learn where you can host websites with Visual Studio 2010 Website Locations with VS 2010 When you create a new site, you have a choice of locations for the site The example in this chapter... supplies thousands of namespaces, objects, and controls for use in developing Web Forms applications In addition, ASP.NET also supports all NET-compatible languages By default, Visual Basic and C# are available in Visual Studio 2010 Special Website Files When you work with ASP.NET, you will see many special files These files are very important, and each could have an entire chapter written about it The... development environment Grid View ... event The label will display Changed after you click the Server button 7 Close the browser and go back to Visual Studio 2010 Create an event handler for the HTML Input (Button) and add a title to the page (Make sure you have the Default.aspx page open in the IDE and that the Properties window has DOCUMENT selected.) To add a title, find the Title property and set it to My First Page On the tag navigator,... combo box, choose btnClient Next, select onclick in the event combo box and add the following bolded code to the event that VS 2010 creates (note that JavaScript is case sensitive): function btnClient_onclick() { document.getElementById(˝lblClient˝).innerText = ˝Changed˝; document.getElementById(˝lblServer˝).innerText = ˝Server˝; } 8 Run the project again by pressing Ctrl+F5 Test both buttons How It... again by pressing Ctrl+F5 Test both buttons How It Works Now you can see that Web Forms development is very similar to Windows Forms development This is one of the benefits of NET development and Visual Studio 2010 Microsoft has made it easy for any developer to switch from client server to web to Windows development with only a small learning curve First, consider the HTML source The first line of code . focus on the basics for website development and moving to database-driven applications. With Visual Studio 2010, you will be building data-driven sites in no time. Visual Studio 2010 is the best. addition, ASP.NET also supports all .NET-compatible languages. By default, Visual Basic and C# are available in Visual Studio 2010. Special Website Files When you work with ASP.NET, you will see many. created to develop common protocols for the Web in the 199 0s. You can read more about the W3C at their website, at www.w3.org . Although VS 2010 allows you to design ASP.NET websites without firsthand