MVC 3：如果不从母版页继承CSS，则无法加载部分视图（Telerik Report Viewer+Bootstrap）

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

主页

@{
  ViewBag.Title = "Reports";
}

<h2>Reporting</h2>

@Html.Partial("_UnderContructionPartial")

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

这是报表查看器的外观：

它应该是这样的：

---

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

return PartialView("ReportViewer");

您可以尝试返回一个视图，然后在另一个布局csthml页面中作为第二个参数传递，该页面不定义任何css文件或仅定义所需的css文件

比如：

return View("ReportViewer" "~/Views/Shared/_TestLayout.cshtml");

---

我只是遇到了同样的问题，在一点点的头痛之后，这就是我想到的。目前正在使用带引导的MVC4

我在~/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;
}

这使得除了导出链接之外的所有内容都近乎完美，但我只是将字体大小增加到10磅，看起来很好。选择箭头有点破碎，但我现在可以接受它。此外，我将背景大小保持在28px，并使按钮变小，但您可以将大小增加到40px，并保持按钮大小不变。根据视图中的其他内容，您可能需要稍微调整一些内容，但这会让您走上正确的轨道。我希望当他们发布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可能会影响视图中的其他选择列表。克服这个问题的一种方法是创建一个新类并将其添加到选择列表中。我就是这样做的

视图：

---

我不再使用Telerik提供的信息，它是为MVC4提供的，但是仍然可以使用MVC3。一个问题是他们的报表查看器还没有Razor支持，所以我不得不使用aspx页面。我认为一个问题可能是，我使用的是aspx页面，而不是ascx页面用于部分视图，但我不是100%确定，因为我只在MVC应用程序中使用过Razor视图引擎。从这里和其他网站的搜索中，我看到显式返回部分视图应该只返回视图，而不从母版页返回其他css，但这里不是这样。为该文件添加新母版页没有帮助。它仍然以相同的方式呈现。不知道为什么这么难。太棒了！这确实帮了大忙。然而，我现在唯一的问题是，在Chrome中，当前页面文本框看起来有点混乱。在您的屏幕截图中，数字正确显示，但在Chrome中，就像文本被向下推一样，顶部有某种填充。虽然css不是我最擅长的领域，但我会努力的。不过，谢谢你的建议，这样好多了。我真的很感激！编辑：另一个快速问题。你知道有什么方法可以让实际的报表工具栏更高，而不是让其他元素更小吗？我相信我在Chrome上也遇到了类似的问题。我在input[type=text]，input[type=number]中添加了一个10的线宽。不可编辑的输入解决了这个问题。您可以将工具栏放大，但您需要使用不同的背景或放大当前的背景—当前只有28px高。我考虑过这样做，但较小的图标更适合我的网站。通过修改CSS 11px的高度来调整按钮的大小应该不难。在.ReportToolbar INPUT下，我将高度改为18px，而不是11，并将当前页面文本框固定到现在可以看到数字的位置。现在，我可以忍受工具栏中其余的不一致。现在css的唯一问题是，我在页面上有另一个下拉列表，用于选择运行的报告。当我运行报表时，报表查看器中的css会使下拉列表变小。除此之外，其他一切看起来都不错。我真的很感谢你的帮助。在答案中添加了Edit3。是的

---

It’很有趣，因为我今天早上也把选择列表添加到了我的项目中。很抱歉，我花了这么长时间才做出回应，被拉到了一百万个不同的方向。第三次编辑修复了运行报告时下拉列表的更改。在报表工具栏和报表本身之间仍然有一个小的差距，但我可以接受。非常感谢你的帮助，加里，谢谢！

.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;
}

    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;
}

<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>

.select
{
    height: 30px !important;
    font-size: 10pt !important;
}