首页 > 代码库 > BootStrap--Tables(表格) MVC中不刷新做增,删,改(C#)

BootStrap--Tables(表格) MVC中不刷新做增,删,改(C#)

 自带的Tables会有自动分页,搜索等一些动能,很方便,唯一的不足就是添加,修改,删除数据需要刷新页面,并不能静态。

下面说的是如何不刷新页面(Ajax)去执行增,删,改操作。

需要用到的样式,JS库(需要自己去复制到自己的项目中)

   @*bootstrap 样式*@
    <link href=http://www.mamicode.com/"~/Content/css/bootstrap.css" rel="stylesheet" />
    @*datatable 样式*@
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"/Content/media/css/jquery.dataTables.css">

    @*jquery*@
    <script type="text/javascript" charset="utf8" src=http://www.mamicode.com/"/Content/media/js/jquery.js"></script>

    @*DataTables*@
    <script type="text/javascript" charset="utf8" src=http://www.mamicode.com/"/Content/media/js/jquery.dataTables.js"></script>
    @*bootstrap*@
    <script src=http://www.mamicode.com/"~/Content/js/bootstrap.js"></script>

前台:

<input type="button" id="btn" value=http://www.mamicode.com/"Add Data" />

@*datatables表格结构*@
<table id="example" class="display" cellspacing="0" 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 = http://www.mamicode.com/new { data =http://www.mamicode.com/ 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("修改成功");
        }

 

BootStrap--Tables(表格) MVC中不刷新做增,删,改(C#)