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">&times;</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("修改成功");
        }