Wednesday, December 9, 2015

In this week’s TNWiki Article Spotlight, I wrote a post
highlighting an article that won the October month's TechNet Guru Awards under Windows Presentation
Foundation (WPF) Category, an article created by Andy ONeill titled WPF: Layout Lab.

Tuesday, November 17, 2015

One of my most wanted features in Visual Studio is now available in Visual Studio 2015 Update 1 RC. And I believe most of you must have been waiting for this as well. It’s the short cut for going to the implementation of a method in a interface or an abstract class.

Just right click on the method and select Go To Implementation.

Go To Implementation

And you will be navigated to the implementation.

Implementation

Imagine the following scenario. You have Web API controller and you are injecting so many interfaces and from a API action you are calling the method in the interface. To see the implementation, so far what I have used was Ctrl+Alt+F12 (Find Symbol Results). For instance if I Ctrl+Alt+F12 after putting the cursor on GetById method, this will be the output.

Find Symbol Results

So if you have some other methods named GetById, those will also be displayed in Find Symbol Results which will cause some pain finding what exactly you are looking for. Now no more pain, just right click on the method and Go To Implementation.

Go To Implementation

You will be landed on the Implementation. Isn’t it just great!

If you have not yet updated your Visual Studio 2015 to Update 1 RC, here you go.

In the Data Source dialog, for the Data Source Name, you can give what ever a name you want. For the Connection Type, I am selecting XML and for the Connection String, I am simply providing my Web API employees end point url.

Data Source

I am clicking on OK, and adding a new DataSet. Again for the DataSet Name, you can give any name, and I am selecting the “Use a dataset embedded in my report.” radio button. For the Data Source, I am selecting my previously created Data Source.

Data Set

And now I am clicking on the Query Designer. And from there, let’s click on the Execute Query button to see what happens.

Query Designer

I am thrown with a error, “Data at the root level is invalid.”. This is basically because since we have used Data source connection type as XML, SSRS is requesting data in XML format. And the Web API is retuning data in JSON format. To resolve the issue, we can simple add following line of code in the Web API Application_Start method.

This will modify the Web API content negotiation by checking if the request has a query string named type and it’s value, set to xml, and then the response will be sent in “application/xml”.

Now let’s modify the Connection String, in the Data source, as follows.

Data Source

And in the DataSet, from the Query Designer, let’s execute the query and see.

Query Designer

Now we are receiving the data as expected. Once you click on OK, it will notify that the query is blank. Doesn’t matter and let’s click on OK. Now you can see that the fields are generated in the DataSet and next step is to create the report. So that’s about it.

I am uploading the full sample to my OneDrive, and you can try it yourself.

Wednesday, October 14, 2015

WebForms ReportViewer control can be used to render reports deployed to SQL Server Reporting Servcies (SSRS) Report Server or reports which exists in local machine inside a web application. In this post, let’s see how we can use the WebForms ReportViewer control inside a AngularJS Single Page Application to render reports deployed in SSRS Report Server.

I have a SPA running with Visual Studio created using one of my previous posts “Creating an Empty ASP.NET Project Powered by AngularJS using Visual Studio”. And I have set of reports deployed to SSRS Report Server already (Here I am not going to explain how you can deploy reports to SSRS Report Server). Let’s extend the the same application to include the ReportViewer inside Home page. My plan is to add a ReportViewer control inside ASP.NET Web Form and embed that particular page inside home page using an iframe.

So for that let’s start by adding a WebForm to the project. In my example, I am creating a folder inside App folder named pages and adding the WebForm there and naming it as Viewer.aspx.

Add WebForm

Now on the designer of Viewer.aspx, I am adding a ReportViewer control, from the Visual Studio Toolbox.

ReportViewer

So this is how my Viewer.aspx looks like after adding the ReportViewer.

I have done some styling here, you can also apply whatever the styles you need. Also I have added a script manager, because the ReportViewer web control requires a script manager on the web form. Now inside the Viewer.aspx code behind, we need to add the code for processing the report.

Here the page will receive a URL parameter through a query string which specifies the report id to render. Basically the report id would be the report name which is deployed to SSRS Report Server. And I am retrieving following values from the web.config file.

Here I have set of reports where I am ng-repeating and when clicking on an item, I am invoking the openReport method. Basically it will assign the report id to the model variable which I am passing as a query parameter to Viewer.aspx. On click on report items, it will make the iframe source different, which will load the particular report.