空の場合、webgrid内のカスタムメッセージ

Question

@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ステートメントのWebグリッド内に「支払情報が見つかりません」というメッセージを表示したいとします。誰かがこれで私を助けることができますか？

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

Answer 2

Iグリッドがロードされたときにトリガされるように、この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 :) 
    } 
} 

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