Reporting with ASP.NET Web Forms.

8547ch05final.qxd 8/30/07 4:01 PM CHAPTER Page 147 Reporting with ASP.NET Web Forms I am confident that you had fun and enjoyed developing reports with Windows Forms in the previous chapter I promise to continue the same fun in this chapter However, the reporting host client will be different—now, we’ll develop reports for ASP.NET Web Forms Web Forms is a unique report delivery vehicle By exposing your reports on the Web, you’re reaching a far greater user base, in comparison to Windows Forms All a user needs is access to an Internet browser and authorization to access your report Reporting for the Web is always challenging for report developers, as the Web understands the language of HTML; for report developers, rendering complex output in HTML format is constantly a challenge Well, the good news is that now developers can breathe a sigh of relief, as client-side RS comes to the rescue You just have to design the report; the ReportViewer takes care of everything else! You can see the same rich report output with Web Forms as you have seen with Windows Forms, and although Web Forms is a different report hosting client, developing reports remains the same This chapter will cover • “ASP.NET Web Sites 101”, a step-by-step tutorial for using web sites • A variety of reporting projects ASP.NET Web Sites 101 ASP.NET is a technology that developers can use to build dynamic web sites It is a successor to Microsoft’s Active Server Pages (ASP) technology ASP.NET is part of NET development platform, starting from its first release with the NET framework Like Windows Forms, ASP.NET Web Forms are built using the Common Language Runtime (CLR); therefore, they allow developers to code using their choice of any NET scripting language In this book, as usual, we’ll use C# Similar to Windows Forms, ASP.NET helps you develop for the Web by making cool web controls available with rich design-time support You’ll be glad to see web controls such as buttons or text boxes function the same way as you have experienced while developing Windows Forms clients 147 8547ch05final.qxd 148 8/30/07 4:01 PM Page 148 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS These web controls are rendered into HTML when a web page is delivered to a user’s browser You, as a developer, will also enjoy the event-driven GUI model to code against Apart from this, you’ll benefit from a lot of other cool stuff, such as view state management and support for AJAX ■Note AJAX (Asynchronous JavaScript and XML) is a web development technique used for creating interactive web applications Its ability to reduce postback trips to the server makes it popular among many developers You can learn more on ASP.NET AJAX here: http://ajax.asp.net/ An ASP.NET web site needs Internet Information Services (IIS) as a host The web site can be hosted with local IIS or on a remote machine For our reporting project, you’ll see the reports in action using the integrated web server of the Visual Studio IDE This internal web server will act like IIS for use during the development phase Covering everything offered by ASP.NET technology is beyond the reach of this book, so in this chapter, we’ll use only the facilities that are needed to develop and host RS with web forms You can learn more details about ASP.NET here: http://msdn2.microsoft.com/en-ca/asp.net/default.aspx Creating a Web Site Project Please open Visual Studio, and use the following steps to create an ASP.NET web site project; see Figure 5-1 for a graphical representation of these steps: Click File ➤ New ➤ Web Site In the Templates pane of the New Web Site dialog box, select ASP.NET Web Site From the Language drop-down menu, select Visual C# Please give the application a name; I’ve called the web site RSWebSite101 You may choose a different location for storing the application files according to your preference Click the OK button to finish the process Visual Studio will create a new ASP.NET web site Figure 5-2 shows the code that’s produced and the files inside Solution Explorer 8547ch05final.qxd 8/30/07 4:01 PM Page 149 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS Figure 5-1 Creating a new ASP.NET web site Figure 5-2 The newly created ASP.NET web site As you can see in Figure 5-2, the project contains the App_Code folder and a blank web page Default.aspx The generated code is a complete web site, ready to host with IIS Does the generated code looks familiar to you? I’m sure your answer is “yes” if you know HTML The HTML language makes use of tags to help the browser understand the pages’ content You can learn more about HTML here: http://msdn2.microsoft.com/en-us/library/ms537623.aspx 149 8547ch05final.qxd 150 8/30/07 4:01 PM Page 150 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS Let’s assume we hosted this web site with the local IIS Now, what you think this site is supposed to do? This site will appear as a blank page inside the user’s browser with nothing to display Therefore, before we build the site, let’s add ReportViewer to it Adding ReportViewer to Default.aspx We know we need the ReportViewer to preview the report Before adding the ReportViewer, please make sure the Default.aspx page is open in the designer in source view mode (similar to the view in Figure 5-2) Let’s add the ReportViewer now by dragging Data ➤ ReportViewer from the toolbox and dropping it between the tags; please see Figure 5-3 for an illustration of the process Figure 5-3 Process to add the ReportViewer to Default.aspx ■Note You can also add the ReportViewer to the Default.aspx page by switching to design view and dragging and dropping the ReportViewer control onto the design surface As a result of this, a ReportViewer control will be added to the Default.aspx page with the ID reportViewer1 After you add the ReportViewer, your generated HTML code should be similar to the following: 8547ch05final.qxd 8/30/07 4:01 PM Page 151 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS Untitled Page After you add the ReportViewer, extra lines of code are added: the first lines contain the registration information of the Microsoft.ReportViewer.WebForms assembly The second new tag here, between the tags, refers to our newly added ReportViewer So, are you curious to see how the ReportViewer looks on a Default.aspx page? Well, you have seen the ReportViewer in Windows Forms; it will look very similar in a web form You can have a peek at it by making sure the Default.aspx page is open and switching to design mode from HTML source mode (see Figure 5-4) All right, we’re all set to build the web site now ■Note You might be wondering why the Print button is missing in the ReportViewer! Well, the version with Visual Studio 2005 doesn’t have it for web pages However, the good news is that the ReportViewer that ships with Visual Studio 2008 has web page print functionality To print from the Web in Visual Studio 2005, you have to save the report as an image, Excel, or PDF file 151 8547ch05final.qxd 152 8/30/07 4:01 PM Page 152 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS Figure 5-4 ReportViewer in design mode on Default.aspx Building the Project I’m sure you are ready to pump life into your web site Sure, why not? After all, this is the time we can see our hard work in action Building a web site is like any other project we build with the Visual Studio IDE As you know, you can build a project by clicking the small, green play button in the main toolbox or pressing F5 on the keyboard to start the application in runtime mode If the Visual Studio IDE presents you with the Debugging Not Enabled dialog box, select the default choice of “Modify the Web.config file ” and click the OK button (see Figure 5-5) Figure 5-5 Confirmation to enable debugging If you don’t get any errors during the build, the web site will be automatically hosted with the internal web server of Visual Studio’s IDE Please see Figure 5-6 for the URL and port on 8547ch05final.qxd 8/30/07 4:01 PM Page 153 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS which our web site is hosted When my site is hosted with the internal web server, it uses port 3992 on my computer However, if you build the site on your machine, you might get a different port number Figure 5-6 The web site is hosted with the internal web server of the Visual Studio IDE After the web service is successfully launched, a browser window will appear with a blank page, as in Figure 5-7 (which shows the page in Internet Explorer 7) Why still a blank page? Well, we just added the ReportViewer but have not yet developed a report to output Figure 5-7 The web site launched in the browser window All right, now it is time to move on to our reporting project As our first reporting project, let’s create the Aged Accounts Receivables report that I mentioned in Chapter Aged Accounts Receivables Report Assume you’re working for Modern Packaging Incorporated as a developer You have the task of developing the Aged Accounts Receivables report The report should highlight, using bold and italic font styles, any invoice that is 90 days old or older The report should also provide the user with the ability to move to invoice details of any customers while viewing the report The report should meet all the characteristics described in the Table 5-1, and the report output should match Figure 5-8 153 8547ch05final.qxd 154 8/30/07 4:01 PM Page 154 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS Table 5-1 Report Characteristics Characteristics Value Report title Aged Accounts Receivables Company title Modern Packaging Inc Print date Yes Data source AgedAR Columns to report InvioceNo, CustomerName, Amount, and InvoiceAge Page size Letter Page orientation Portrait Page number Yes (Page: n/n) Layout design Header and Body section Document map Yes (on Customer Name) Figure 5-8 The Aged Accounts Receivables report Business Case We use a sales invoice once a product is sold or service is rendered to a customer In a credit sale, it is a customer’s duty to pay the invoiced amount before the due date Different businesses have various policies of credit days that customers can enjoy before settling the invoice amount The Aged Accounts Receivables report helps the collections department staff to look for the age of all outstanding sales invoices In our example, highlighting the invoices that are overdue by 90 days or more helps the collections department take action 8547ch05final.qxd 8/30/07 4:01 PM Page 155 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS Getting the Web Site Ready Let’s get the web site ready, similar to the way you have already learned earlier in this chapter You can make use of the solution RSWebSite101 as a template for this project or create it from scratch It is good idea to create the new project from scratch; you can always refer to steps mentioned in the tutorial if you get stuck Please use the following steps to create a web site project: Click File ➤ New ➤ Web Site In the Templates pane of the New Web Site dialog box, select ASP.NET Web Site From the Language drop-down menu, select Visual C# Please give the application a name; I’ve called the web site AgedAR You may choose a different location for storing the application files according to your preference Click the OK button to finish the process Visual Studio will create a new ASP.NET web site Let’s move on and add the dataset and ReportViewer to the project Let’s start by selecting the project in Solution Explorer Right-click it, and select Add ➤ New Item ➤ DataSet Please name the dataset dsAgedAR You’ll notice that Visual Studio will ask you to put the dataset inside the App_Code folder; go ahead click the Yes button Select Cancel on the Table Adapter wizard dialog box; we’ll create the data table later Its time to add the ReportViewer now; please repeat the steps from our “ASP.NET Web Sites101” tutorial earlier in this chapter to add the ReportViewer to the Default.aspx page (see Figure 5-3) Before continuing, please make sure the HTML code inside the Default.aspx page looks like the following: Untitled Page 155 8547ch05final.qxd 156 8/30/07 4:01 PM Page 156 CHAPTER ■ REPORTING WITH ASP.NET WEB FORMS If you switch to the design view of the Default.aspx page, it should look similar to Figure 5-4, with the exception of the width of ReportViewer In this example, we have set the width to 775 pixels Step 1: Creating a Data Table Since we already have the dataset in the project, it’s time to add a data table to it Please use the following steps to add a data table inside the dataset: You can go to the dataset designer in two ways: double-click dsAgedAR inside Solution Explorer, or right-click the dsAgedAR node and select View Designer Let’s add the data table by right-clicking the design surface and selecting Add ➤ DataTable Click the header of the newly created data table, and name it dtAgedAR Let’s start adding columns to dtAgedAR by right-clicking the data table and selecting Add ➤ Column Please add the following columns into the data table, which should then look similar to Figure 5-9: • InvoiceNo (System.String) • CustomerName (System.String) • Amount (System.Double) • InvoiceAge (System.Int32) Figure 5-9 Final look of the dtAgedAR data table Step 2: Designing the Report Layout Before we start with the layout design for the report, let’s take a look at the report layout in Figure 5-8 What type of report items you find in this report? Well, as you can see, the report has a table item to display the invoice and receivables information You’ll also see that we need the data grouping on CustomerName We also need a group summary on total receivables for each customer ... System.Configuration; System .Web; System .Web. Security; System .Web. UI; System .Web. UI.WebControls; System .Web. UI.WebControls.WebParts; System .Web. UI.HtmlControls; Microsoft .Reporting. WebForms; System.Data.SqlClient;... here: http://ajax .asp.net/ An ASP.NET web site needs Internet Information Services (IIS) as a host The web site can be hosted with local IIS or on a remote machine For our reporting project,... an ASP.NET web site project; see Figure 5-1 for a graphical representation of these steps: Click File ➤ New ➤ Web Site In the Templates pane of the New Web Site dialog box, select ASP.NET Web