Click here to Skip to main content
15,860,972 members
Articles / Programming Languages / C# 4.0

Silverlight Report Viewer using View Model (MVVM)

Rate me:
Please Sign up or sign in to vote.
4.88/5 (20 votes)
13 Dec 2011Ms-PL3 min read 151.6K   6.2K   68   36
Viewing .rdlc reports from Silverlight using View Model (MVVM)
Image 1

Viewing And Printing Reports in a Silverlight Application

Reports are an important part of a Silverlight Line of Business (LOB) application. While Silverlight 4 does provide printing capabilities, multi-page printing is still challenging. In addition, a lot of businesses have already invested considerable resources into learning to produce reports using the report designer in Visual Studio.

While there are some 3rd party controls that will display a report in Silverlight, they cost money. Also, some require you to use the full Microsoft SQL Server Reporting Services (SSRS), and that may not be an option for a lot of people. An .rdlc report created with Visual Studio does not require SSRS.

The method we will demonstrate in this article was developed by Sushant Pandey. He describes it here. The difference in this implementation is that we will use Behaviors to make it fully MVVM compliant (he uses code behind in his implementation).

Printing A Report

We will start with the Simple Silverlight Configurator/Pivot (View Model/MVVM) I published a few months ago.

Image 2

The application allows the user to change the Gender, Weight, and Age selectors, and it dynamically filters the list of people.

Image 3

The application has been enhanced to allow the user to click the Show Report Viewer button and the report will show in a popup window.

If they click Print PDF Report, they will see a PDF report in a popup window.

I actually prefer the Report Viewer because the user sees an animation while waiting for the report to render.

Creating the Report

Image 4

The first step is to add a Report to the project.

The project already contains the following web service:

C#
[WebMethod]
public List<Person> SearchPeople(string Gender, int AgeHigh, int AgeLow,
    int WeightHigh, int WeightLow)
{
    List<Person> colPeople = new List<Person>();
    
    var result = from objPeople in People.GetPeople().AsQueryable()
                 where objPeople.Age <= AgeHigh
                 where objPeople.Age >= AgeLow
                 where objPeople.Weight <= WeightHigh
                 where objPeople.Weight >= WeightLow
                 select objPeople;
                 
    if (Gender != "All")
    {
        colPeople = (from finalresult in result
                     where finalresult.Gender == Gender
                     select finalresult).ToList();
    }
    else
    {
        colPeople = result.ToList();
    }
    
    return colPeople;
}

Image 5

We are able to select that web service as a dataset for the report.

Image 6

After designing the report, we place a report control on a .aspx page.

The following code, in the code behind for the page, is used to accept report parameters, and to display the Report Viewer Control (ShowReportViewer()), or to render a .pdf version (RenderReport()):

C#
public partial class Report : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If parameters are passed just render report
        if
            (
            Request.QueryString["Gender"] != null &&
            Request.QueryString["AgeHigh"] != null &&
            Request.QueryString["AgeLow"] != null &&
            Request.QueryString["WeightHigh"] != null &&
            Request.QueryString["WeightLow"] != null
            )
        {
            if (Request.QueryString["ShowReportViewer"] == "False")
            {
                RenderReport();
            }
            else
            {
                if (!Page.IsPostBack)
                {
                    ShowReportViewer(); 
                }
            }
        }
    }
    
    #region RenderReport
    private void RenderReport()
    {
        // CheckBox to see if there is any data
        if (LoadData().Rows.Count > 0)
        {
            LocalReport localReport = new LocalReport();
            localReport.ReportPath = Server.MapPath("~/Report1.rdlc");
            
            ReportDataSource reportDataSource = 
		new ReportDataSource("DataSet1", LoadData());
            localReport.DataSources.Add(reportDataSource);
            
            string reportType = "pdf";
            string mimeType = "application/pdf";
            string encoding;
            string fileNameExtension;
            
            //The DeviceInfo settings should be changed based on the reportType
            //http://msdn2.microsoft.com/en-us/library/ms155397.aspx
            string deviceInfo =
            "<DeviceInfo>" +
            " <OutputFormat>PDF</OutputFormat>" +
            " <PageWidth>8.5in</PageWidth>" +
            " <PageHeight>11in</PageHeight>" +
            " <MarginTop>0.5in</MarginTop>" +
            " <MarginLeft>1in</MarginLeft>" +
            " <MarginRight>1in</MarginRight>" +
            " <MarginBottom>0.5in</MarginBottom>" +
            "</DeviceInfo>";
            
            Warning[] warnings;
            string[] streams;
            byte[] renderedBytes;
            
            //Render the report
            renderedBytes = localReport.Render(
            reportType,
           deviceInfo,
           out mimeType,
           out encoding,
           out fileNameExtension,
           out streams,
           out warnings);
           
            //Clear the response stream and write the bytes to the outputstream
            //Set content-disposition to "attachment" 
            //so that user is prompted to take an action
            //on the file (open or save)
            Response.Clear();
            Response.ContentType = mimeType;
            //Response.AddHeader("content-disposition", 
		"attachment; filename=foo." + fileNameExtension);
            Response.BinaryWrite(renderedBytes);
            Response.End();
        }
        else
        {
            // There were no records returned
            Response.Clear();
            //Response.AddHeader("content-disposition", 
		"attachment; filename=foo." + fileNameExtension);
            Response.Write("No Data");
            Response.End();
        }
    }
    #endregion
    
    #region ShowReportViewer
    private void ShowReportViewer()
    {
        this.ReportViewer1.ProcessingMode = ProcessingMode.Local;
        this.ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report1.rdlc");
        ReportViewer1.LocalReport.DataSources.Add(
           new ReportDataSource("DataSet1", LoadData()));
    }
    #endregion

The following method provides data for the report at run-time:

C#
#region LoadData
private DataTable LoadData()
{
    string Gender = Convert.ToString(Request.QueryString["Gender"]);
    int AgeHigh = Convert.ToInt32(Request.QueryString["AgeHigh"]);
    int AgeLow = Convert.ToInt32(Request.QueryString["AgeLow"]);
    int WeightHigh = Convert.ToInt32(Request.QueryString["WeightHigh"]);
    int WeightLow = Convert.ToInt32(Request.QueryString["WeightLow"]);
    
    var result = from objPeople in People.GetPeople().AsQueryable()
                 where objPeople.Age <= AgeHigh
                 where objPeople.Age >= AgeLow
                 where objPeople.Weight <= WeightHigh
                 where objPeople.Weight >= WeightLow
                 select objPeople;
                 
    if (Gender != "All")
    {
        result = from finalresult in result
                 where finalresult.Gender == Gender
                 select finalresult;
    }
    
    Utility objUtility = new Utility();
    DataTable dt = objUtility.LINQToDataTable(result);
    
    return dt.DefaultView.Table;
}
#endregion

Note, that it uses a class LINQToDataTable, that converts the Linq to SQL query into a DataTable that the report needs.

Also note that we don't actually pass parameters to the Report Viewer control. With a .rdlc report, we simply provide the data for the report. We must filter the Linq query to filter the report.

It may also seem odd that we designed the report directly against the web service method, but we have to supply the data in the code behind. You can see this site for answers as to why the Report Viewer control has been designed this way: http://www.gotreportviewer.com.

The Silverlight Project

Image 7

In the Silverlight project, we add ReportPDFURL and ReportViewerURL properties to the View Model. We also add a SetReportUrls method that is triggered whenever a supporting property is changed:

C#
private void SetReportUrls()
{
    // Set the Report URLs
    ReportViewerURL = String.Format("{0}Gender={1}&AgeHigh={2}&AgeLow={3}&
			WeightHigh={4}&WeightLow={5}&ShowReportViewer=True",
            GetBaseAddress(), Gender, AgeHigh.ToString(), AgeLow.ToString(), 
			WeightHigh.ToString(), WeightLow.ToString());

    ReportPDFURL = String.Format("{0}Gender={1}&AgeHigh={2}&AgeLow={3}&
			WeightHigh={4}&WeightLow={5}&ShowReportViewer=False",
        GetBaseAddress(), Gender, AgeHigh.ToString(), AgeLow.ToString(), 
			WeightHigh.ToString(), WeightLow.ToString());
} 

We create the following Behavior that will open up the HTML Popup window:

C#
namespace Behaviors
{
    [System.ComponentModel.Description("Opens an HTML Window")]
    public class HTMLPopupWindow : TargetedTriggerAction<Button>, INotifyPropertyChanged
    {
        #region PopupURL
        public static readonly DependencyProperty PopupURLProperty = 
				DependencyProperty.Register("PopupURL",
            typeof(string), typeof(HTMLPopupWindow), null);
        public string PopupURL
        {
            get
            {
                return (string)base.GetValue(PopupURLProperty);
            }
            set
            {
                base.SetValue(PopupURLProperty, value);
                this.NotifyPropertyChanged("PopupURL");
            }
        }
        #endregion

        #region PopupWidth
        public static readonly DependencyProperty PopupWidthProperty = 
				DependencyProperty.Register("PopupWidth",
            typeof(int), typeof(HTMLPopupWindow), null);
        public int PopupWidth
        {
            get
            {
                return (int)base.GetValue(PopupWidthProperty);
            }
            set
            {
                base.SetValue(PopupWidthProperty, value);
                this.NotifyPropertyChanged("PopupWidth");
            }
        }
        #endregion

        #region PopupHeight
        public static readonly DependencyProperty PopupHeightProperty = 
				DependencyProperty.Register("PopupHeight",
            typeof(int), typeof(HTMLPopupWindow), null);
        public int PopupHeight
        {
            get
            {
                return (int)base.GetValue(PopupHeightProperty);
            }
            set
            {
                base.SetValue(PopupHeightProperty, value);
                this.NotifyPropertyChanged("PopupHeight");
            }
        }
        #endregion

        protected override void OnAttached()
        {
            base.OnAttached();
        }

        protected override void Invoke(object parameter)
        {
            if (true == HtmlPage.IsPopupWindowAllowed)
            {
                System.Text.StringBuilder codeToRun = new System.Text.StringBuilder();
                codeToRun.Append("window.open(");
                codeToRun.Append("\"");
                codeToRun.Append(string.Format("{0}", PopupURL));
                codeToRun.Append("\",");
                codeToRun.Append("\"");
                codeToRun.Append("\",");
                codeToRun.Append("\"");
                codeToRun.Append("width=" + PopupWidth.ToString() + 
				",height=" + PopupHeight.ToString());
                codeToRun.Append(",scrollbars=yes,menubar=no,toolbar=no,resizable=yes");
                codeToRun.Append("\");");
                try
                {
                    HtmlPage.Window.Eval(codeToRun.ToString());
                }
                catch
                {
                    MessageBox.Show("You must enable popups to view reports. 
			Safari browser is not supported.",
                        	"Error", MessageBoxButton.OK);
                }
            }
            else
            {
                MessageBox.Show("You must enable popups to view reports. 
			Safari browser is not supported.",
                    	"Error", MessageBoxButton.OK);
            }
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
        }

        // Utility

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        #endregion
    }
}

Image 8

Next, we add buttons to the View.

Image 9

We add the HTMLPopupWindow Behavior to the Buttons.

Image 10

We then bind the PopupURL to the appropriate property in the View Model, and set the other parameters.

Not Really Printing In Silverlight

The key thing with this implementation is that we are not actually printing "inside" Silverlight. However, the end user will most likely not care. They will have the functionality they need. As a developer, this method should allow you to deliver a professional solution at a reasonable cost.

Deployment

You will need to use ASP.NET 4.0, and install the Microsoft Report Viewer 2010 Redistributable Package on the web server that displays the report.

History

  • 24th October, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Software Developer (Senior) http://ADefWebserver.com
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of
AiHelpWebsite.com,
LightSwitchHelpWebsite.com, and
HoloLensHelpWebsite.com.

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

Comments and Discussions

 
GeneralRe: It's not a really sl report viewer Pin
defwebserver27-Oct-10 2:22
defwebserver27-Oct-10 2:22 
QuestionNice Article Pin
Matt Casto25-Oct-10 2:38
Matt Casto25-Oct-10 2:38 
AnswerRe: Nice Article Pin
defwebserver25-Oct-10 2:56
defwebserver25-Oct-10 2:56 
GeneralRe: Nice Article Pin
Matt Casto25-Oct-10 3:05
Matt Casto25-Oct-10 3:05 
GeneralRe: Nice Article Pin
defwebserver25-Oct-10 3:26
defwebserver25-Oct-10 3:26 
GeneralMy vote of 5 Pin
Braulio Dez25-Oct-10 2:16
Braulio Dez25-Oct-10 2:16 
GeneralMy vote of 5 Pin
MyTatuo24-Oct-10 19:22
MyTatuo24-Oct-10 19:22 
GeneralRe: My vote of 5 Pin
defwebserver25-Oct-10 2:10
defwebserver25-Oct-10 2:10 
Thanks!
GeneralMy vote of 5 Pin
linuxjr24-Oct-10 18:14
professionallinuxjr24-Oct-10 18:14 
GeneralRe: My vote of 5 Pin
Braulio Dez24-Oct-10 19:40
Braulio Dez24-Oct-10 19:40 
GeneralRe: My vote of 5 Pin
defwebserver25-Oct-10 2:11
defwebserver25-Oct-10 2:11 
GeneralRe: My vote of 5 Pin
defwebserver25-Oct-10 2:12
defwebserver25-Oct-10 2:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.