Controller 里面的方法：

 public ActionResult Index()

         {

             return View();

         }

         [HttpPost]

         public JsonResult Reader()

         {

             var list = from a in db.employee

                 select new

                 {

                     Id=a.e_id,

                     No=a.e_no,

                     Name=a.e_name,

                     Dname=a.department.d_name,

                     Desc=a.e_desc,

                     Question=a.e_question,

                     Anawser=a.e_answer,

                     Qx=a.e_qx,

                     Up=a.e_up

                 };

             return Json(list, JsonRequestBehavior.AllowGet);

         }

         //删除

         [HttpPost]

         public JsonResult Del(int id)

         {

             var emp= db.employee.ToList().Find(a => a.e_id == id);

             db.employee.Remove(emp);

             db.SaveChanges();

             return Json(new {type = "success"});

         }

html页面：

 @using Knockout.Models

 @{

     Layout = null;

 }

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.8.2.min.js"></script>

     <script src="~/Scripts/knockout-2.2.0.debug.js"></script>

     <title>Index</title>

     <script type="text/javascript">

         var data;

         $(function() {

             $.ajax({

                 url: "/Kn/Reader",

                 type: "post",

                 async: false,

                 success: function (msg) {

                     $.each(msg, function(x, y) {

                         if (y.Qx == 3) {

                             y.Qx = "最高权限";

                         }else if (y.Qx == 1) {

                             y.Qx = "一般权限";

                         } else {

                             y.Qx = "没有权限";

                         }

                         if (y.Up == 1) {

                             y.Up = "已修改";

                         } else {

                             y.Up = "未修改";

                         }

                     });

                     data = msg;

                 }

             });

         });

         function ViewModel() {

             var self = this;

             self.employees = ko.observableArray(data);

             //删除

             self.remove= function(emp) {

                 $.ajax({

                     url: "/Kn/Del/" + emp.Id,

                     type: "post",

                     dataType: "json",

                     success:function(json) {

                         self.employees.remove(emp);

                     }

                 });

             }

             //编辑

             self.edit = function (emp) {

                 window.location.href = '/Kn/edit/' + emp.Id;

             };

         }

         $(function () {

             var vm = new ViewModel();

             ko.applyBindings(vm);

             $("a:contains('删除')").click(function() {

                 if (confirm("是否确定要删除？")) {

                     return true;

                 } else {

                     return false;

                 }

             });

         });

     </script>

 </head>

 <body>

     <table width="760px" border="1px" cellpadding="0" cellspacing="0">

         <tr>

             <th>编号</th>

             <th>姓名</th>

             <th>部门名称</th>

             <th>职称</th>

             <th>问题</th>

             <th>答案</th>

             <th>权限</th>

             <th>是否修改过密码</th>

             <th>操作</th>

         </tr>

         <tbody data-bind="foreach: employees">

             <tr>

                 <td data-bind="text:No"></td>

                 <td data-bind="text:Name"></td>

                 <td data-bind="text:Dname"></td>

                 <td data-bind="text:Desc"></td>

                 <td data-bind="text:Question"></td>

                 <td data-bind="text:Anawser"></td>

                 <td data-bind="text:Qx"></td>

                 <td data-bind="text:Up"></td>

                 <td><a href="javascript:" data-bind="click:$root.remove">删除</a>

                     <a href="javascript:" data-bind="click:$root.edit">修改</a>

                 </td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

KnocKout 绑定数据的更多相关文章

  1. knockoutjs中使用mapping插件绑定数据列表

    使用KO绑定数据列表示例:   1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping    2.先使用ko.mapping.fromJS()将原来的 ...

  2. Knockout.js 数据验证之插件版和无插件版

    本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你 ...

  3. Android之ListView性能优化——一行代码绑定数据——万能适配器

    如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...

  4. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  5. 【WPF】绑定数据

    WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)

  6. 关于angularJS绑定数据时自动转义html标签

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  7. csharp: 用Enterprise Library对象实体绑定数据

    Enterprise Library: https://msdn.microsoft.com/en-us/library/ff648951.aspx /// <summary> /// 是 ...

  8. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  9. WebDataTree 使用XML做数据源绑定数据

    英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...

随机推荐

  1. sql server中将一个字段根据某个字符拆分成多个字段显示

    sql server 数据库中某张表(Person)的数据信息是: ID Address 1 平山花园-4单元-12幢-203 2 香山花园-3单元-22幢-304 现在有需求是,将地址信息显示形式改 ...

  2. mac下wifi无法连接的问题

    今天遇到了一个Wi-Fi打死连不上的问题,关闭重启电脑路由器都试了一下还是不行,最后把资源库/偏好设置/SystemConfiguration下的文件都删除,有一个是删不掉的,留着不影响,然后重启,O ...

  3. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds -----》myeclipse2015

    错误:Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds 错误提示就是我们限定了部署的时间导致的错 ...

  4. sqlserver2000 数据库 'tempdb' 的日志已满

    方法一解决过程: 查看了下数据库的属性,是自动增长,不指定文件大小上限.在网上Google了很久,试了些方法都不行:数据库所在磁盘还有很大的可用空间,试着下重药了.直接把tempdb的数据文件和日志文 ...

  5. js生成带参的二维码

    最近项目中有需求生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实 引入js: require.config({ baseUrl : ...

  6. 【MongoDB】4.MongoDB 原子修改器的 极速修改

    文档转自:http://blog.csdn.net/mcpang/article/details/7752736 对于文档的更新除替换外,针对某个或多个文档只需要部分更新可使用原子的更新修改器,能够高 ...

  7. a 标签 启用或禁用点击事件

    <a href="#" id="btnAuthCode" class="authCode_btn">获取验证码</a> ...

  8. Mysql 5.7 使用SSL安全连接

    MySQL默认的数据通道是不加密的,在一些安全性要求特别高的场景下,我们需要配置MySQL端口为SSL,使得数据通道加密处理,避免敏感信息泄漏和被篡改.当然,启用MySQL SSL之后,由于每个数据包 ...

  9. javascript面向对象(一)：封装

    本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...

  10. Java 对象拷贝方式

    (1)BeanUtils.cloneBean()使用: http://www.cnblogs.com/fervour/archive/2009/12/18/1627868.html package c ...