CREATING A PROJECT
Now that we see how the Report Viewer Server Control is going to handle most of the work of communicating what we want to see from the RS Server, let’s go ahead and create a web application that will contain our new Server Control.
Report Viewer Server Control
Let’s make a release version of the ReportViewer.dll. There are other things we could do to make this .dll more production worthy but let’s keep it simple for this demo.
1. Open the Report Viewer Server Control project with Visual Studio .Net
2. Set the build to Release
3. Recompile the Solution
Demo Web Application
Create the demo web application.
1. Create a new web application with Visual Studio .Net
2. Rename ‘default.aspx’ to ‘WebReport.aspx’
3. Copy the ReportViewer.dll we just built to the bin directory of our demo web application, and then reference the ReportViewer.dll to the project
HTML View
1. Register the Report Viewer User Control to the WebReport.aspx by adding the following code to the top of HTML document of the ‘WebReport.aspx’
<%@ Register TagPrefix=”cc1” Namespace=”Microsoft.ReportingServices” Assembly=”ReportViewer” %>
2. Add the following code within the Form tags of the HTML
<TABLE id="tblReport" style="Z-INDEX: 102; LEFT: 10px; POSITION: absolute; TOP: 0px; HEIGHT: 89%" cellSpacing="0" cellPadding="0" width="100%" align="left" border="0">
<TR height="100%">
<TD align="center"><cc1:reportviewer id="ReportViewer1" style="Z-INDEX: 101; POSITION: absolute" runat="server" Height="100%" Width="100%"></cc1:reportviewer>
</TD>
</TR>
</TABLE>
The html code we added above puts the Report viewer within a table and allows it to be resized as the window is resized.
Design View
Now that the server control is registered and we have added the HTML code so that the viewer can be seen, declare the control within the code behind file.
protected Microsoft.ReportingServices.ReportViewer ReportViewer1;
Add the following code to the Page_Load Event so that the viewer can get the QueryStrings passed to the page through the URL.
ReportViewer1.ServerUrl = HttpContext.Current.Request.QueryString[1];
ReportViewer1.ReportPath = HttpContext.Current.Request.QueryString[2];
//Not showing Parameter ToolBar in the Page
ReportViewer1.Parameters = Microsoft.ReportingServices.ReportViewer.multiState.False;
for(int i=3;i<HttpContext.Current.Request.QueryString.Count;i++)
{
ReportViewer1.SetParameter(HttpContext.Current.Request.QueryString.GetKey(i),HttpContext.Current.Request.QueryString[i].ToString());
}
Within the Load_Form Event, the QueryString collection is looped thru and the Report Viewer parameters are set using the ReportViewer1.SetParameter. The first three QueryStrings passed to the report viewer control as parameters, describes where to find the RS Server, the Path of the report and the choice of not showing the RS report toolbar. QueryStrings after the first three are actual report parameters affecting the report.
You should next build some sort of web UI allowing users to select report criteria to build their report. Within the UI, the QueryString holding the criteria selected by the user should be built. Here is an example of a Report Parameter Property…
private string m_str_qp = "?";
private string QueryParameters
{
get{return m_str_qp;}
set{m_str_qp = m_str_qp+value;}
}
This button click event is an example of how to build the query parameters using the properties…The important thing to notice is that the when the parameter is set, make sure you use the actual name of the report parameter as the QueryString name(ex. below Area and Territory are both names of the report parameters used in the report.
private void cmdViewSales_Click(object sender, System.EventArgs e)
{
this.QueryParameters = "ServerUrl=http://Bayer2003/reportserver/";
this.QueryParameters = "&ReportPath=/AdventureWorks/Sales";
this.QueryParameters = "&Area="+cboArea.SelectedValue;
this.QueryParameters = "&Territory="+this.cboTerritory.SelectedValue;
Response.Write("<SCRIPT>window.open(\""+"http://Localhost/RSDemo/WebReport.aspx"+this.QueryParameters+"\",'RSReport','toolbar=no,resizable=yes,scrollbar=yes,height=600,width=800,left=0,top=0')</SCRIPT>");
}