Display "no records found" in webgrid c# web pages

Question

Is there an easier way to display "No records found" in an empty webgrid? Below is the code I have that works for me. However, I do not want to have to create HTML table in the else block for other tabs.

@if (Page.Tab == "DisplayGrid")
{
    if (Page.IncompleteCount > 0)
    {
        var grid = new WebGrid(Page.DisplayData, rowsPerPage: 10, defaultSort: "UserName", canSort: true);
        @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
        @grid.GetHtml(columns: grid.Columns(
            grid.Column("UserName", "User"),
            grid.Column("Column1", "Column 1", format: @<div><a href="@Href("~/thispage/", item.UserId)" target="_blank">@item.UserId</a></div>),
            grid.Column("Column2", "Column 2", format: @<div class="w400">@HH.TruncateString(@item.Column2, 125)</div>),
            grid.Column("Column3", "Column 3", format: @<div class="w200"> @HH.FmtDate(@item.Column3)</div>)),
                tableStyle: "simple", headerStyle: "hdr", rowStyle: "odd", alternatingRowStyle: "even", mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    }
   else
    { 
        <table>
            <tr bgcolor ="#336699">
                <td width="150">
                    <font color="white"><b><u>User</u></b></font>
                </td>
                <td width="100">
                    <font color="white"><b>Column 1</b></font>
                </td>
                <td width="300">
                    <font color="white"><b>Column 2</b></font>
                </td>
                <td width="100">
                    <font color="white"><b>Column 3</b></font>
                </td>
            </tr>
            <tr>
                <td colspan="4" align="center">
                    <br />
                    <b>No User Records Found</b>

             <br />
                </td>
            </tr>
        </table>
    }
}

Webgrid for other tabs have different columns and # of columns. It is tedious to make sure I have the correct colspan # so that the message of "No records found" is displayed properly (center aligned). Any easier way to do this? Thanks.

Answer 1

Here's how I figured it out. Thanks to Pluto for suggesting the grid.Table method:

{
        var grid = new WebGrid(Page.DisplayData, rowsPerPage: 10, defaultSort: "UserName", canSort: true);
        var tfooter = (Page.IncompleteCount > 0 ? Page.IncompleteCount : "No") + " User Record" + (Page.IncompleteCount == 1 ? Page.IncompleteCount : "s") + " Found";

    @grid.Pager(mode: WebGridPagerModes.All, previousText: "previous", nextText: "next", numericLinksCount: 20)
    @grid.GetHtml(columns: grid.Columns(
        grid.Column("UserName", "User"),
        grid.Column("Column1", "Column 1", format: @<div><a href="@Href("~/thispage/", item.UserId)" target="_blank">@item.UserId</a></div>),
        grid.Column("Column2", "Column 2", format: @<div class="w400">@HH.TruncateString(@item.Column2, 125)</div>),
        grid.Column("Column3", "Column 3", format: @<div class="w200"> @HH.FmtDate(@item.Column3)</div>)),
            tableStyle: "simple", headerStyle: "hdr", rowStyle: "odd", alternatingRowStyle: "even", footer: @<div><b>@tfooter</b></div>)
}

I couldn't use mode, previousText and nextText attributes in the grid.Table method. I found a reference on how to add paging to this method and I'm working on it.