Getting Started

In this post, we will go through the motions using the ComponentOne C1ReportViewer for ASP.NET Wijmo in a Windows Azure environment. We are going to be building a basic sample from the ground up that involves three steps. First, we will create a SQL Database within Windows Azure that will hold the data that we will be reporting against. Second, we will create a report definitions xml file using the C1ReportDesigner application that installs with Studio for ASP.NET Wijmo. Finally, we will create and deploy an ASP.NET Webforms application that uses C1ReportViewer for ASP.NET Wijmo to display the reports that were created in the previous steps. There is a bit of housekeeping that we will need to do prior to setting off. Here is what you will need.

• Studio for ASP.NET Wijmo (Download link provided at the end of the post)
• Access to a Windows Azure account. If you do not have access to an existing account, you can sign up for a free trial at www.windowsazure.com
• Visual Studio (2010 or 2012)

Now that we have the prerequisites out of the way, let's proceed.

Creating the SQL Database

This sample and implementation will use a database created and hosted within Windows Azure, so we will need to do a bit of plumbing work here as well. Let's get started by logging into your Windows Azure account. Once inside, navigate to "SQL Databases" and select "New" as shown below. You will now be presented with several options available to you for creating a new database. for this example, we will select "Custom Create". In the subsequent dialog box, you can now enter the database name you wish to use as well as provide the name of the server that the database will be hosted on. Enter the information that is relevant to your database and server and click the check in the lower right to proceed. Next we can move on to designing the tables in the database and populating it with the data that we will be running the reports against. After creating the database, you will be presented with a "quick start" guide. You are given several options to start with, but the one we are particularly interested in is "Design your SQL Database". This will open a new browser window and start the login process for the management console. After logging into the management console, we can begin designing the tables in your database. Let's create a table named "Employee" and structure it as follows with three columns. Now moving onto the data. Click on the "Data" menu item shown in the screenshots above and give the tables some mock data. Once you are comfortable with the data, we will need to get the connection string from Windows Azure so we can connect to this database from the C1ReportDesigner and our web application. Navigate to the dashboard for the database that you have just created and click on the menu option to "Show Connection Strings". In the dialog box that is presented, look for the box that says ODBC and make a note of the entire connection string somewhere that you can copy and paste from in the subsequent steps.

Creating the Report Definitions

Now that we have the database laid out, let's open up the C1ReportDesigner application. The C1ReportDesigner application can be found on your C drive at C:\Program Files (x86)\ComponentOne\Studio for ASP.NET Wijmo\ReportingTools\Designer.4. With the C1ReportDesigner open, click on the "New Report" button on the left side of the screen. In the dialog, select "ODBC Data Provider" from the drop down menu and enter your connection string in the connection string field. Now, select the "Employee" table from the tree and click "Next". In the next step, add the table columns that you wish to add to the report. In this case I am adding "Name" and "Salary". Leave the rest of the wizard steps at their defaults and continue through to finish the wizard setup. Next you are presented with the design surface for your report. Let's go ahead and export the report definition as it is to use in our application. Click on the drop down menu at the top left of the C1ReportDesigner and select "Save". Give the file a name that is easy to remember and click save in the SaveFileDialog. For this example, I have named the report definition file AzureDefninition1.xml.

Creating the Web Application

Moving on, we can now open Visual Studio and select "New Project" from the file menu. We will be creating an "Empty Web Application" for this example. Once the application is created, we can add the default.aspx page to the project. Right click on the project name and select Add>New Item. Select the ASP.NET Webform and change the name to default.aspx. Next we will need to add a folder that will hold our report definitions file(s). We can do this by right clicking the project name and selecting Add->New Folder and naming the new folder "Reports". Now, right click the Reports folder and select Add->Existing Item to add the report definition file that we created in the previous step. Now we can write some code. First we need to add some references to the project. Right click the "References" node in the solution explorer and select "Add Reference". The following references will need to be added to the project.

• C1.C1Report.4
• C1.Web.Wijmo.Controls.4

Double click on the default.aspx file in the solution explorer and open the design surface of the page. This is where we will click and drag the C1ReportViewer onto the page. Open the toolbox and locate the C1ReportViewer control. Once you have located it, click and drag it onto the design surface. This will automatically create the license file for you as well as add any remaining references. Once you have done this, the default.aspx page should look similar to the following. Wiring the C1ReportDesigner up is quite an easy task. Open the default.aspx.cs code behind file and modify it so that the code matches the code shown below.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using C1.Web.Wijmo.Controls.C1ReportViewer;  
using C1.C1Preview;  
using C1.C1Report;  

namespace C1AzureReportViewer  
{  
    public partial class _default : System.Web.UI.Page  
    {  

        string rptpath, query, rptname;  

        protected void Page_Load(object sender, EventArgs e)  
        {  
            query = "SELECT NAME, SALARY FROM dbo.Employee";  
            rptpath = HttpContext.Current.Server.MapPath("~/Reports/AzureDefinition1.xml");  
            rptname = "dbo.Employees Report";  

            C1ReportViewer.RegisterDocument(rptname, MakeDoc);  

            C1ReportViewer1.FileName = rptname;  
            C1ReportViewer1.ReportName = rptname;  
        }  

        protected C1PrintDocument MakeDoc()  
        {  
            C1Report report = C1ReportViewer.CreateC1Report();  
            report.Load(rptpath, rptname);  
            report.DataSource.ConnectionString = "ENTER YOUR CONNECTION STRING HERE!!!";  
            report.DataSource.RecordSource = query;  
            report.Render();  
            return report.C1Document;  
        }  
    }  
}  

If we stop right here and run the project, we should be able to see the report being generated and displayed in the C1ReportViewer in our browser. It will look like the following screenshot. Once we verify that the application runs successfully, we can move on to deployment.

Preparing for Deployment

The first step in the deployment process is to create a new Cloud Service in Windows Azure that we can deploy this web application to. To do this, log in to Windows Azure, click on "Cloud Services" and click on the "New" button in the bottom left of the screen. You will be presented with a dialog where you can name this service and select a server location. Next, we can move back to Visual Studio and add a Cloud Service Project to our solution. To do this, right click on the project name and select "Add Windows Azure Cloud Services Project" as show below. With this new addition, we can now deploy our application to our cloud service that we created in the previous step. There are a few ways in which to do this, but for the purpose of this example, we'll be using the publish wizard in Visual Studio 2012.

Deploying the Application

Over in Visual Studio, we can now right click on the Cloud Services Project that we just created and select "Publish" from the context menu. You will be presented with the Windows Azure publish wizard. The first step here is to "Sign in to Download Credentials". Once you have downloaded the credentials package, click on the "Import" button to import the newly downloaded files. In the next window, ensure all of your information is correct and click "Finish". Visual Studio will go through the motions and deploy the application to the specified cloud service and will give you the following when it has finished. If you click the link marked "Website URL" in that deployment window, you should be taken to your newly deployed application that uses C1ReportViewer and C1Report to generate and display reports.

Links

http://www.componentone.com/SuperProducts/StudioASPNET/

Windows Azure Reporting With C1ReportViewer for ASP.NET Wijmo

Getting Started

In this post, we will talk a bit about using ComponentOne C1ReportViewer for Studio for ASP.NET Wijmo in a Windows Azure environment to create and display a basic report.Here are some of the things that you will need before we get started.

·Studio for ASP.NET Wijmo (Download link provided at the end of the post)

·Access to a Windows Azure account.If you do not have access, you can sign up for a free trial at www.windowsazure.com.

·Visual Studio

Now that we have the prerequisites out of the way, let’s proceed.

Creating your SQL Azure Database

This sample and implementation will use a database created and hosted within Windows Azure, so we will need to do a bit of plumbing work here as well.There are three steps that we will address in this post.These are as follows:

·Create and populate a new database

·Create the report definition with C1ReportDesigner

·

Let’s get started by logging into your Windows Azure account.Once inside, navigate to “SQL Databases” and select “New”.

You will now be presented with several options available to you for creating a new database.For this implementation, we will select “Custom Create”.In the subsequent dialog box, you can now enter the database name that you wish to use as well as provide the name of the server that the database will be hosted on.

Enter the information that is relevant to your database and server and click the check to proceed.Next, we can move on to designing our database and populating it with the data that we will be running the reports against.

After creating the database, you will be presented with a sort of “quick start” guide.You will be given several options, but the one we are interested in is “Design your SQL Database”.

Once logged into the server, you can begin designing the database.For this example I’m going to add two tables.One will be named “Employees” and the other “Products”.The Employee table will have three columns as shown in the following screenshot.

The Product table will have five columns as shown in the following screenshot.

Once you have the design down, it’s time to give your tables some data.Click on the “Data” menu option as shown in the screenshots above and give your tables some mock data.