Professional ASP.NET 3.5 in C# and Visual Basic Part 95 docx

Evjen c19.tex V2 - 01/28/2008 3:08pm Page 898 Chapter 19: ASP.NET AJAX AJAX is dependent upon a few technologies in order for it to work. The first is the XMLHttpRequest object. This object allows the browser to communicate to a back-end server and has been available in the Microsoft world since Internet Explorer 5 through the MSXML ActiveX component. Of course, the other major component is JavaScript. This technology provides the client-side initiation to communication with the back-end services and takes care of packaging a message to send to any server-side services. Another aspect of AJAX is support for DHTML and the Document Object Model (DOM). These are the pieces that will change the page when the asynchronous response is received from the server. Finally, the last piece is the data that is being transferred from the client to the server. This is done in XML or, more important, JSON. Support for the XMLHttpRequest object gives JavaScript functions within the client script library the capability to call server-side events. As stated, typically HTTP requests are issued by a browser. It is also the browser that takes care of processing the response that comes from the server and then usually regenerates the entire Web page in the browser after a response is issued. This process is detailed in Figure 19-3. Figure 19-3 898 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 899 Chapter 19: ASP.NET AJAX If you use the XMLHttpRequest object from your JavaScript library, you do not actually issue full page requests from the browser. Instead, you use a client-side script engine (which is basically a JavaScript function) to initiate the request and also to receive the response. Because you are also not issuing a request and response to deal with the entire Web page, you can skip a lot of t he page processing because it is not needed. This is the essence of an AJAX Web request. It is illustrated in Figure 19-4. Figure 19-4 As stated, this opens the door to a tremendous number of possibilities. Microsoft has provided the neces- sary script engines to automate much of the communication that must take place in order for AJAX-style functionality to occur. ASP.NET AJAX and Visual Studio 2008 Prior to Visual Studio 2008, the ASP.NET AJAX product used to be a separate installation that you were required to install on your machine and the Web server that you were working with. This release gained in popularity quite rapidly and is now a part of the Visual Studio 2008 offering. Not only is it a part of the Visual Studio 2008 IDE, the ASP.NET AJAX product is also baked into the .NET Framework 3.5. This means that to use ASP.NET AJAX, you don’t need to install anything if you are working with ASP.NET 3.5. 899 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 900 Chapter 19: ASP.NET AJAX If you are using an ASP.NET version that is prior to the ASP.NET 3.5 release, then you need to visit www.asp.net/AJAX to get the components required to work with AJAX. ASP.NET AJAX is now just part of the ASP.NET framework. When you create a new Web a pplication, you do not have to create a separate type of ASP.NET application. Instead, all ASP.NET applications that you create are now AJAX-enabled. If you have already worked with ASP.NET AJAX prior to this 3.5 release, you will find that there is really nothing new to learn. The entire technology is seamlessly integrated into the overall development experience. Overall, Microsoft has fully integrated the entire ASP.NET AJAX experience so you can easily use Visual Studio and its visual designers to work with your AJAX-enabled pages and even have the full debugging story that you would want to have with your applications. Using Visual Studio 2008, you are now able to debug the JavaScript that you are using in the pages. In addition, it is important to note that Microsoft focused a lot of attention on cross-platform compatibility with ASP.NET AJAX. You will find that the AJAX-enabled applications that you build upon the .NET Framework 3.5 can work within all the major up-level browsers out there (e.g., Firefox and Opera). Client-Side Technologies There really are two parts of the ASP.NET AJAX story. The first is a client-side framework and a set of services that are completely on t he client-side. The other part of the story is a server-side framework. Remember that the client-side of ASP.NET AJAX is all about the client communicating asynchronous requests to the server-side of the offering. For this reason, Microsoft offers a Client Script Library, which is a JavaScript library that takes care of the required communications. The Client Script Library is presented in Figure 19-5. The Client Script Library provides a JavaScript, object-oriented interface that is reasonably consistent with aspects of the .NET Framework. Because browser compatibility components are built in, any work that you build in this layer or (in most cases) work that you let ASP.NET AJAX perform for you here will func- tion with a multitude of different browsers. Also, several components support a rich UI infrastructure that produces many things that would take some serious time to build yourself. The interesting thing about the client-side technologies that are provided by ASP.NET AJAX is that they are completely independent of ASP.NET. In fact, any developer can freely download the Microsoft AJAX Library (again from asp.net/AJAX ) and use it with other Web technologies such as PHP ( php.net ) and Java Server Pages (JSP). With that said, really the entire Web story is a lot more complete with the server-side technologies that are provided with ASP.NET AJAX. Server-Side Technologies As an ASP.NET developer, you will most likely be spending most of your time on the server-side aspect of ASP.NET AJAX. Remember that ASP.NET AJAX is all about the client-side technologies talking back to the server-side technologies. You can actually perform quite a bit on the server-side of ASP.NET AJAX. 900 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 901 Chapter 19: ASP.NET AJAX Figure 19-5 The server-side framework knows how to de al with client requests (e.g., putting responses in the correct format). The server-side framework also takes care of the marshalling of objects back and forth between JavaScript objects and the .NET objects that you are using in your server-side code. Figure 19-6 illustrates the server-side framework provided by ASP.NET AJAX. When you have the .NET Framework 3.5, you will have the ASP.NET AJAX Server Extensions on top of the core ASP.NET 2.0 Framework, the Windows Communication Foundation, as well as ASP.NET-based Web services ( .asmx ). Developing with ASP.NET AJAX There are a couple of types of Web developers out there. There are the Web developers who are used to working with ASP.NET and who have experience working with server-side controls and manipulating these controls on the server-side. Then there are developers who concentrate on the client-side and work with DHTML and JavaScript to manipulate and control the page and its behaviors. 901 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 902 Chapter 19: ASP.NET AJAX Figure 19-6 With that said, it is important to realize that ASP.NET AJAX was designed for both types of developers. If you want to work more on the server-side of ASP.NET AJAX, you can use the new ScriptManager control and the new UpdatePanel control to AJAX-enable your current ASP.NET applications with little work on your part. All this work can be done using the same programming models that you are quite familiar with in ASP.NET. Both the ScriptManager and the UpdatePanel controls are discussed later in this chapter. In turn, you can also use the Client Script Library directly and gain greater control over what is happen- ing on the client’s machine. Next, this chapter looks at building a simple Web application that makes use of AJAX. ASP.NET AJAX Applications The next step is to build a basic sample utilizing this new framework. First create a new ASP.NET Web Site application using the New Web Site dialog. Name the project AJAXWebSite . You will notice (as shown here in Figure 19-7) that there is not a separate type of ASP.NET project for building an ASP.NET AJAX application because every ASP.NET application that you now build is AJAX-enabled. 902 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 903 Chapter 19: ASP.NET AJAX Figure 19-7 After you create the application, you will be presented with what is now a standard Web Site project. However, you may notice some additional settings in the web.config file that are new to the ASP.NET 3.5. At the top of the web.config file, there are new configuration sections that are registered that deal with AJAX. This section of web.config is presented in Listing 19-1. Listing 19-1: The <configSections> element for an ASP.NET 3.5 application < ?xml version="1.0"? > < configuration > < configSections > < sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" > < sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" > < section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/ > Continued 903 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 904 Chapter 19: ASP.NET AJAX < sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" > < section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere" / > < section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" / > < section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" / > < section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" / > < /sectionGroup > < /sectionGroup > < /sectionGroup > < /configSections > < ! Configuraiton removed for clarity > < /configuration > With the web.config file in place (as provided by the ASP.NET Web Site project type), the next step is to build a simple ASP.NET page that does not yet make use of AJAX. Building a Simple ASP.NET Page Without AJAX The first step is to build a simple page that does not yet make use of the AJAX capabilities offered by ASP.NET 3.5. Your page needs only a Label control and Button server control. The code for the page is presented in Listing 19-2. Listing 19-2: A simple ASP.NET 3.5 page that does not use AJAX VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Label1.Text = DateTime.Now.ToString() End Sub < /script > 904 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 905 Chapter 19: ASP.NET AJAX < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > My Normal ASP.NET Page < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:Label ID="Label1" runat="server" >< /asp:Label > < br / > < br / > < asp:Button ID="Button1" runat="server" Text="Click to get machine time" onclick="Button1_Click" / > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } < /script > When you pull this page up in the browser, it contains only a single button. When the button is clicked, the Label control that is on the page is populated with the time from the server machine. Before the button is clicked, the page’s code is similar to the code presented in Listing 19-3. Listing 19-3: The page output for a page that is not using AJAX < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns="http://www.w3.org/1999/xhtml" > < head >< title > My Normal ASP.NET Page < /title >< /head > < body > < form name="form1" method="post" action="Default.aspx" id="form1" > < div > < input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4OTg4OTc0MjVkZIgwrMMmvqXJHfogxzgZ92wTUORS" / > < /div > < div > < span id="Label1" >< /span > < br / > < br / > < input type="submit" name="Button1" value="Click to get machine time" id="Button1" / > < /div > Continued 905 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 906 Chapter 19: ASP.NET AJAX < div > < input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLFpoapCAKM54rGBkhUDe2q/7eVsROfd9QCMK6CwiI7" / > < /div >< /form > < /body > < /html > There is not much in this code. There is a little ViewState and a typical form that will be posted back to the Default.aspx page. When the end user clicks the button on the page, a full post back to the server occurs and the entire page is reprocessed and returned to the client’s browser. Really, the only change made to the page is that the < span id="Lable1" >< /span > element is populated with a value, but in this case, the entire page is returned. Building a Simple ASP.NET Page with AJAX The next step is to build upon the page from Listing 19-2 and add AJAX capabilities to it. For this example, you will be adding some additional controls. Two of the controls to add are typical ASP.NET server controls — another Label and Button server control. In addition to these controls, you are going to have to add some ASP.NET AJAX controls. In the Visual Studio 2008 toolbox, you will find a new section titled AJAX Extensions. This new section is shown in Figure 19-8. Figure 19-8 From AJAX Extensions, add a ScriptManager server control to the top of the page and include the second Label and Button control inside the UpdatePanel control. The UpdatePanel control is a template server control and allows you to include any number of items within it (just as other templated ASP.NET server controls). When you have your page set up, it should look something like Figure 19-9. The code for this page is shown in Listing 19-4. Listing 19-4: A simple ASP.NET AJAX page VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, _ 906 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 907 Chapter 19: ASP.NET AJAX ByVal e As System.EventArgs) Label1.Text = DateTime.Now.ToString() End Sub Protected Sub Button2_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Label2.Text = DateTime.Now.ToString() End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > My ASP.NET AJAX Page < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < asp:Label ID="Label1" runat="server" >< /asp:Label > < br / > < br / > < asp:Button ID="Button1" runat="server" Text="Click to get machine time" onclick="Button1_Click" / > < br / > < br / > < asp:UpdatePanel ID="UpdatePanel1" runat="server" > < ContentTemplate > < asp:Label ID="Label2" runat="server" Text="" >< /asp:Label > < br / > < br / > < asp:Button ID="Button2" runat="server" Text="Click to get machine time using AJAX" onclick="Button2_Click" / > < /ContentTemplate > < /asp:UpdatePanel > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } protected void Button2_Click(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString(); } < /script > 907 . anything if you are working with ASP. NET 3. 5. 899 Evjen c19.tex V2 - 01/28/2008 3: 08pm Page 900 Chapter 19: ASP. NET AJAX If you are using an ASP. NET version that is prior to the ASP. NET 3. 5 release,. name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version =3. 5. 0.0, Culture=neutral, PublicKeyToken =31 BF3 856 AD364E 35& quot; requirePermission="false" allowDefinition="MachineToApplication"/ > Continued 9 03 Evjen c19.tex. offering. Not only is it a part of the Visual Studio 2008 IDE, the ASP. NET AJAX product is also baked into the .NET Framework 3. 5. This means that to use ASP. NET AJAX, you don’t need to install