如果为空，则 webgrid 内的自定义消息答案

【问题标题】：Custom message inside the webgrid if empty如果为空，则 webgrid 内的自定义消息
【发布时间】：2014-08-27 21:42:44
【问题描述】：

  @if (Model.ActivityCollection.Count > 0)
        {
        var grid = new WebGrid(source: Model.ActivityCollection, rowsPerPage: 12, canSort: false);   
            @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
            grid.Column("EffectiveDate", "Effective Date", style: "date"),
            grid.Column("PremiumPaymentAmount", "Premium Payment Amount", style: "amount"),
            grid.Column("PaymentType", "Payment Type", style: "date")
           ));
        }
else
        {

        }

我想在上述 else 语句的网络网格内显示一条消息“未找到付款信息”。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： asp.net-mvc-3 webgrid

【解决方案1】：

<div class="grid" style="margin-left:5px;" id="grid">          
        @if (Model.ActivityCollection.Count > 0)
        {
            var grid = new WebGrid(source: Model.ActivityCollection, rowsPerPage: 12, canSort: false);   
            @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
            grid.Column("EffectiveDate", "Effective Date", style: "date"),
            grid.Column("PremiumPaymentAmount", "Premium Payment Amount", style: "amount"),
            grid.Column("PaymentType", "Payment Type", style: "date")
           ));
        }
        else
        {
            <div class="grid">
            <table cellspacing="0" width="80%">
               <thead>
                    <tr>
                        <th>Effective Date</th>
                        <th>Premium Payment Amount</th>
                        <th>Payment Type</th>
                        </tr>
                </thead>
                <tbody>
                 <tr>
                        <td colspan="3" align="center" ><br />No payment information found<br /><br /> </td>
                 </tr>                     
                </tbody>
            </table>
            <br/><br/><br/><br/>
            </div>
        }
        </div>

【讨论】：

【解决方案2】：

我让这个 jQuery 函数在加载网格时触发，如果表中没有数据，它将在空表中插入一个新行以显示文本。比在 HTML 中构建 WebGrid 的副本更易于管理。

我在 Webgrid 中添加了一个行样式，以识别行（不需要页眉+页脚）：“webGridDataRow”。

function addNoDataTextIfNeeded(){
    if($(".webGrid .webGridDataRow").length < 1){ //if there are no data-rows in table, our text should be displayed
        var newCell = $("<td>") //create the cell
            .attr("colspan", $(".webGrid tr:first th").length) //set colspan so it will span entire grid width (counting the number of column headers)
            .text("No data found"); //add the text to be displayed
        $("<tr>").append(newCell).appendTo(".webGrid"); //add the cell to a row to the grid :)
    }
}

【讨论】：

【解决方案3】：

你可以这样做吗？

public class MyWebGrid : WebGrid
{
    public WebGridMkf(IEnumerable<dynamic> source = null,
        IEnumerable<string> columnNames = null,
        string defaultSort = null,
        int rowsPerPage = 10,
        bool canPage = true,
        bool canSort = true,
        string ajaxUpdateContainerId = null,
        string ajaxUpdateCallback = null,
        string fieldNamePrefix = null,
        string pageFieldName = null,
        string selectionFieldName = null,
        string sortFieldName = null,
        string sortDirectionFieldName = null) :
        base(source, columnNames, defaultSort, rowsPerPage, canPage, canSort, ajaxUpdateContainerId, ajaxUpdateCallback, fieldNamePrefix, pageFieldName, sortFieldName, sortDirectionFieldName)
    {
    }

    public IHtmlString Table(string tableStyle = null,
        string headerStyle = null,
        string footerStyle = null,
        string rowStyle = null,
        string alternatingRowStyle = null,
        string selectedRowStyle = null,
        string caption = null,
        bool displayHeader = true,
        bool fillEmptyRows = false,
        string emptyRowCellValue = null,
        IEnumerable<WebGridColumn> columns = null,
        IEnumerable<string> exclusions = null,
        Func<dynamic, object> footer = null,
        object htmlAttributes = null)
    {
        if (this.TotalRowCount.Equals(0))
        {
            return new HtmlString("<div>teste</div>");
        }

        return base.Table(tableStyle, headerStyle, footerStyle, rowStyle, alternatingRowStyle, selectedRowStyle, caption, displayHeader, fillEmptyRows, emptyRowCellValue, columns, exclusions, footer, htmlAttributes);
    }
}

然后调用：

var grid = new MyWebGrid(
        ajaxUpdateContainerId: "grid-test",
        rowsPerPage: 10,
        defaultSort: "id"
    );
    grid.Bind(
        source: Model.ActivityCollection,
        rowCount: Model.ActivityCollection.Count
    );
@grid.Table(
alternatingRowStyle: "color1",
rowStyle: "color0",
tableStyle: "webgrid table table-striped table-hover table-condensed",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
footer: @<span></span>,
columns: grid.Columns(
    grid.Column(columnName: "id",
                header: "ID",
                style: "column-id",
                canSort: true)
    )
)

【讨论】：