CODEWITHSUNDEEP
asp.net-mvc-4razorviewcrystal-reportsreport
Mahesh Mane
Mahesh Mane

Reputation: 11

Display crystal report on razor view in mvc4

How to display crystal report on web page??? I am using MVC4 razor view and wanted to display crystal report inside the div tag. And I am using visual studio 2010.

Thanks in advance.

Upvotes: 1

Views: 2418

Answers (1)

reckface
reckface

Reputation: 5858

I haven't seen a working Crystal report viewer for MVC. The Crystal Report viewer is an ASP.net web forms control.

What I have been able to do is to have a web forms page in your application (or another) with the report viewer and the means to pass parameters to it. Then in your div, host an iFrame that allows you to pass the the url parameters to display your report.

I used a report model:

public class ReportModel
{
    public string Url { get; set; }
    public string Title { get; set; }
    public short Height { get; set; }
    public int DialogWidth { get { return Width + 60; }}
    public short Width { get; set; }
}

A reports controller:

public ActionResult View(string title, string url, short height=960, short width = 800)
{
    ReportModel report = new ReportModel
    {
        Url = url,
        Title = title,
        Width=width,
        Height=height,
    };
    return PartialView("_reports", report);
}

A reports partial view that shows the report as a modal popup:

<div class="modal-dialog ">
    <div class="modal-content report" style="width: @dialogWidth; margin-left: -25%; margin-top: -12%;   ">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">@Model.Title</h4>
        </div>
        <div class="modal-body"><!-- Hello -->
            <iframe src="@Model.Url" style="width: @width; height: @height; " marginheight="30px" frameborder="0" scrolling="no" class="report"></iframe>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Upvotes: 1

Related Questions