Embedding Beautiful Reporting into Your ASP.NET Web Forms Applications

Telerik Reporting tools in Visual Studio allow you to display powerful reports in ASP.NET Web Forms. Find out the three things you need to display reports in ASP.NET Web Forms.

Displaying a report in a Web Form requires just three things: reports, a Report Source to provide those reports, and a Report Viewer to display them. With theTelerik Reportingtools available in Visual Studio, it’s easy to put those three things together in a Web Forms project.

You first, of course, need a report. With a Web Forms project, the easiest way to create a report is to use the Telerik Report R2 2020 wizard from within Visual Studio. The wizard not only makes it easy to generate a report, it automatically adds your report to your project as either a .cs or .vb file. Using the Report Wizard also adds a reference to the Telerik.Reporting library to your project, which supports the other tools you’ll use.

To use the report wizard, first add a folder called Reports to your project, then right click on the folder in Solution Explorer, pick Add | New Item, and select the Telerik Report R2 2020 Wizard. Strictly speaking, you don’t need to put your report in a folder called Reports, but creating that folder makes it easy for you to display, for example, reports created by the standalone Telerik Report Designer R2 2020 which are kept in .trdp file (I’ll show how to add them at the end of this post). The first time you run the wizard, you’ll be prompted to trust the wizard—just click the Trust button in the dialog box.

Depending on your project type, the wizard generates either a .cs or .vb file with the name of your report (in my case, I created a report called ContactList). While creating my report, I took the option to embed the report’s data source connection in the report. One more step: Before going on to set up a page to display your report, build your project (if you don’t, the tool you use in the next step will complain that you need to build your project… and then build your project for you).

Grab the eBook: A Quick Guide to Expert .NET Reporting Tools

Displaying Your Report

Now that you have your report, you can start to add the Web Form that will display the report by right clicking on your project and selecting Add | New Item. Next, in Add New Item dialog, select the Telerik HTML5 Web Forms Report Viewer (you can find it under the Web | Web Forms tab on the left-hand side of the dialog). Adding a Web Form using this option opens a wizard that will walk not only you through configuring your Report Viewer but also sets your project up to serve your report to your viewer.

On the first page of the Wizard, you’ll be asked to pick between “Create New REST service” and “Use existing REST service.” If you’ve set up a separate project to hold your reports or have used this wizard before on this project, pick the “Use existing REST service” option and enter the URL for the project that holds your reports. If this is the first time you’ve run the wizard and want to use the current project both as a report source and to display reports, pick the “Create new REST service” choice.

After clicking the Next button, you’ll have an opportunity to pick the report to be served up by your report source. Since I’ve already created a report, I picked “Existing report definition.” Picking this choice gives you three options on the right side of the wizard’s page:

• TRDP, TRBP, or TRDS definition
• Enter type report definition created in Visual Studio
• Select type definition created in Visual Studio

If you created your report using the report wizard, as I did, then pick the “Select type definition created in Visual Studio” choice… and wait a bit. The wizard will pause to build a list from all the relevant class files in your project. When the wizard is done, find your report class in the list, select it, and click the wizard’s Finish button.

The wizard does quite a lot to your project at this point. In addition to adding the page to display your report, the wizard also adds a Web API controller class that will serve up your reports—adding that controller will trigger adding Web API support to your application. So, again, you’ll need to be patient (and also, the first time you run the wizard, click a Trust button to assure Visual Studio that nothing bad is happening).

When the wizard is done, it will display a scary error message because you’re using your project both to view reports and as your report source—you can ignore that message. You’ll find that you have a new Web Form in your project named after your report. To view your report, open that aspx file and press F5 .

If you’d rather skip the wizards and do it all yourself, there is a Telerik step-by-step guide .

Save Your Seat: Reporting In-Depth—How to Streamline Reporting with Ease

Exploiting ReportViewer

Once you’ve got your report on the screen, you can start exploiting the power of ReportViewer. Without doing anything more, your user will be able to use ReportViewer’s menu to page through the report, download it in a variety of formats (PDF, CSV, RTF, etc.), and print it. With some additional configuration, you can support users sending the report as email or providing parameters to filter the report.

By default, users can scroll through the report continuously (new pages are displayed as the user scrolls to the bottom of a page). If you want users to always page through the report, you can add the Page attribute to your ReportView component and set it to PageMode.SinglePage, like this:

<telerik:ReportViewer
                PageMode="SinglePage"

Your user can also zoom in and out on your report using the magnifying glass icons on ReportViewer’s menu bar. However, you can control the initial display’s zoom level with the ReportViewer’s ScaleMode attribute. Setting ScaleMode to FitPage will compact an entire page of the report into a single browser window, for example. Alternatively, you can set ScaleMode to Specific and add the Scale attribute to specify the zoom level on the report’s initial display, like this:

<telerik:ReportViewer
                ScaleMode="Specific"
                Scale="1.2"

Supporting New Reports

Now that you have your project set up, you can rerun the wizard to add a form for a new report. First make sure that you know your project’s URL (it will be something like https://localhost:44395/). When you run the wizard, pick “Use existing REST service” on the first page and enter your project’s URL with the additional segments /api/reports (e.g. https://localhost:44395/api/reports).

That may be overkill, though: You can just add a new Web Form to your project and then copy all the markup from your first form’s aspx file (except for the form’s Page directive) into your new form’s aspx file. If you go that route (and continue to use the Visual Studio Report Wizard to generate reports) then the only thing you need to change in the markup as you copy reports is in the element: You need to update the Identifier attribute with the name of your new report. For a report in a .cs or .vb report, you have to pass the fully qualified class name followed by the class’s namespace.

This example displays a report called VendorList in a project called ReportSite:

<ReportSource IdentifierType="TypeReportSource" Identifier="ReportSite.VendorList, ReportSite">

But you can also display reports held in the .trdp files generated by Telerik’s standalone report designer, Report Designer R2 2020. First, use Add | Existing Item to add the .trdp files produced by the designer to your project’s Reports folder. Then alter the element, but this time, in addition to updating the Identifier attribute to the name of your report file, also change the IdentifierType attribute to CustomReportSource.

This markup, for example, displays a .trdp file called EmpList.trdp:

<ReportSource IdentifierType="CustomReportSource" Identifier="EmpList.trdp">

A Single Report Page

And even that may be more work than you need to do. If you want, you can have just one Web Form display all your reports—you just have to change the ReportSource options from code.

To support this, first create a form with a set of HyperLinks that allows users to select the report they want. In each HyperLink, pass the name of the report to be displayed in the NavigateUrl’s query string. Here are two HyperLinks, one for a .trdp report called EmpList and one for a .cs/vb report called ContactList:

<asp:HyperLink ID="ContactList" runat="server"
       NavigateUrl="~/ReportDisplay.aspx?ReportName=ContactList.trdp">
  Contact List
</asp:HyperLink><br/>
<asp:HyperLink ID="EmployeeList" runat="server"
       NavigateUrl="~/ReportDisplay.aspx?ReportName=ReportSite.Emplist,ReportSite">
  Employee List
</asp:HyperLink>

In the code file for the form with your ReportViewer Web Form, you retrieve the ReportSource Identifier from the querystring when the Web Form is first loaded. You can then set the IdentifierType based on the report’s name (.trdp files require the IdentifierType to CustomReportSource).

Here’s some sample code that does that:

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
      this.reportViewer1.ReportSource.Identifier = Request.QueryString["ReportName"];
      if (Request.QueryString["ReportName"] != null &&
           Request.QueryString["ReportName"].Contains(".trdp"))      
      {
         this.reportViewer1.ReportSource.IdentifierType = IdentifierType.CustomReportSource;
      }
      else
      {
         this.reportViewer1.ReportSource.IdentifierType = IdentifierType.TypeReportSource;
      }
   }
}

And now you’re ready to deliver beautiful reports in your Web Forms application.

Tried Telerik DevCraft?

You can chooseTelerik Reportingand Telerik Report Server as individual products or enjoy them as part of the great Telerik DevCraft bundles.

Try Telerik DevCraft

Telerik DevCraft is the finest software developer tools collection across .NET and JavaScript technologies, which includes modern, feature-rich and professionally designed UI components for web, desktop and mobile applications, reporting and report management solutions, document processing libraries, automated testing and mocking tools from the Telerik and Kendo UI suites. DevCraft will arm you with everything you need to deliver outstanding applications in less time and with less effort. With the backing of our legendary support team, which consists of the developers who build the products, and a ton of resources and trainings you can rest assured that you have a stable partner to rely on for your everyday challenges along your software development journey.