Crystal Reports ®For Visual Studio .NET®
Interactivity and Reports in Web ApplicationsInteractivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
2© 2003 Crystal Decisions, Inc. Crystal Decisions, Crystal Reports, Crystal Enterprise,Crystal Analysis, Crystal Services, Crystal Care, Crystal Assist, Crystal Applications, Infoand Holos are trademarks or registered trademarks of Crystal Decisions, Inc. in the U.S.and/or other countries. All other trademarks or registered trademarks referenced are theproperty of their respective owners.Version 2.0Crystal Decisions, Inc.895 Emerson StreetPalo Alto, CA 94301Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
3Interactivity and Reports in Web ApplicationsIntroductionYou can use the Integrated Development Environment (IDE) in Visual Studio .NET to createinteractivity in your application that hosts Crystal reports.In this walkthrough, you will create a Web application using Active Server Pages.NET(ASP.NET) in Visual Studio .NET. The Web application contains two Web Form controls: animage and a Web Forms Viewer. It supports interactivity between the user and the WebForms Viewer, and interactivity between the Web Forms Viewer and the image control.For more information and updates, please visit our Web site at:http://www.crystaldecisions.com/net.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
4Outline of the Web ApplicationThe Web application will contain these controls:· a Web Forms Viewer control hosting a report containing a group tree and three charts(which will be referred to as Chart A, Chart B and Chart C). Users can traverse the grouptree and drill down on Chart A to select a country.· an image control that will display a flag corresponding to the country the user haschosen from Chart A.
The Chain of Interactions1. The user selects a country through the Web Forms Viewer control by drilling down inChart A of the report.2. The Web Forms Viewer updates its display of the report based on the selected country.3. The image control accepts the chosen country and displays the corresponding flag forthat country.
Supporting FilesThe following report and image files have been provided with this walkthrough:· Sales By Country.rpt· USA.jpg· England.jpg· France.jpg· Germany.jpg· Italy.jpg· Others.jpgThey are available for download from our Web site as supporting files at:http://www.crystaldecisions.com/net.Create the folder "WalkthroughFiles" under the directory c:\Inetpub\wwwroot. Copy ordownload the report and image files to this folder.The following sections explain how to construct the Web application described above, andhow to navigate in Sales By Country.rpt in a Web Forms Viewer.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
5Creating the Web applicationBelow, you will create a Visual C# Web application that has a Web Forms Viewer hostingSales By Country.rpt, and an image control displaying the flag of the country the user haschosen through the report. Sales By Country.rpt assumes that the sample database,xtreme.mdb, has been installed on C:\Program Files\Microsoft Visual Studio .NET\CrystalReports\Samples\Database during setup for Visual Studio .NET.
To change the location of xtreme.mdbIf you have installed xtreme.mdb at a location other than the default (i.e., C:\ProgramFiles\Microsoft Visual Studio 7\Crystal Reports\Samples\Database), you should do a SetLocation for Sales By Country.rpt. To do a Set Location:1. In Visual Studio .NET, select
File |
Open |
File. This invokes the
Open File dialog box.2. In the
Open File dialog box, browse to the location c:\Inetpub\wwwroot\WalkthroughFiles, and specify the file Sales By Country.rpt. This opens Sales ByCountry.rpt in the Crystal Report Designer.
NOTE If the Crystal Decisions Registration Wizard appears, you can choose toregister the Crystal Report Designer at this point or at a later time.3. In the Crystal Report Designer, right-click in a report area. Choose
Database |
SetLocation. This invokes the
Set Location dialog box.4. In the
Set Location dialog box, click the down-arrow under
Current Data Source.Select the data source assumed by Sales By Country.rpt,
C:\Program Files\MicrosoftVisual Studio .NET\Crystal Reports\Samples\Database\xtreme.mdb. You willpoint this assumed location to the actual location of the database.5. You may use any one of these database technologies to connect the report to the actualdata source: OLE DB (ADO), ODBC (RDO), Database Files (i.e., using native drivers), orADO.NET (XML) (which is under
More Data Sources). For the purpose of thiswalkthrough, under
Replace with, double-click
OLE DB (ADO). This invokes the
OLEDB (ADO) dialog box.
NOTE If you are already connected to xtreme.mdb, proceed with step 9. Or, if youare connected to another database through OLE DB (ADO), select Make NewConnection.6. In the
OLE DB (ADO) dialog box, highlight the OLD DB provider,
Microsoft Jet 4.0OLEDB Provider. Then click the
Next button.7. Provide the necessary information to access the actual data source: for
DatabaseName, click the square button adjacent to the entry box. Select xtreme.mdb accordingto where you have installed it. Click
Next.8. Update any advanced information for your data source, if necessary. Then click
Finish.You will be returned to the
Set Location dialog box.9. Redirect the report to look for the database in the actual location: in the
Set Locationdialog box, under
Replace with, highlight the actual location of the database. Click
Replace. You will find this location updated under
Current Data Source. Then click
Close.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
610. If you have modified fields in xtreme.mdb, right-click in a report area, point to
Database and select
Verify Database. A message titled
Verify Database suggestsyou to proceed to fix up the report. Click
OK to fix up unmapped fields in the database.11. Choose
File |
Save Sales By Country.rpt to save the report with the updated databaselocation.Creating a Web FormYou will create a Visual C# Web application project, WebFormExample, on the local hosthttp://localhost.1. In Visual Studio .NET, select
File |
New |
Project. This invokes the
New Project dialogbox.2. In the
New Project dialog box, select
Visual C# Projects in the left pane.3. Select
ASP.NET Web Application in the right pane.You may choose to create your project on any Web server of your choice. For the purpose ofthis example, you will create the project in the default project location, http://localhost,which is the local IIS Web server.4. Enter "WebFormExample" in the
Location field after http://localhost/. The defaultproject location, http://localhost, is displayed in the
Location field. Click
OK.This creates the Web application project, WebFormExample, athttp://localhost/WebFormExample.Visual Studio creates a Web Forms page (with the default name "WebForm1.aspx") inthe project WebFormExample.The window for the Web Forms page consists of two tabs:
Design and
HTML. The Designtab allows programming using the Visual Studio IDE. The
HTML tab contains the HTMLsource that supports ASP.NET. Visual Studio automatically opens the
Design tab ofWebForm1.aspx.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
7TIP In Visual Studio .NET, you can anchor the Toolbox by clicking the "pin" icon atthe top-right corner of the Toolbox.Also, items in a
Toolbox tab can be displayed alphabetically by right-clicking the tab,and selecting
Sort Items Alphabetically from the shortcut menu.When you are in the Designtab, the Toolbox lists the WebForm controls.The Web Forms tab of theToolbox displays all Web Formcontrols including the Web FormsViewer.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
8Inserting the Web Form ControlsWith the Toolbox set up properly, you can now insert Web Form controls into your WebForm. Select the
Design tab of WebForm1.aspx if it is not already the active tab. You willinsert two controls, an image and a Web Forms Viewer:1. From the
Web Forms tab of the Toolbox, drag the
Image control and drop it into theWeb Form. The image object has a default name
Image1.2. Similarly, drag a Web Forms Viewer control and drop it into the Web Form. The Viewerhas a default name
CrystalReportViewer1.Web FormsViewer controlImage controlInteractivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
9Binding Files to the Web Forms ControlsNext, you will specify the image and report files that the Web Form will display.Initialize the image control with a United Nations flag since initially, no country has beenchosen. Later in the section "Linking Up the Web Form Controls for Interactivity", you willfurther specify which flag the image control should display under what conditions.
To specify an image file for the image control:1. In the
Design tab of WebForm1.aspx, select the image control. The Properties windowautomatically displays the properties applicable to the image control. You may click the
Alphabetize icon to arrange properties in their alphabetical order.2. Scroll down to the property,
ImageUrl, in the Properties window. Specify a URL or fullpath name for the image file that you would like the image control to display. Specifythe URL
http://localhost/WalkthroughFiles/Others.jpg. This initializes the imagecontrol to display the flag for the United Nations.3. You may adjust the length and the width of the image control to display the flag in theappropriate scale.
To specify a report file for the Web Forms Viewer control1. In the
Design tab of WebForm1.aspx, select the Web Forms Viewer control. TheProperties window automatically displays the properties applicable to it.2. Select
DataBindings in the Properties window, and click the square button to the rightof the entry field. This opens the
DataBindings dialog box.3. In the
DataBindings dialog box, select
ReportSource under
Bindable Properties,and enter the full path name, "C:\\Inetpub\\wwwroot\\WalkthroughFiles\\Sales ByCountry.rpt" (with the double quotes) under
Custom binding expression. The WebForms Viewer control automatically displays this report at design time.Specify image to display.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
104. Highlight WebForm1.aspx in the Solution Explorer and click the
View Code icon. InWebForm1.aspx.cs, after the call to base.OnInit(e) in OnInit, enter this line:DataBind();5. You may adjust the size of the Web Forms Viewer control as you see fit, by first settingthe property,
BestFitPage, to
False, and then adjusting handles of the Viewer in the
Design tab.Select the ReportSourceproperty under BindableProperties.Specify a full path namefor the report file.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
11Below shows a layout of the Web Form in the Visual Studio editor, with the image and WebForms Viewer controls initialized.Linking Up the Web Form Controls for InteractivityAs described in the section "Outline of Web Application" above, when the user drills down ona country (or a group of countries for "Others") in Chart A in the report, the image controlshould display the appropriate flag.To set up the image control to display the appropriate image upon a drill-down event in theWeb Forms Viewer, you can implement the following:1. In the
Design tab of WebForm1.aspx, select the Web Forms Viewer control.2. In the Properties window, click the
Events icon. The Properties window automaticallydisplays all the events applicable to the Web Forms Viewer control. If you have notalready done so, you may click the
Alphabetize icon to arrange events in theiralphabetical order.3. Double-click the
Drill event. This activates the editor for WebForm1.cs, and initializes afunction named CrystalReportViewer1_Drill.4. Add the following lines of code to CrystalReportViewer1_Drill:string sGroupName = "";if (e.NewGroupLevel == 1){Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
12sGroupName = e.NewGroupName;string imageURL = string.Format("http://localhost//WalkthroughFiles//{0}.jpg", sGroupName);Image1.ImageUrl = imageURL;}
Building and Running the Web applicationTo build and run the Web application:1. From the Visual Studio .NET Menu Bar, select
File |
Save All to save all changes youhave made to the project WebFormExample. The first time you save the solution file,you will be prompted with a message about saving WebFormExample.sln. Save it to thedefault location c:\Inetpub\wwwroot\WebFormExample.2. Select
Build |
Build to compile your application.3. Select
Start Without Debugging from the
Debug menu.4. The Web application automatically starts athttp://localhost/WebFormExample/WebForm1.aspx in your browser.5. Try drilling down on a country in Chart A of Sales By Country.rpt. For instance, drilldown on USA. The image control displays the flag of the United States. The report alsodisplays Chart B showing the sum of last year's sales for the top 5 regions in the UnitedStates.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
13Navigating in the Crystal ReportSales By Country.rpt is grouped by the four fields - country, region, city and customername. It contains a group tree and charts A, B and C. You can select a grouping via thegroup tree. You can also select a country grouping through Chart A.Drilling Down in the Crystal ReportInitially, to select a grouping via the group tree, expand the group tree by clicking on the '+'symbol to the left of a country node. You can then click a region, city, or customer name.The report will then display the sum of last year's sales for the selected grouping.You can also select a country grouping by drilling down on Chart A. Chart A is a group chartdisplaying the sum of last year's sales for each of the top 5 countries, and the total of lastyear's sales for the rest of the countries. The user may drill down (by clicking) on Chart A toselect one of the top 5 countries (or "Others" for all other countries), and view in Chart Bthe sum of last year's sales for each of the top 5 regions in that country (or group ofcountries in the case of "Others").You can expand andtraverse the group tree toselect a grouping.Or, you can select acountry in Chart A bydrilling down on it.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
14Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
15For instance, to view the sum of last year's sales for the top 5 regions in Italy, you can drilldown on "Italy" in Chart A. In this database, since there are only 3 regions in Italy (i.e.,Lombardia, Piedmonte and Lazio) with sales, only the sum of last year's sales of each ofthese 3 regions will be displayed in Chart B.Click on a region or expandthe group tree to select acity or customer.Chart B displays the sum of lastyear's sales in the top regions ofthe country selected in Chart A.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
16At this point, you may click a region in the group tree, or further expand the group tree toselect a city or customer to display the corresponding sales. For instance, you can click theregion, Lombardia, in the group tree. The report will display in Chart C the sum of last year'ssales of the two cities in Lombardia, Bergamo and Milan.Clicking a region will display thesales of each city in that region.Interactivity and Reports in Web ApplicationsCopyright © 2001 Crystal Decisions, Inc.Page
17You may further expand the group tree and select a city or customer name to display thecorresponding sales for that city or customer. For example, if you click the city Milan, thereport will show the sales for each customer in Milan; in this database, since there is onlyone customer, Milano Bike Store, in Milan, the report will only show the sales for thatcustomer.Note that at any point, you can click the up-arrow icon in the Web Forms Viewer toolbar totraverse one level up in the group tree.Clicking on a city in the grouptree will show sales of eachcustomer in that city.You can click the up-arrow iconanytime to traverse one level upin the group tree.
本文地址：http://com.8s8s.com/it/it41303.htm