Introduction
In this post (Part 2), I explain how to use Microsoft Report in MVC 4 With Image Fields
from a database.
In
Part 1 I have explained how to use Microsoft Report in MVC 4. But some viewer commented how to do the same with image data from a database.
Prerequisite
I used followings:
- .Net framework 4.0
- Entity Framework
- Sql Server 2008
Steps :
Just follow the steps and get result easily.
Step - 1 : Create New Project
Go to File > New > Project > Select asp.net mvc4 web application > Entry Application Name > Click OK.
Step-2: Add a Database.
Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.
Step-3: Create table and insert data for show in report
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
Here my database table
Step-4: Add Entity Data Model.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
Step-5: Add Action for populate data.
Go To Controller > Add your action > write following code and Rebuild your application to get data from Database.
public ActionResult StateArea()
{
using (PopulationEntities dc = new PopulationEntities())
{
var v = dc.StateAreas.ToList();
return View(v);
}
}
Step-6: Add View for show data on page.
Right Click on your Action > Add View > Enter View name > Check Create a strongly-type view > Select your model class > Select Scaffold templete > Select list > Add.
View
@model IEnumerable<MvcReportViwerApp.StateArea>
@{
ViewBag.Title = "State Area";
}
<h2>State Area - Report</h2>
<table>
<tr>
<th> State ID</th>
<th>State Name</th>
<th>Area(KM)</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>@Html.DisplayFor(modelItem => item.StateID)</td>
<td>@Html.DisplayFor(modelItem => item.Statename)</td>
<td>@Html.DisplayFor(modelItem => item.Area)</td>
<td>
@if (item.StateImage != null)
{
string base64String = "data:image/png;base64,"+Convert.ToBase64String(item.StateImage, 0, item.StateImage.Length);
<img src="@base64String" width="100px" />;
}
</td>
</tr>
}
</table>
<div style="padding:10px; border:1px solid black">
<div><a href="@Url.Action("Report",new {id= "PDF"})"> Get Report PDF</a></div>
<div><a href="@Url.Action("Report",new {id= "Excel"})"> Get Report Excel</a></div>
<div><a href="@Url.Action("Report",new {id= "Word"})"> Get Report Word</a></div>
<div><a href="@Url.Action("Report",new {id= "Image"})"> Get Report Image</a></div>
</div>
Run Application.
Look Result show in your browser.
Now Add some links to your view for generate PDF,Excel,Word files containing report data. Add this to your view.
Step-7: Add Reference (Microsoft.ReportViwer.WebForms.dll)
Right Click on references under project folder > Add Reference > Select Microsoft.ReportViwer.WebForms.dll > OK.
Step-8: Add Report file(.rdlc) and Design your report.
Add report folder to your project
Right Click on report folder > Add > New item > Select Report under Reporing > Enter report file name > Add.
Here we also have to add Datasource for our report.
Under report data Click on New > Dataset > New > Choose Data Connection > Next > Select Table > Finish.
Now Design your Report looks.
Step-9: Add Action for generate PDF, Excel, Word and Image File for Report Data
Right Click on your Action > Add View > Enter View name > Check Create a strongly-type view > Select your model class > Select Scaffold templete > Select list > Add. Go To Controller > Add your action > write following code and Rebuild your application to get data from Database.
public ActionResult Report(string id)
{
LocalReport lr = new LocalReport();
string path = Path.Combine(Server.MapPath("~/Report"), "ReportStateArea.rdlc");
if (System.IO.File.Exists(path))
{
lr.ReportPath = path;
}
else
{
return View("Index");
}
List<StateArea> cm = new List<StateArea>();
using (PopulationEntities dc = new PopulationEntities())
{
cm = dc.StateAreas.ToList();
}
ReportDataSource rd = new ReportDataSource("MyDataset", cm);
lr.DataSources.Add(rd);
string reportType = id;
string mimeType;
string encoding;
string fileNameExtension;
string deviceInfo =
"<DeviceInfo>" +
" <OutputFormat>" + id + "</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;
renderedBytes = lr.Render(
reportType,
deviceInfo,
out mimeType,
out encoding,
out fileNameExtension,
out streams,
out warnings);
return File(renderedBytes, mimeType);
}
Step-10: Run Application
Click on links and get your report in PDF, Excel, Word and Image format.