828-8 CH10.qxd 10/11/07 10:47 AM CHAPTER Page 225 10 Building a Sample Application Using ASP.NET AJAX T hroughout this book, you’ve been exploring some of the underpinning technologies of ASP.NET AJAX, including the client-side JavaScript libraries, which are object-oriented additions to JavaScript You’ve also seen the power of ASP.NET AJAX server controls and the ease with which they can be used to add asynchronous update functionality to an ASP.NET page In addition, we explored the rich set of UI controls and extenders offered as part of the ASP.NET AJAX Control Toolkit Lastly, we reviewed the Virtual Earth SDK, and you saw how to add AJAX-style mapping functionality to your web applications In this chapter, you’ll go through, in detail, what it takes to build an application that makes the most of these features to deliver a real-world application The application you will build is a very simple financial research tool that delivers stock quotes, extended stock information, and some price history analytics This sort of information is typically used in technical analysis stock trading Stock traders use a number of methodologies to determine a good buying or selling price of a stock, including fundamental analysis, where you look at company fundamentals such as dividends, profits, earnings per share, gross sales, and more—usually a good methodology when investing in a company for medium- to long-term investments Day traders, who are looking for a quick in and out, typically use technical analyses where they want to look at the momentum of the stock based on how it has performed in similar situations recently The closing price for a stock over time is called the price history, and by applying various mathematical transforms to it, a day trader can guess where it is going to go It’s an inexact science, but when carefully applied, it can be effective We will also use Bollinger band–based analysis of price history and see how to deliver it in an ASP.NET AJAX application You’ll see how technical traders use this to determine potential times to get in and out of a stock This should not be construed as investment advice; it is provided for informational use only and as a demonstration of the ASP.NET technology You can see a snapshot of this application in Figure 10-1 225 828-8 CH10.qxd 226 10/11/07 10:47 AM Page 226 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX Figure 10-1 An ASP.NET AJAX-based stock application Understanding the Application Architecture The application is built as a typical logical n-tier application comprising a resource tier that contains the back-end resources In this case, the resources are the Company Information web service (courtesy of Flash-db.com, a provider of a number of useful and free web services) and the Price History web service that provides comma-separated values (CSV) over HTTP from Yahoo! You can see the architecture in Figure 10-2 828-8 CH10.qxd 10/11/07 10:47 AM Page 227 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX Figure 10-2 Application logical architecture In a multitiered architecture like this, the information that drives your service comes from the resource tier In many applications, and this one is no exception, the information is read-only—you are simply presenting the resources to the end user However, the raw resources are rarely presented Some value has to be added to show how you visually present them and also how you enhance them for presentation using business logic Many applications blur the distinction between business logic and presentation logic, but it is important to distinguish these When using ASP.NET AJAX, the ability to distinguish them becomes a lot easier 227 828-8 CH10.qxd 228 10/11/07 10:47 AM Page 228 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX This is because before AJAX, a developer would have to make a full-page refresh whenever the user interacted with the page Then, with the advent of DHTML, they could make a decision—for a simple interaction and for a bit of business logic, it might be easier not to it on the server but instead to it using a script on the page For example, if the current price for the stock is on the page, the current earnings are known to the page, and the user wants to display the profit/earnings (P/E) ratio (which divides the former by the latter), why not just calculate it using an on-page JavaScript and then render it in a element instead of performing yet another round-trip to the server and producing a “blink” as the page refreshes? This can quickly lead to a maintenance nightmare and is a common problem that has been solved by asynchronous updates Now with AJAX (when implemented correctly), despite making a round-trip to the server, the overall size of the packets of data getting passed will be a lot smaller because you are just going to update part of the page; the entire page will not “flash” as it refreshes the user interface with the update Beneath the resource tier comes the data retrieval tier In a clean architecture, this is kept separate from the logic so that if data sources change, you don’t need to get into the business logic plumbing and rip it out It should provide a clean interface to the data layer Visual Studio 2005 offers you the facility to create a proxy to an existing web service, which you can use to implement a data retrieval tier In this application, the Price History web service from Yahoo! provides CSV over HTTP, so you will implement a web service that wraps this functionality and can easily be proxied The business logic tier is where you add value to your resources through aggregation, integration, and calculation For example, when calculating the P/E, discussed earlier, with price information coming from one resource and earnings from another, instead of integrating and calculating these on the page level, you aggregate the information in the business logic tier where the function performing the calculation calls the data retrieval tier to get the information from both resources and then performs the calculation It then provides the resultant information to the presentation tier as a response to the original request for the P/E analytic The presentation tier is typically server-side logic that provides the markup and/or graphics that will get rendered in the browser This can be anything from a C-based CGI service that generates raw HTML to an advanced control-based ASP.NET server application In this case, the example will use a variety of technologies, from ASP.NET controls that will render HTML that is generated by server-side C# code to advanced graphics functionality that renders the time series chart (you can see these charts in Figure 10-1) Finally, what appears to the user is the output of this presentation tier, which is a document that contains HTML, graphics, JavaScript, style sheets, and anything else the browser needs to render As you see how to construct the application, you’ll see each of these tiers in a little more detail 828-8 CH10.qxd 10/11/07 10:47 AM Page 229 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX Creating the Application As you saw in Figure 10-1, this application consists of a top header where the stock ticker and company information is displayed, followed by three tabs in a TabContainer control that host the extended quote information, price history, and Bollinger band analytic charts Let’s start by creating a new ASP.NET AJAX-enabled web site Create the basic layout of the application along with the corresponding TabContainer and TabPanel controls from the ASP.NET AJAX Control Toolkit After creating the basic UI shell, we’ll look into the data tier and explore how data is obtained and consumed in this application This application requires a stock ticker as the only source of user input As such, upon creating the ScriptManager, UpdatePanel, and Timer control (all of which are fully discussed later), an ASP.NET Label control and a TextBox control are necessary Another Label control is also needed to host the basic stock information such as company name, current price, and price change on the top header The top section of the page should look similar to Figure 10-3 Figure 10-3 Creating the top section of the application As mentioned earlier, this application will have three tabs that contain much of its functionality The back-end processing and rendering for each tab should only occur when the user clicks the tab This way, additional overhead of recreating everything is avoided, and also the user is presented with the most up-to-date information for the selected stock ticker To create the tabs, from the ASP.NET AJAX Control Toolkit tab on the Toolbox in Visual Studio, drag and drop a new TabContainer control onto the page with the tag of the main UpdatePanel You can then use the designer window to add three tabs (TabPanel controls) to the TabContainer control and name them “Basic Quote”, “Price History”, and “Charts & Analytics”, respectively Lastly, specify an event 229 828-8 CH10.qxd 230 10/11/07 10:47 AM Page 230 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX handler for the ActiveTabChanged event This, of course, can also be done in code as shown in the following segment: Basic Quote Price History Charts & Analytics You can see the created tabs in design view in Figure 10-4 828-8 CH10.qxd 10/11/07 10:47 AM Page 231 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX Figure 10-4 Three TabPanel controls in a TabContainer control That’s basically all there is to the outer shell of the UI A bit later, we will add an UpdateProgress control to notify the user when postbacks are occurring As mentioned earlier, we wanted to only execute code for each pane when it becomes active In other words, we not want all panes rendered at all times Therefore, in the ActiveTabChanged event handler, the specific rendering code for each pane must be stated as shown here: protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e) { Update(TabContainer1.ActiveTabIndex); } 231 828-8 CH10.qxd 232 10/11/07 10:47 AM Page 232 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX To specify rendering code for each pane, let’s define a method named Update, which takes in the index of the active tab as its only parameter Inside the Update method, we need to determine the active tab and execute the corresponding method: private void Update(int selectedTabIndex) { switch (selectedTabIndex) { case 0: //Basic Quote lblBasicQuote.Text = GetBasicQuote(txtTicker.Text.Trim()); break; case 1: //Price History GetPriceHistory(txtTicker.Text.Trim()); break; case 2: //Analytics GetAnalytics(txtTicker.Text.Trim()); break; } } A simple switch statement does the job here Based on the active tab index, the appropriate method is called to render the tab Three methods are called here, one for each of three tabs that all have the same signature: one parameter that takes in the stock ticker entered by the user in the TextBox control The individual methods, GetBasicQuote, GetPriceHistory, and GetAnalytics, are covered a little later in this chapter With that out of the way, let’s take a closer look at how to obtain the required data and implement the individual sections of this application Creating Basic Company and Quote Information Flash-db.com provides several hosted web services free of charge One of these services is the excellent Company Information web service, which provides basic and extended stock price information, as well as the name of the company associated with a stock ticker Accessing this from a Visual Studio 2005 application is straightforward The WSDL (Web Services Description Language) for the web service is hosted at the following location: http://www.flash-db.com/services/ws/companyInfo.wsdl To create a proxy to this WSDL, right-click your project in Solution Explorer, and select Add Web Reference (see Figure 10-5) 828-8 CH10.qxd 10/11/07 10:47 AM Page 233 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX Figure 10-5 Adding a web reference A dialog box appears in which you specify the WSDL of the service you are referencing In the URL text box, enter http://www.flash-db.com/services/ws/companyInfo.wsdl (see Figure 10-6) When you enter a valid WSDL here, the description pane updates with the supported functions on the web service, as well as the services that are available to this WSDL (multiple services can be published to a single WSDL) In the Web Reference Name field, you should enter a friendly name, such as companyInfo, because this is the name that will be generated for the proxy that talks to the web service on your behalf Click the Add Reference button to generate the proxy class for the web service 233 828-8 CH10.qxd 234 10/11/07 10:47 AM Page 234 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX Figure 10-6 Specifying the WSDL The Company Information web service is used in the application to present the name of the company as well as the current price information Now there needs to be a method called GetCompanyInfo in which we write the code to use a few of the properties to get the actual company data After that, this information needs to be assigned to the lblQuote control as shown in the following code snippet: private void GetCompanyInfo(string strTicker) { companyInfo.CompanyInfoService service = new companyInfo.CompanyInfoService(); companyInfo.CompanyInfoResult result = service.doCompanyInfo("anything", "anything", strTicker); lblQuote.Text = result.company + "Current Price: " + result.lastPrice + "Change: " +result.change; } This function updates the company information pane as well as the price history text and graphs Also, because this is the one piece of information that does not reside within the tabs, it should be rendered and updated without the user clicking on the individual tabs Furthermore, the user should be able to enter a new stock ticker in the main ... 10:47 AM Page 226 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX Figure 10-1 An ASP.NET AJAX- based stock application Understanding the Application Architecture The application. .. 10/11/07 10:47 AM Page 244 CHAPTER 10 ■ BUILDING A SAMPLE APPLICATION USING ASP.NET AJAX As such, ZedGraph makes an excellent choice for use in an ASP.NET AJAX- based project and is easy to implement... history, and Bollinger band analytic charts Let’s start by creating a new ASP.NET AJAX- enabled web site Create the basic layout of the application along with the corresponding TabContainer and TabPanel