ComponentOne
MVC ReportViewer 101 ASP.NET MVC Edition ReportViewer 101

Getting Started

The C1.Web.Mvc.FlexViewer assembly contains ReportViewer control that allow you to show reports.

Steps for getting started with the ReportViewer control in MVC applications:

  1. Create a new MVC project using the C1 ASP.NET MVC application template.
  2. Add controller and corresponding view to the project.
  3. Initialize a ReportViewer control in view using razor syntax.
  4. (Optional) Add some CSS to customize the report viewer control's appearance.

The C1 Web API Report Services uses C1FlexReport to render and export report. Please refer to How to Set Up C1 Web API Report Services for details.

To show the content of FlexReport from C1 Web API Report Services, set the following basic properties:

  1. serviceUrl: The url of C1 Web API Report Services. For example, 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report'.
  2. filePath: The full path to the FlexReport definition file. For example, 'ReportsRoot/Formatting/AlternateBackground.flxr'.

    The 'ReportsRoot' is the key of the report provider which is registered at server for locating specified report.
    The 'Formatting/AlternateBackground.flxr' is the relative path of the FlexReport definition file which can be located by the report provider.

  3. reportName: The report name defined in the FlexReport definition file. For example, 'AlternateBackground', for the report named 'AlternateBackground' in the AlternateBackground.flxr file.

Result (live):

<!DOCTYPE html> <html> <head> </head> <body> @(Html.C1().ReportViewer() .Id("gsReportViewer") .ServiceUrl(Model.ServiceUrl) .FilePath("ReportsRoot/Formatting/AlternateBackground.flxr") .ReportName("AlternateBackground")) </body> </html>
.wj-viewer{ width: 100%; height: 600px; }
using ReportViewer101.Models; using System.Collections.Generic; using System.Web.Mvc; namespace ReportViewer101.Controllers { public class HomeController : Controller { public ActionResult Index() { ReportViewer101Model model = new ReportViewer101Model(); model.ServiceUrl = "https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report"; return View(model); } } }

SSRS Reports

The ReportViewer control can also show SSRS report.

The C1 Web API Report Services uses C1SSRSDocumentSource to connect with SSRS server and render the SSRS report. It first fetches data from SSRS server, and then converts to the expected formats (normally HTML5 SVG). Please see How to Set Up C1 Web API Report Services for details.

To show the content of SSRS report from C1 Web API Report Services, set the following basic properties:

  1. serviceUrl: The url of C1 Web API Report Services. For example, 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report'.
  2. filePath: The full path to the SSRS report on the server. For example, 'c1ssrs/AdventureWorks/Company Sales'.

    The 'c1ssrs' is the key of the report provider which is registered at server for specified report. (For 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report', the 'c1ssrs' is the key of the report provider which links to the SSRS server 'http://ssrs.componentone.com:8000/ReportServer'.)
    The 'AdventureWorks/Company Sales' is the full path to the report which can be located in the SSRS server.

Result (live):

@(Html.C1().ReportViewer() .Id("ssrsReportViewer") .ServiceUrl(Model.ServiceUrl) .FilePath("c1ssrs/AdventureWorks/Company Sales"))
using ReportViewer101.Models; using System.Collections.Generic; using System.Web.Mvc; namespace ReportViewer101.Controllers { public class HomeController : Controller { public ActionResult Index() { ReportViewer101Model model = new ReportViewer101Model(); model.ServiceUrl = "https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report"; return View(model); } } }

Basic Features

The ReportViewer control has the following four basic properties, which allow you to customize its appearance and behavior:

The example below allows you to see what happens when you change these properties.

Result (live):


<div class="row"> @(Html.C1().ReportViewer() .Id("basicReportViewer") .ServiceUrl(Model.ServiceUrl) .FilePath("ReportsRoot/Formatting/AlternateBackground.flxr") .ReportName("AlternateBackground") .ZoomFactor(Model.ZoomFactor)) </div> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicContinuousViewMode" type="checkbox" /> Continuous View Mode? </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicSelectMouseMode" type="checkbox" /> Select Mouse Mode? </label> </div> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="basicFullScreen" type="checkbox" /> Full Screen? </label> </div> </div> <div class="col-mod-4"> <label class="col-md-2 control-label">Zoom Factor</label> <div class="col-md-2"> @(Html.C1().InputNumber() .Id("basicZoomFactor") .Value(Model.ZoomFactor) .Min(0.05) .Max(10) .Step(0.1) .Format("n2") .OnClientValueChanged("basicZoomFactor_ValueChanged")) </div> </div> </div> </div> </div>
// basic features var basicReportViewer = null, basicFullScreen = null, basicSelectMouseMode = null, basicZoomFactor = null, basicContinuousViewMode = null; function InitialControls() { // basic features basicReportViewer = wijmo.Control.getControl('#basicReportViewer'); basicFullScreen = document.getElementById('basicFullScreen'); basicSelectMouseMode = document.getElementById('basicSelectMouseMode'); basicZoomFactor = wijmo.Control.getControl('#basicZoomFactor'); basicContinuousViewMode = document.getElementById('basicContinuousViewMode'); // fullScreen basicFullScreen.checked = basicReportViewer.fullScreen; basicFullScreen.addEventListener('change', function () { basicReportViewer.fullScreen = this.checked; }); // selectMouseMode basicSelectMouseMode.checked = basicReportViewer.selectMouseMode; basicSelectMouseMode.addEventListener('change', function () { basicReportViewer.selectMouseMode = this.checked; }); // continousViewMode basicContinuousViewMode.checked = basicReportViewer.viewMode == wijmo.viewer.ViewMode.Continuous; basicContinuousViewMode.addEventListener('change', function () { basicReportViewer.viewMode = this.checked ? wijmo.viewer.ViewMode.Continuous : wijmo.viewer.ViewMode.Single; }); }; // basic features function basicZoomFactor_ValueChanged(sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } basicReportViewer.zoomFactor = sender.value; };
using ReportViewer101.Models; using System.Collections.Generic; using System.Web.Mvc; namespace ReportViewer101.Controllers { public class HomeController : Controller { public ActionResult Index() { ReportViewer101Model model = new ReportViewer101Model(); model.ServiceUrl = "https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report"; model.ZoomFactor = 1; return View(model); } } }

Report Names

ReportViewer renders the report if filePath and reportName properties are changed.

Result (live):


<div class="row"> <div class="col-md-12"> @{ var selReport = Model.ReportNames.FirstOrDefault(); var reportPath = selReport.Value; var index = reportPath.LastIndexOf('/'); var filePath = reportPath.Substring(0, index); var reportName = reportPath.Substring(index + 1); } @(Html.C1().ReportViewer() .Id("namesReportViewer") .ServiceUrl(Model.ServiceUrl) .FilePath(filePath) .ReportName(reportName)) <br /> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Report Path</label> <div class="col-md-9"> @(Html.C1().ComboBox() .Id("namesReportPath") .Bind(Model.ReportNames) .SelectedValuePath("Value") .DisplayMemberPath("Text") .SelectedIndex(0) .OnClientSelectedIndexChanged("namesReportPath_SelectedIndexChanged")) </div> </div> </div> </div> </div>
// report Names function namesReportPath_SelectedIndexChanged(sender){ if (!sender.selectedValue) return; var namesReportViewer = wijmo.Control.getControl('#namesReportViewer'); var reportPath = sender.selectedValue; var index = reportPath.lastIndexOf('/'); var filePath = reportPath.substr(0, index); var reportName = reportPath.substr(index + 1); namesReportViewer.filePath = filePath; namesReportViewer.reportName = reportName; };
using ReportViewer101.Models; using System.Collections.Generic; using System.Web.Mvc; namespace ReportViewer101.Controllers { public class HomeController : Controller { public ActionResult Index() { ReportViewer101Model model = new ReportViewer101Model(); model.ServiceUrl = "https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report"; model.ReportNames = GetReportNames(); return View(model); } private List<Cmblist> GetReportNames() { List<Cmblist> reportNames = new List<Models.Cmblist>(); reportNames.Add(new Cmblist("ReportsRoot/Formatting/AlternateBackground.flxr/AlternateBackground", "Alternating Background")); reportNames.Add(new Cmblist("ReportsRoot/Controls/AllCharts.flxr/AllCharts", "All Charts")); reportNames.Add(new Cmblist("ReportsRoot/Controls/CheckBox.flxr/CheckBox", "Check Box")); reportNames.Add(new Cmblist("ReportsRoot/Controls/Shapes.flxr/Shapes", "Shapes")); return reportNames; } } }

Setting Parameters in Code

Result (live):

<div class="row"> <div class="col-md-12"> <div class="row"> @(Html.C1().ReportViewer() .Id("paramsReportViewer") .ServiceUrl(Model.ServiceUrl) .FilePath("ReportsRoot/FlexCommonTasks/FlexCommonTasks.flxr") .ReportName("MultiValue DataBound Parameters")) </div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Report Parameters</label> <div class="col-md-2"> @(Html.C1().MultiSelect() .Name("parameters") .Id("paramsMultiselect") .Bind(Model.Parameters) .DisplayMemberPath("Text") .Placeholder("Please select parameters") .OnClientCheckedItemsChanged("parameters_CheckedItemsChanged") .CheckedIndexes(0)) </div> <div class="col-md-3"> <input class="btn" type="button" value="Apply" onclick="applyParameters()" /> </div> </div> </div> </div> </div>
// Setting Parameters in Code var parameterValues = [1]; function InitialControls() { // parameters features paramsReportViewer = wijmo.Control.getControl('#paramsReportViewer'); paramsReportViewer.queryLoadingData.addHandler(function (sender, e) { e.data["parameters.pCategory"] = parameterValues; }, paramsReportViewer); }; // parameters function parameters_CheckedItemsChanged(sender, e) { var items = sender.checkedItems; parameterValues = []; for (var i = 0; i < items.length; i++) { parameterValues.push(items[i].Value); } } function applyParameters() { paramsReportViewer.reload(); }
using ReportViewer101.Models; using System.Collections.Generic; using System.Web.Mvc; namespace ReportViewer101.Controllers { public class HomeController : Controller { public ActionResult Index() { ReportViewer101Model model = new ReportViewer101Model(); model.ServiceUrl = "https://demos.componentone.com/ASPNET/c1webapi/4.0.20182.136/api/report"; model.Parameters = GetParameters(); return View(model); } private List<Cmblist> GetParameters() { List<Cmblist> parameters = new List<Models.Cmblist>(); parameters.Add(new Cmblist("1", "Beverages")); parameters.Add(new Cmblist("2", "Condiments")); parameters.Add(new Cmblist("3", "Confections")); parameters.Add(new Cmblist("4", "Dairy Products")); parameters.Add(new Cmblist("5", "Grains/Cereals")); parameters.Add(new Cmblist("6", "Meat/Poultry")); parameters.Add(new Cmblist("7", "Produce")); parameters.Add(new Cmblist("8", "Seafood")); return parameters; } } }