首页 > 代码库 > KnocKout 绑定数据

KnocKout 绑定数据

2024-08-28 07:33:36   226人阅读

技术分享

Controller 里面的方法：

 1 public ActionResult Index()
 2         {
 3            
 4             return View();
 5         }
 6         [HttpPost]
 7         public JsonResult Reader()
 8         {
 9             var list = from a in db.employee
10                 select new
11                 {
12                     Id=a.e_id,
13                     No=a.e_no,
14                     Name=a.e_name,
15                     Dname=a.department.d_name,
16                     Desc=a.e_desc,
17                     Question=a.e_question,
18                     Anawser=a.e_answer,
19                     Qx=a.e_qx,
20                     Up=a.e_up
21 
22                 };
23             return Json(list, JsonRequestBehavior.AllowGet);
24         }
25 
26         //删除
27         [HttpPost]
28         public JsonResult Del(int id)
29         {
30             var emp= db.employee.ToList().Find(a => a.e_id == id);
31             db.employee.Remove(emp);
32             db.SaveChanges();
33             return Json(new {type = "success"});
34         }

html页面：

  1 @using Knockout.Models
  2 @{
  3     Layout = null;
  4 }
  5 
  6 <!DOCTYPE html>
  7 
  8 <html>
  9 <head>
 10     <meta name="viewport" content="width=device-width" />
 11     <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 12     <script src="~/Scripts/knockout-2.2.0.debug.js"></script>
 13     <title>Index</title>
 14     <script type="text/javascript">
 15         var data;
 16         $(function() {
 17             $.ajax({
 18                 url: "/Kn/Reader",
 19                 type: "post",
 20                 async: false,
 21                 success: function (msg) {
 22                     $.each(msg, function(x, y) {
 23                         if (y.Qx == 3) {
 24                             y.Qx = "最高权限";
 25                         }else if (y.Qx == 1) {
 26                             y.Qx = "一般权限";
 27                         } else {
 28                             y.Qx = "没有权限";
 29                         }
 30                         if (y.Up == 1) {
 31                             y.Up = "已修改";
 32                         } else {
 33                             y.Up = "未修改";
 34                         }
 35                     });
 36                     data = msg;
 37                 }
 38             });
 39         });
 40        
 41 
 42         function ViewModel() {
 43             var self = this;
 44             self.employees = ko.observableArray(data);
 45             //删除
 46             self.remove= function(emp) {
 47                 $.ajax({
 48                     url: "/Kn/Del/" + emp.Id,
 49                     type: "post",
 50                     dataType: "json",
 51                     success:function(json) {
 52                         self.employees.remove(emp);
 53                     }
 54                 });
 55             }
 56             //编辑
 57             self.edit = function (emp) {
 58                 window.location.href = ‘/Kn/edit/‘ + emp.Id;
 59             };
 60         }
 61        
 62 
 63 
 64 
 65         $(function () {
 66 
 67             var vm = new ViewModel();
 68             ko.applyBindings(vm);
 69             $("a:contains(‘删除‘)").click(function() {
 70                 if (confirm("是否确定要删除？")) {
 71                     return true;
 72                 } else {
 73                     return false;
 74                 }
 75             });
 76         });
 77 
 78     </script>
 79 </head>
 80 <body>
 81     <table width="760px" border="1px" cellpadding="0" cellspacing="0">
 82         <tr>
 83             <th>编号</th>
 84             <th>姓名</th>
 85             <th>部门名称</th>
 86             <th>职称</th>
 87             <th>问题</th>
 88             <th>答案</th>
 89             <th>权限</th>
 90             <th>是否修改过密码</th>
 91             <th>操作</th>
 92         </tr>
 93         <tbody data-bind="foreach: employees">
 94             <tr>
 95                 <td data-bind="text:No"></td>
 96                 <td data-bind="text:Name"></td>
 97                 <td data-bind="text:Dname"></td>
 98                 <td data-bind="text:Desc"></td>
 99                 <td data-bind="text:Question"></td>
100                 <td data-bind="text:Anawser"></td>
101                 <td data-bind="text:Qx"></td> 
102                 <td data-bind="text:Up"></td>
103                 <td><a href="javascript:" data-bind="click:$root.remove">删除</a>
104                     <a href="javascript:" data-bind="click:$root.edit">修改</a>
105                 </td>
106             </tr>
107         </tbody>
108     </table>
109 </body>
110 </html>

 

KnocKout 绑定数据


联系
我们