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>