2

我在 MVC 3 应用程序中使用 Telerik Reporting 时遇到 css 冲突/冲突问题。标准 Site.css 及其报表查看器存在 CSS 问题是一个已知问题。但是，我们的应用程序使用 Twitter Bootstrap 作为 UI css，我找不到任何冲突的区域。由于我找不到冲突的 css（我什至不确定是否能够在不破坏应用程序中其余 css 的情况下修复它），我的第二个想法是加载没有 css 的部分视图，这理论上应该可以毫无问题地工作。但是，如果不从母版页继承 CSS，我就无法加载部分视图。该站点正在使用 Razor 视图引擎，报告查看器的部分视图正在使用 Web 表单视图引擎，因为 Telerik 尚未更新其报告（这是 2013 年第一季度）。有什么方法可以强制加载此视图而不从母版页（Layout.cshtml）继承任何 css？我的代码如下：

主页

@{
  ViewBag.Title = "Reports";
}

<h2>Reporting</h2>

@Html.Partial("_UnderContructionPartial")

@{
  Html.RenderPartial("ReportViewer");
}

使用报告查看器查看

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Register Assembly="Telerik.ReportViewer.WebForms, Version=7.0.13.220, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.ReportViewer.WebForms" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Reporting, Version=7.0.13.220, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.Reporting" TagPrefix="telerik" %>

<!DOCTYPE html>

<html>
  <head runat="server">
    <title>Report</title>
  </head>
  <body>
    <script runat="server">
      public override void VerifyRenderingInServerForm(Control control)
      {
        // to avoid the server form (<form runat="server"> requirement
      }
      protected override void OnLoad(EventArgs e)
      {
        base.OnLoad(e);
        var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
        //instanceReportSource.Parameters.Add(new Telerik.Reporting.Parameter("UserName", ViewData["UserName"].ToString()));
        instanceReportSource.ReportDocument = new program1.Web.Reports.TestReport();
        ReportViewer.ReportSource = instanceReportSource;
        ReportViewer.ViewMode = ViewMode.PrintPreview;
      }
    </script>

    <form id="main" method="post" action="">
      <telerik:ReportViewer ID="ReportViewer" Width="100%" Height="800px" runat="server">
      </telerik:ReportViewer>
    </form>
  </body>
</html>

控制器

public ActionResult ReportViewer()
{
  return PartialView("ReportViewer");
}

这是报表查看器的样子：

在此处输入图像描述

这就是它“应该”的样子：

在此处输入图像描述

4

2 回答 2

3

我刚刚遇到了同样的问题，经过一番头撞后，这就是我想出的。目前使用 MVC4 和 Bootstrap。

我在 ~/Content/ 中创建了一个新的 .css 文件并添加了：

.InputButtonClass
{
    display: block;
    margin-top: 3px !important;
}

select
{
    height: 23px !important;
    font-size: 8pt !important;
}

input[type="text"], input[type="number"] .uneditable-input
{
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    margin-bottom: 5px;
    padding: 4px 6px;
    vertical-align: middle;
}

input, textarea, .uneditable-input
{
    width: auto;
}

.ReportToolbar INPUT
{
    height: 11px;
    padding-bottom: 3px;
}

#ReportViewer1_ReportToolbar_NavGr_CurrentPage_CurrentPage
{
    margin-top: 4px !important;
    padding: 3px 2px 3px 2px !important;
}

在此处输入图像描述

这使得除了“导出”链接之外的所有内容都几乎完美无缺，但我只是将字体大小增加到 10pt，看起来还不错。选择箭头有点破碎，但我现在可以忍受它。此外，我将背景尺寸保持在 28 像素，并使按钮更小，但您可以将尺寸增加到 40 像素并保持按钮尺寸相同。根据您在视图中的其他内容，您可能需要稍微调整一下，但这应该会让您走上正确的轨道。我希望当他们发布 Telerik 的下一个版本时，这会变得容易得多。

编辑：仅在 Firefox 和 Safari 上测试。可能需要添加对 IE/Chrome 的兼容性。

EDIT2：我添加了行高来解决 IE 和 Chrome 中不显示页码的问题。

    input[type="text"], input[type="number"] .uneditable-input
{
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    margin-bottom: 5px;
    padding: 4px 6px;
    vertical-align: middle;

    line-height: 10px;
}

Edit3：使用上面的 CSS 可能会影响视图中的其他选择列表。解决此问题的一种方法是创建一个新类并将其添加到您的选择列表中。我就是这样做的。

看法：

<form>
<select name="ReportIndex" class="select">
    <option value="1">Guest Report</option>
    <option value="2">--TBA--</option>
    <option value="3">--TBA--</option>
</select>
    <input type="submit" value="Change Report" />
</form>

CSS：

.select
{
    height: 30px !important;
    font-size: 10pt !important;
}
于 2013-05-09T19:28:36.460 回答
0

您是否需要在此处使用局部视图：

return PartialView("ReportViewer");

您可以尝试返回一个视图，然后作为第二个参数传入一个不同的布局 csthml 页面，该页面没有定义任何 css 文件或只定义您需要的 css 文件。

所以像：

return View("ReportViewer" "~/Views/Shared/_TestLayout.cshtml");
于 2013-04-23T08:09:20.620 回答