mvc5+ef6+Bootstrap 項目心得--WebGrid

1.mvc5+ef6+Bootstrap 項目心得--創立之初

2.mvc5+ef6+Bootstrap 項目心得--身份驗證和權限管理

3.mvc5+ef6+Bootstrap 項目心得--WebGrid

介紹
咱們能夠在web頁面用HTML表格元素定義WebGrid顯示數據，它以很是簡單的方式呈現表格數據，支持自定義格式列，分頁，排序，並經過AJAX異步更新。 

WebGrid主要屬性：
Source -數據來自哪裏。 一般狀況下，經過controller action傳遞model
DefaultSort -定義如何將數據排序。只要在這裏提供列名。 
RowsPerPage -每頁表格顯示的記錄數。
CanPage -容許分頁。 
CanSort -容許經過點擊列標題排序。 
SelectedFieldName -獲取查詢字符串字段，用於指定所選行WebGrid實例的全名。 

ajaxUpdateContainerId - 點擊下一頁，異步更新table

如下代碼是項目中WebGrid的使用

@model IEnumerable<CarLoan.Models.FormShowedInfo>
@{
    ViewBag.Title = "總部退單";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId:"ajax_table");
    int index = grid.PageIndex * grid.RowsPerPage;
}
<style>
    .remark{
        width:200px;
        height:auto;
        overflow:auto;
    }
</style>
<div class="panel panel-primary common_panel">

    <ul class="nav nav-tabs" role="tablist">
        <li class="active">@Html.ActionLink("總部退單(" + Model.Count() + ")", "BackForm", "ApplyFor") </li>
        <li>@Html.ActionLink("總部拒單", "RejectForm", "ApplyFor")</li>
    </ul>
    <div class="panel-body" id="ajax_table">

        @grid.GetHtml(tableStyle: "table table-hover table-striped table-bordered",
columns: grid.Columns(
    grid.Column(header: "序號", format: (item) => ++index),
grid.Column("CustomerName", "客戶姓名", format: (data) => new HtmlString("<a href='/Customer/Details/"
  + data.ID + "' target='blank'>" + data.CustomerName + "</a>")),
grid.Column("IdNo", "身份證號"),
grid.Column("LoanType", "貸款類型", format: (item) => new HtmlString(Util.GetDisplayNameForEnum(item.LoanType))),
grid.Column("Money", "申請金額(元)", format: (item) => Util.GetFormatedAmount(item.Money)),
grid.Column("Reason", "退回緣由", format: (data) => new HtmlString("<a class='popover-destroy' data-toggle='popover'" +
" data-container='body' title='備註' data-placement='right'  data-content='"
+ data.Remark + "'>" + data.Reason + "</a>")),
grid.Column("Time", "退回時間"),
grid.Column(header: "操做", format: (item) => new HtmlString(
             Html.ActionLink("修改資料", (item.IsRZZL) ? "ApplyForTableFinance" : "ApplyForTable", new { id = item.ID }, new { @class = "btn btn-primary" }) +
" <button type='button' class='btn btn-primary' onclick='StopLoan(" + item.id + ")'>客戶終止貸款</button>"))),
mode: WebGridPagerModes.All, firstText: "第一頁",
                   previousText: "上一頁", nextText: "下一頁", lastText: "最後一頁", numericLinksCount: 10)

    </div>

</div>