使用 AngularJS 呈现 ASP.NET MVC PartialView

Question

我正在尝试使用 ASP.NET MVC 5 将 Report Viewer for MVC 集成到我的 angular 应用程序中。

报告：

View/Report/Index.cshtml

@model JET.Shop.Common.Models.ReportRequestModel
@using ReportViewerForMvc;
<div>
    <div class="row">
        <div class="col-md-5">
            @using (Html.BeginForm("Index", "Report", FormMethod.Post))
            {
                <div class="form-group">
                    <label>Start Date</label>
                    @Html.TextBoxFor(model => model.StartDate, string.Format("{0:d}", DateTime.Now), new { @id = "startDate", @class = "datefield", type = "date" })
                </div>
                <div class="form-group">
                    <label>End Date</label>
                    @Html.TextBoxFor(model => model.EndDate, string.Format("{0:d}", DateTime.Now), new { @id = "endDate", @class = "datefield", type = "date" })
                </div>
            }
        </div>
        <div class="col-md-7">
            <div class="form-group">
                <input type="submit" value="Generate" />
            </div>
        </div>
    </div>
    <div class="row">
        @Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)
    </div>
</div>

报表控制器

public class ReportController : Controller
{
    // GET: Report
    public ActionResult Index(ReportType reportType = ReportType.SalesOrderList)
    {
        ReportRequestModel model = new ReportRequestModel();

        model.Type = reportType;
        model.StartDate = DateTime.Now;
        model.EndDate = DateTime.Now;

        return PartialView(model);
    }

    [HttpPost]
    public ActionResult Index(ReportRequestModel request)
    {
        List<ReportParameter> reportParams = new List<ReportParameter>();
        ReportViewer reportViewer = new ReportViewer();
        reportViewer.ProcessingMode = ProcessingMode.Local;

        SalesOrdersListDataSet salesOrderDataSet = new SalesOrdersListDataSet();
        salesOrderDataSet.SalesOrder.AddSalesOrderRow(Guid.NewGuid(), DateTime.Now, DateTime.Now, DateTime.Now.AddDays(1), 500, 60, 440, "Complete");
        salesOrderDataSet.SalesOrder.AddSalesOrderRow(Guid.NewGuid(), DateTime.Now, DateTime.Now, DateTime.Now.AddDays(1), 100, 12, 88, "Complete");

        ReportDataSource reportDataSource1 = new ReportDataSource();
        reportDataSource1.Name = "Report"; //Name of the report dataset in our .RDLC file
        reportDataSource1.Value = salesOrderDataSet.SalesOrder;

        reportViewer.LocalReport.DataSources.Add(reportDataSource1);
        reportViewer.LocalReport.ReportEmbeddedResource = "JET.Shop.WebApp.Reports.SalesOrderListReport.rdlc";
        reportViewer.LocalReport.SetParameters(reportParams);

        ViewBag.ReportViewer = reportViewer;

        return PartialView(request);
    }
}

路由配置

routes.MapRoute(
               name: "ReportController",
               url: "Report/Index/{reportType}",
               defaults: new { controller = "Report", action = "Index", reportType = UrlParameter.Optional }
            );

$RouteProvider

.when("/Report", {
                    templateUrl: "/Report/Index",
                    controller: "ReportController",
                    loginRequired: true,
                    requiredRoles: ["Admin"]
                })

我基本上想尝试呈现此报告查看器，但我无法在控制台上获取 HTTP 500 - 内部服务器错误。

我做了一些随机试验和错误，发现如果我让我的 Report/Index.cshtml 只包含普通的 HTML（没有剃刀），它就会呈现。但是当我在视图中包含我的@model 语句时，我得到了 HTTP 500。任何人都可以帮我解决这个问题吗？我的控制器（GET 索引）的断点工作正常。

仅供参考，我通过浏览器上的 URL 直接访问报告页面以导航到它，仅用于快速测试。

关于我应该如何处理这个问题有什么建议吗？我的主要目标是显示 ReportViewer，因为一旦它呈现在视图上，我就可以在那里工作。

Report/Index.cshtml 与普通 HTML 有效..

@*@model JET.Shop.Common.Models.ReportRequestModel
@using ReportViewerForMvc;*@

<div>
    <div class="row">
        <div class="col-md-5">
            @*@using (Html.BeginForm("Index", "Report", FormMethod.Post))
            {
                <div class="form-group">
                    <label>Start Date</label>
                    @Html.TextBoxFor(model => model.StartDate, string.Format("{0:d}", DateTime.Now), new { @id = "startDate", @class = "datefield", type = "date" })
                </div>
                <div class="form-group">
                    <label>End Date</label>
                    @Html.TextBoxFor(model => model.EndDate, string.Format("{0:d}", DateTime.Now), new { @id = "endDate", @class = "datefield", type = "date" })
                </div>
            }*@
            THIS WORKS FINE!
        </div>
        <div class="col-md-7">
            <div class="form-group">
                <input type="submit" value="Generate" />
            </div>
        </div>
    </div>
    <div class="row">
        @*@Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer)*@
    </div>
</div>

Answer 1

为了结束这个问题，

我最终根本没有使用报告查看器。我刚刚创建了一个从 crystal 报告生成 Excel/PDF 的 MVC 控制器。

使用 AngularJS 呈现 ASP.NET MVC PartialView

Render ASP.NET MVC PartialView Using AngularJS

c#

asp.net

asp.net-mvc

crystal-reports

angularjs