Designing and Developing Web Applications Using Microsoft .NET Framework 4: Designing the Application Architecture

Objective 1.4: Choose Appropriate Server-Side Technologies

The .NET Framework is so robust that there are often many ways to accomplish a single task. This objective includes a high-level overview of the different server-side technologies and describes the scenarios in which you would use each of them.

Choosing Between Different Control Types

The .NET Framework provides many types of controls, including HTML, server, user, Web Parts, custom, and dynamic data. The sections that follow provide an overview of each type of control and describe the scenarios in which you would use each.

HTML Controls

Use HTML controls when you need to create an HTML element without server-side logic. For example, you can create an input text box using either an HTML control or a server control. The Input (Text) HTML control simply creates the HTML <input> element, without directly providing server-side code access to anything the user types in the text box. If the user submits a form to the server, the contents of any HTML controls will be lost. You could still access the user input in an HTML control from client-side JavaScript, however.

Server Controls

ASP.NET renders server controls into HTML elements. For example, the TextBox server control is rendered into an HTML <input> element, similar to the Input (Text) HTML control. Server controls provide more robust features, however. With server controls, you can process user input from the code-behind file, and ASP.NET automatically maintains controls between page loads. Server controls require more processing time on the server, and their view state consumes additional bandwidth. As with HTML controls, you can access rendered server controls from client-side JavaScript.

Although the 70-519 exam does not test most of the details of implementing server controls, it does require you to know how to enable Cascading Style Sheet (CSS) styling for controls that have it disabled by default. These server controls were originally designed before CSS was commonly used, and as a result, they use tables for styling. All modern web applications should use CSS styling.

The .NET Framework provides different properties for different controls:

• RenderOuterTable. Several server controls (including FormView, Login, and ChangePassword) have a property named RenderOuterTable. Set the RenderOuterTable property to false to control the appearance of the controls with CSS style sheets.

• RepeatLayout. RadioButtonList, CheckBoxList, and DataList include the RepeatLayout property. Like RenderOuterTable, RepeatLayout uses a table for formatting. Set RepeatLayout to Flow (instead of the default Table) to control the appearance of the controls with CSS style sheets.

User Controls

User controls are custom server-side controls deployed using an .ascx file. Typically, user controls contain multiple server or HTML controls. You should create user controls under the following circumstances:

• You need to include a group of server controls in multiple ASPX pages.

• You need to deploy a custom control as a separate assembly.

• The layout is primarily static.

If you need to persist data between page loads, store the data in control state. Control state functions even when a developer has disabled view state.

Do not use user controls to display common user interface elements in the same position on every page within your site. Instead, use master pages. For example, if you want to display the weather in the upper-right corner of every page, you should add the weather element to your master page. However, if you want to display the weather in different locations on different pages, you should implement it as a user control.

Web Parts

Web Parts are controls that include built-in functionality to allow end users to customize their location, appearance, and functionality. You can use Web Part Connections to provide data to individual Web Parts. Choose Web Parts over other types of controls when user customization is important—for example, if you need the user to be able to move the control to a different spot on the webpage or change the colors of the control.

Custom Server Controls

Although user controls are typically composed of HTML and server controls, custom server controls provide you complete flexibility. You have complete control over how ASP.NET renders a custom server control into HTML, so you can accomplish almost anything. Custom server controls take more effort to create than user controls, however.

If your custom server control does not resemble any existing server controls, inherit from System.Web.WebControls.WebControl. Most of the time, however, you should inherit from an existing server control that provides similar functionality to your custom server control. For example, if you wanted to display a list of check boxes with associated images, you might inherit from the CheckBoxList class; add properties for the image URL, title, and alt tags; and then update the rendering to add the <img> information to the HTML output.

You can add custom controls to the Visual Studio toolbox, which you cannot do with user controls.

Dynamic Data Controls

Dynamic data controls are among the most complex controls in the .NET Framework. Dynamic data controls connect to a LINQ-to-SQL object model or LINQ-to-Entities object model and display data in a tabular format, allowing for sorting, filtering, and paging. Users can use links to edit and delete records directly from a dynamic data control.

Choose dynamic data controls when you want to view or edit data in a database with minimal development time and a standard tabular display will suffice.

Using Partial Classes and Methods

When you create a new website or web application, Visual Studio automatically generates a large amount of code. This auto-generated code includes many of the most important classes in your application, including your Page class and your data classes. By automatically generating code based on the template you chose, Visual Studio saves you from writing hundreds of lines of code just to provide basic website functionality.

You can use partial classes and methods to add your own custom code to the auto-generated code. A partial class allows you to add entirely new properties, methods, and events to a class, without editing the auto-generated code or rewriting the class from scratch. Similarly, a partial method allows you to add code to an auto-generated method.

Use partial classes and methods when Visual Studio auto-generates a class or method but you need to extend its functionality.

Accessing Server Methods from Client Code

The most common way to call a server-side method from the client is to configure a server control, such as a Button control, to run the method for its Click event handler. However, this technique requires a postback.

If you prefer not to reload the page, you can use one of these techniques to allow client-side code to call server-side methods and process the results:

• UpdatePanel. You can place server controls within an UpdatePanel container, and trigger the UpdatePanel to refresh itself when a trigger occurs. Often, triggers are clicking a button or changing a drop-down list selection. Using an UpdatePanel does not require manually writing JavaScript code.

• UpdateProgress. UpdateProgress is visible only when an associated UpdatePanel control is updating. UpdateProgress is designed to give users feedback about the UpdatePanel asynchronous request.

• Page methods. Mark the static method you want to expose with the WebMethod attribute, add a ScriptManager server control, and set ScriptManager.EnablePageMethods to true. Then you can use the PageMethods object within JavaScript to call server-side methods and process the results.

• Web services. Microsoft AJAX and jQuery are both capable of easily consuming web services. Therefore, you can write client-side code to consume any static method that you expose by using WebMethod. To access the method using the JSON format, also add the ScriptService attribute.

Using an UpdatePanel requires less code than using a page method, but it transfers view state as well, so the request and response are larger than page method calls. With a page method control, you can’t access the contents of server controls, such as what a user typed into a TextBox, directly from a page method called by the client. Instead, you need to pass values to the page method as parameters.

Objective Summary

• HTML controls provide high performance with minimal overhead, but server controls provide much easier access to their properties and values. User controls allow you to easily combine multiple server controls into a single object. Web Parts provide robust capabilities and allow end users to personalize their appearance and move them to different locations. For the ultimate in flexibility, create custom server controls. Dynamic data controls automatically adjust their appearance to the underlying data source, allowing you to quickly display and manage data.

• Partial classes and methods allow you to extend classes that Visual Studio automatically generates.

• HtmlHelpers provide an easy way to add HTML controls to MVC views. You can create custom HtmlHelper extensions for HTML elements that are not provided with the built-in HtmlHelpers.

• You can access server methods directly from client JavaScript code, saving a full page load. The easiest way to do this is to use a page method with Microsoft AJAX.

Objective Review

Answer the following questions to test your knowledge of the information in this objective. You can find the answers to these questions and explanations of why each answer choice is correct or incorrect in the Answers section at the end of this chapter.

1. You are creating a new web application. You must meet these requirements:

   • Use the Login control to allow users to authenticate.

   • Allow a web designer to configure the appearance of all controls using classes in CSS style sheets.

   How should you configure the Login control? (Choose two. Each answer forms part of the complete solution.)

   1. Define the CssClass property.

   2. Set the RenderOuterTable property to true.

   3. Set the RenderOuterTable property to false.

   4. Define the LoginButtonType property.

2. You are planning to write client-side JavaScript that must retrieve and display a string value returned by a server-side method. You want the messages sent between the client and server to be as small as possible. Which approach should you choose?

   1. Create a partial class.

   2. Use an UpdateProgress control.

   3. Use an UpdatePanel control.

   4. Use a Microsoft AJAX page method.

3. You are creating a view for an MVC application. You need to create a non-standard HTML control that should be rendered on the server. You must minimize the amount of client and server resources used as well as your development time. Which approach should you choose?

   1. Use the jQuery library to dynamically add the HTML control to the document object model.

   2. Create an HtmlHelper extension.

   3. Create a custom server control.

   4. Create a custom Web Part.