正文
BootStrap--Tables（表格） MVC中不刷新做增，删，改（C#）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
自带的Tables会有自动分页，搜索等一些动能，很方便，唯一的不足就是添加，修改，删除数据需要刷新页面，并不能静态。
下面说的是如何不刷新页面（Ajax）去执行增，删，改操作。
需要用到的样式，JS库（需要自己去复制到自己的项目中）
@*bootstrap 样式*@
<link href="~/Content/css/bootstrap.css" rel="stylesheet" />
@*datatable 样式*@
<link rel="stylesheet" type="text/css" href="/Content/media/css/jquery.dataTables.css"> @*jquery*@
<script type="text/javascript" charset="utf8" src="/Content/media/js/jquery.js"></script> @*DataTables*@
<script type="text/javascript" charset="utf8" src="/Content/media/js/jquery.dataTables.js"></script>
@*bootstrap*@
<script src="~/Content/js/bootstrap.js"></script>
前台：
<input type="button" id="btn" value="Add Data" /> @*datatables表格结构*@
<table id="example" class="display" cellspacing="" width="100%">
<thead>（头部）
<tr>
<th>id</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>修改</th>
</tr>
</thead>
<tbody>（内容）
这里就是呈现数据的位子
</tbody>
<tfoot>（脚部）
<tr>
<th>id</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>修改</th>
</tr>
</tfoot>
</table> @*模态框开始*@ （添加的模态框--这里演示的是固定的） 可以把添加的用布局页封装，在动态加载到模态框中 做修改一样的，这里只演示添加
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">
@*属性a*@
<div class="control-group success">
<label class="control-label" for="a">A</label>
<div class="controls">
<input type="text" id="a" name="a">
<span class="help-inline">属性a！！！</span>
</div>
</div>
@*属性b*@
<div class="control-group success">
<label class="control-label" for="b">B</label>
<div class="controls">
<input type="text" id="b" name="b">
<span class="help-inline">属性b！！！</span>
</div>
</div>
@*属性c*@
<div class="control-group success">
<label class="control-label" for="c">C</label>
<div class="controls">
<input type="text" id="c" name="c">
<span class="help-inline">属性c！！！</span>
</div>
@*属性d*@
<div class="control-group success">
<label class="control-label" for="d">D</label>
<div class="controls">
<input type="text" id="d" name="d">
<span class="help-inline">属性d！！！</span>
</div>
</div> </div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="commit">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
@*模态框结束*@
前台JS代码：
<script>
$(function () {
//初始化 加载Tbales中的数据
$(document).ready(function () {
$('#example').DataTable({
"ajax": "@Url.Action("data")", //动态加载数据（注意json格式）
"processing": true,
"columnDefs": [{ //添加一列
"targets": 5, //目标列 （这里第6列），一般是显示操作列
"data": null, //固定为Null
"defaultContent": "<button id='editrow' type='button'></button>" //这列里面的内容，一个修改的按钮
}); //模态框
$("#btn").click(function () {
$("#myModal").modal('show');
});
//提交
$("#commit").click(function () {
//参数对象
var p = {
a: $("#a").val(),
b: $("#b").val(),
c: $("#c").val(),
d: $("#d").val()
}
//注意：这里使用的是自动装配，表中的字段就是a,b,c,d。 只要把你表中的字段赋值就行，这里没有表单提交，所以用Js代码赋值，赋值了，P对象就有值了
$.get("@Url.Action("Insert")", p, function (data) {
//回调隐藏
$("#myModal").modal('hide'); var t = $('#example').DataTable();
//第一种
//手动添加行 其实是做了两步，这个是全部都不刷新，做的一个假像
//1，在后台已经把数据加载到数据库中了
//2，手动改表格中的数据，这行数据并不是数据库中的数据，恰巧这行数据跟数据库中的数据一模一样，给人一种假象，数据添加成功
t.row.add([
data, //返回编号
p.a,
p.b,
p.c,
p.d
]).draw(false);
//第二种
//或者，刷新表格
$("#example").DataTable().ajax.reload();//重新加载表格，只刷新表格，不刷新页面
//两种方法取一种即可 修改，删除都是差不多的
});
}); });
});
</script>
后台代码：
DataClasses1DataContext dcdc = new DataClasses1DataContext(); //EF关系，连接数据库，对数据进行操作，一个LinQ to SQL类
//
// GET: /Demo/ public ActionResult Index()
{
return View();
} //初始化数据 表格里面的内容需要这个方法来加载
public ActionResult Data()
{
List<string[]> list = new List<string[]>(); //一个字符串数组集合，一个数组代表一行数据，相当于表中的一行数据，集合可以保存这张表中所有的数据
foreach (var item in dcdc.Table) //循环这张表，用来存数据
{ //需要显示的字段全部存到数组中，可以多张表，这里只加载一张表 string[] a = new[] { item.Id.ToString(), item.a, item.b, item.c, item.d };
list.Add(a);
}
var data = new { data = list }; //转成Json格式
//datatable要求的数据格式
return Json(data, JsonRequestBehavior.AllowGet);
}
//添加一条记录
public ActionResult Insert(Table t)
{
//添加
dcdc.Table.InsertOnSubmit(t);
dcdc.SubmitChanges();
//返回编号
var id = dcdc.Table.Max(x => x.Id);
return Content(id.ToString()); //返刷新表格的话，返回的数据随意
}
}
值得一提，MVC中添加，修改都是两个一样的方法名，只是参数不一样
在一个方法的头部有 [xxx]，就是声明这个方法是什么，Get，Post,过滤器都是在头部声明的
添加:
[HttpGet] //声明Get访问 用来做显示
public ActionResult AddProImg()
{
return View();
}
[HttpPost] //声明Post访问 用来对数据库执行操作
public ActionResult AddProImg(ProductImg img)
{
img.CreateTime = DateTime.Now;
sc.ProductImg.InsertOnSubmit(img);
sc.SubmitChanges();
return Content("Success");
}
修改：
[HttpGet] //显示数据
public ActionResult EditProImg(int? id)
{
ViewData.Model = sc.ProductImg.Where(x => x.ImgID == id.Value).First();
ViewBag.product = sc.ProductProperty.AsEnumerable();
return View();
}
[HttpPost] //对数据库进行操作
public ActionResult EditProImg(ProductImg img)
{
var result = sc.ProductImg.Where(x => x.ImgID == img.ImgID).First();
result.Description = img.Description;
result.ProperID = img.ProperID;
result.ImgName = img.ImgName;
sc.SubmitChanges();
return Content("修改成功");
}
