在 CSS 文件中格式化 WebGrid答案

【问题标题】：Format WebGrid in CSS FIle在 CSS 文件中格式化 WebGrid
【发布时间】：2012-12-01 19:53:05
【问题描述】：

我的一个视图中有一个 webgrid。我想添加一些样式属性，但是当我在项目的 css 文件中添加它们时它不起作用。但是，当我在视图中使用样式标签添加它时，它可以工作。此外，视图的所有其他元素都会根据 css 文件进行格式化，除了 webgrid。

可以从 CSS 文件格式化 webgrid 吗？

编辑

var grid = new WebGrid(canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "grid");
grid.Bind(model, rowCount: Model.ToList().Count(), autoSortAndPage: false);
grid.Pager(mode:WebGridPagerModes.All, 
    firstText:"First", lastText:"Last", 
    previousText:"Previous", 
    nextText:"Next", 
    numericLinksCount: 15);
    @grid.GetHtml(htmlAttributes: new { id = "grid" },
    tableStyle: "webgrid",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    columns: grid.Columns(
        grid.Column(columnName: "column1", header: "column 1r"),
        grid.Column(columnName: "column2", header: "column 2", canSort:true),
        grid.Column(format: (item) => Html.ActionLink("Detail", "Detail", new { JobNumber = item.JobNumber, @style="color:#CCC;" })),
        grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.JobNumber }))
));

这里是css

.webgrid
{
 width: 100%;
 border: 0px;
 border-collapse: collapse;
 white-space:nowrap;
 }

.des {
    width:50%;
}

.webgrid a
{
color: #000;
}

.webgrid-header
{
padding: 6px 5px;
text-align: center;
background-color: #e8eef4;
border-bottom: 2px solid #3966A2;
height: 40px;
border-top: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}

.webgrid-footer
{
padding: 6px 5px;
text-align: center;
background-color: #e8eef4;
border-top: 2px solid #3966A2;
height: 30px;
border-bottom: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
 }

.webgrid-alternating-row
{
height: 30px;
background-color: #f2f2f2;
border-bottom: 1px solid #d2d2d2;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}

【问题讨论】：

你能贴一些代码吗？问题可能只是您的 CSS 选择器没有正确定位网格元素。
一切看起来都正确......我不确定会发生什么。我真正能建议的是，使用 Firebug 或类似的东西来查明样式没有被应用的确切原因。

标签： css asp.net-mvc-3 formatting webgrid

【解决方案1】：

我猜你错误地包含了 CSS 文件。确保您已使用 url 帮助程序来引用文件，而不是硬编码 url。所以把这些规则放在一个自定义的 CSS 文件中，然后像这样包含这个文件：

<link href="@Url.Content("~/Content/MyCustomStyle.css")" rel="stylesheet" type="text/css" />

【讨论】：