How to change url and avoid refreshing the whole page when an hyperlink is clicked from the SSRS Report

Question

My question is, is there a way to change the url without refreshing the whole web page when an hyperlink from the SSRS Report is clicked?

I tried 2 different implementations of hyperlink in SSRS Report RDLC which are indicated here: SSRS: How to display a hyperlink in sql services reporting

1st Way Textbox Properties > Action pane > Go to URL radio button > Selected URL: http:// localhost:(port)/#/Path/ViewDetails

2nd Way Create Placeholder > Right click > Placeholder Properties > General Pane > On Markup type: HTML - Interpret HTML tags at styles > Value: ="< a href="http:// localhost:(port)/#/Path/ViewDetails">View Details< /a>"

I have an MVC project that uses AngularJS and has implemented local processing mode of SSRS Report Viewer. The Report Viewer was implemented in an ASPX page (MVC.ViewPage)

ReportViewer.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<SampleProject.Models.ReportInfo>" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head id="Head1" runat="server">
    <title></title>
  </head>
  <body>
    <form id="form1" runat="server">
      <asp:ScriptManager ID="scriptManager" runat="server" ScriptMode="Release"></asp:ScriptManager>
      <rsweb:ReportViewer ID="ReportViewer" runat="server"
            SizeToReportContent="true" AsyncRendering="false" Visible="true"
            ProcessingMode="Local" EnableViewState="true"
            InternalBorderStyle="None" BorderStyle="None" InternalBorderWidth="0"
            KeepSessionAlive="false" >
      </rsweb:ReportViewer>
    </form>
    <script runat="server">
       override protected void OnInit(EventArgs e){
          // some report viewer initialization here
          // some datasource data population code here
       }
    </script>

I put load this ASPX page into an IFrame of an MVC Partial View.

ViewDetail.cshtml

<div>
  <iframe src="{{report.viewDetailPath}}"></iframe>
</div>

viewDetail.js (AngularJS Controller)

angular.module('project').controller("ViewDetailCtrl", function($scope){
  $scope.report = {
                     id: // some guid,
                     viewDetailPath: '/Reports/ReportViewer';
                  }
}

I have a RDLC report with an hyperlink "View Detail".

I want my app to behave like a Single Page Application. When I click the "View Detail" link from the report, instead of refreshing the whole page, it will only change the URL and execute a javascript method from the AngularJS controller.

I have also implemented a $routeProvider of AngularJS in order to look like a single page application.

app.js

project.config(function($routeProvider){
  $routeProvider.
     when('/', {template: 'NYI'}).
     when('/Path/ViewDetails', {controller: 'ViewDetailCtrl', templateUrl: '/Reports/ViewDetail'}).
     otherwise({redirectTo: '/'});
});

ReportsController.cs(MVC Controller)

public PartialViewResult ViewDetail(){
  return PartialView("~/Views/Reports/ViewDetail.cshtml");
}

public ActionResult ReportViewer(){
  return View("~/Views/Reports/ReportViewer.aspx", new ReportInfo());
}

The $routeProvider to make the application like a single page app, does not work when the SSRS Report hyperlink changed the URL.

Juliane Holzt · Answer 1 · 2013-09-26T03:27:53.190

You will need to attach a "onclick" event handler to the links in question. This onclick handler can then prevent the click but instead change the URL by e.g. using angular's $location.update function (or setting $window.location.href in newer versions).

Here is angular's documentation on how to manipulate the URL: http://docs.angularjs.org/guide/dev_guide.services.$location

And here is a very simple example of such an event handler and how to attach it to a link. You might have to use something like getElementsByClassname instead (with a loop) or even some complicated selector:

function linkclick(e) {
    alert(e.target);
    e.preventDefault();
}
document.getElementById('testid').onclick = linkclick;

See it working here. It will just alert the URL clicked, but prevent the browser from opening that URL: http://jsfiddle.net/eJBfn/

I tried your suggestion. I supposed the in your example is the Hyperlink in my SSRS Report. then I placed the javascript function in my ReportViewer.aspx. I got an exception. The javascript was loaded first and it could not find the element id 'testid' since the SSRS Report is not yet loaded. — chary, Sep 26 '13 at 03:41

score 0 · Answer 2 · answered Sep 26 '13 at 07:31

0

If you're talking about deep linking in angular you need to use #/ before all of your anchor tag hrefs:

<a href="#/yourpath"></a>

answered Sep 26 '13 at 07:31

btm1

3,866
2
23
26

I have tried that but still, the whole page refreshes. I have a guess that SSRS Report is causing the whole page refresh thing. I just dont know how to avoid SSRS from doing that. – chary Sep 26 '13 at 08:27

How to change url and avoid refreshing the whole page when an hyperlink is clicked from the SSRS Report

2 Answers2