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 = "", Name = "Item 1", Price = "$1" },
new Product { ID = "", Name = "Item 2", Price = "$1" },
new Product { ID = "", Name = "Item 3", Price = "$1" },
new Product { ID = "", Name = "Item 4", Price = "$4" },
new Product { ID = "", Name = "Item 5", Price = "$5" },
new Product { ID = "", Name = "Item 6", Price = "$6" },
new Product { ID = "", Name = "Item 7", Price = "$7" },
new Product { ID = "", Name = "Item 8", Price = "$8" },
new Product { ID = "", Name = "Item 9", Price = "$9" },
new Product { ID = "", Name = "Item 10", Price = "$10" },
new Product { ID = "", Name = "Item 11", Price = "$11" },
new Product { ID = "", Name = "Item 12", Price = "$12" },
new Product { ID = "", Name = "Item 13", Price = "$13" },
new Product { ID = "", Name = "Item 14", Price = "$14" },
new Product { ID = "", Name = "Item 15", Price = "$15" },
new Product { ID = "", Name = "Item 16", Price = "$16" },
new Product { ID = "", Name = "Item 17", Price = "$17" },
new Product { ID = "", Name = "Item 18", Price = "$18" },
new Product { ID = "", Name = "Item 19", Price = "$19" },
new Product { ID = "", Name = "Item 20", Price = "$20" },
new Product { ID = "", Name = "Item 21", Price = "$21" },
new Product { ID = "", Name = "Item 22", Price = "$22" },
new Product { ID = "", Name = "Item 23", Price = "$23" },
new Product { ID = "", Name = "Item 24", Price = "$24" },
new Product { ID = "", Name = "Item 25", Price = "$25" },
new Product { ID = "", Name = "Item 26", Price = "$26" },
new Product { ID = "", Name = "Item 27", Price = "$27" },
new Product { ID = "", Name = "Item 28", Price = "$28" },
new Product { ID = "", Name = "Item 29", Price = "$29" },
new Product { ID = "", 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: ,
striped: true,
pagination: true,
pageSize: ,
pageList: [, , , , ],
search: true,
showColumns: true,
showRefresh: true,
minimumCountColumns: ,
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/ (感觉一般用不到)