在ASP.NET MVC中使用 Bootstrap table插件

Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

1. 控制器代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AspDotNetMVCBootstrapTable.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetData()
        {
            var products = new[] {
                new Product { ID = "1", Name = "Item 1", Price = "$1" },
                new Product { ID = "2", Name = "Item 2", Price = "$1" },
                new Product { ID = "3", Name = "Item 3", Price = "$1" },
                new Product { ID = "4", Name = "Item 4", Price = "$4" },
                new Product { ID = "5", Name = "Item 5", Price = "$5" },
                new Product { ID = "6", Name = "Item 6", Price = "$6" },
                new Product { ID = "7", Name = "Item 7", Price = "$7" },
                new Product { ID = "8", Name = "Item 8", Price = "$8" },
                new Product { ID = "9", Name = "Item 9", Price = "$9" },
                new Product { ID = "10", Name = "Item 10", Price = "$10" },
                new Product { ID = "11", Name = "Item 11", Price = "$11" },
                new Product { ID = "12", Name = "Item 12", Price = "$12" },
                new Product { ID = "13", Name = "Item 13", Price = "$13" },
                new Product { ID = "14", Name = "Item 14", Price = "$14" },
                new Product { ID = "15", Name = "Item 15", Price = "$15" },
                new Product { ID = "16", Name = "Item 16", Price = "$16" },
                new Product { ID = "17", Name = "Item 17", Price = "$17" },
                new Product { ID = "18", Name = "Item 18", Price = "$18" },
                new Product { ID = "19", Name = "Item 19", Price = "$19" },
                new Product { ID = "20", Name = "Item 20", Price = "$20" },
                new Product { ID = "21", Name = "Item 21", Price = "$21" },
                new Product { ID = "22", Name = "Item 22", Price = "$22" },
                new Product { ID = "23", Name = "Item 23", Price = "$23" },
                new Product { ID = "24", Name = "Item 24", Price = "$24" },
                new Product { ID = "25", Name = "Item 25", Price = "$25" },
                new Product { ID = "26", Name = "Item 26", Price = "$26" },
                new Product { ID = "27", Name = "Item 27", Price = "$27" },
                new Product { ID = "28", Name = "Item 28", Price = "$28" },
                new Product { ID = "29", Name = "Item 29", Price = "$29" },
                new Product { ID = "30", Name = "Item 30", Price = "$30" },
            };

            return Json(products.ToList(), JsonRequestBehavior.AllowGet);

        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        private class Product
        {
            public string ID { get; set; }
            public string Name { get; set; }
            public string Price { get; set; }
        }

    }
}

2. 视图代码:

@{
   ViewBag.Title = "Home Page";
}
@section css {
   <link href="~/Scripts/Bootstrap-Table-1.5.0/bootstrap-table.min.css" rel="stylesheet" />
   <style type="text/css">

   </style>
}
<div class="row">
   <div class="col-md-12">
       <h2>ASP.NET MVC and Bootstrap Table Integration</h2>
       <table id="table-javascript"></table>
   </div>
</div>
@section Scripts {
   <script src="~/Scripts/Bootstrap-Table-1.5.0/bootstrap-table.min.js"></script>
   <script src="~/Scripts/Bootstrap-Table-1.5.0/locale/bootstrap-table-en-US.min.js"></script>
   <script type="text/javascript">
       $(function () {
           $('#table-javascript').bootstrapTable({
                   method: 'get',
                   url: '/Home/GetData',
                   cache: false,
                   height: 400,
                   striped: true,
                   pagination: true,
                   pageSize: 50,
                   pageList: [10, 25, 50, 100, 200],
                   search: true,
                   showColumns: true,
                   showRefresh: true,
                   minimumCountColumns: 2,
                   clickToSelect: true,
                   columns: [{
                       field: 'state',
                       checkbox: true
                   }, {
                       field: 'ID',
                       title: 'Item ID',
                       align: 'right',
                       valign: 'bottom',
                       sortable: true
                   }, {
                       field: 'Name',
                       title: 'Item Name',
                       align: 'center',
                       valign: 'middle',
                       sortable: true
                   }, {
                       field: 'Price',
                       title: 'Item Price',
                       align: 'left',
                       valign: 'top',
                       sortable: true
                   }, {
                       field: 'operate',
                       title: 'Item Operate',
                       align: 'center',
                       valign: 'middle',
                       clickToSelect: false,
                       formatter: operateFormatter,
                       events: operateEvents
                   }]
               });

       });

       function operateFormatter(value, row, index) {
           return [
               '<a class="like" href="javascript:void(0)" title="Like">',
                   '<i class="glyphicon glyphicon-heart"></i>',
               '</a>',
               ' <a class="edit ml10" href="javascript:void(0)" title="Edit">',
                   '<i class="glyphicon glyphicon-edit"></i>',
               '</a>',
               ' <a class="remove ml10" href="javascript:void(0)" title="Remove">',
                   '<i class="glyphicon glyphicon-remove"></i>',
               '</a>'
           ].join('');
       }

       window.operateEvents = {
           'click .like': function (e, value, row, index) {
               alert('You click like icon, row: ' + JSON.stringify(row));
               console.log(value, row, index);
           },
           'click .edit': function (e, value, row, index) {
               alert('You click edit icon, row: ' + JSON.stringify(row));
               console.log(value, row, index);
           },
           'click .remove': function (e, value, row, index) {
               alert('You click remove icon, row: ' + JSON.stringify(row));
               console.log(value, row, index);
           }
       };

   </script>
}

项目代码查看地址: http://mvcbootstraptable.codeplex.com/

另: MVC中对Bootstrap的封装: http://mvc4bootstaphelper.codeplex.com/ (感觉一般用不到)