KnocKout 绑定数据
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 绑定数据的更多相关文章
- knockoutjs中使用mapping插件绑定数据列表
使用KO绑定数据列表示例: 1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping 2.先使用ko.mapping.fromJS()将原来的 ...
- Knockout.js 数据验证之插件版和无插件版
本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你 ...
- Android之ListView性能优化——一行代码绑定数据——万能适配器
如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- 【WPF】绑定数据
WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- csharp: 用Enterprise Library对象实体绑定数据
Enterprise Library: https://msdn.microsoft.com/en-us/library/ff648951.aspx /// <summary> /// 是 ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- WebDataTree 使用XML做数据源绑定数据
英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...
随机推荐
- MAC OS terminal 快捷键记录
Command + K 清屏 Command + T 新建标签 Command +W 关闭当前标签页 Command + S 保存终端输出 Command + D 垂直分隔当前标签页 Comma ...
- sql server 语句使用规范
Sql语句使用规范 规范内容以及注意事项: 1.查询时候使用top 10 /top 100 和where 字句控制每次执行SQL 返回的结果集合,在满足业务需求的同时返回最小的结果. 2.使用数据投影 ...
- C之按位运算符
http://www.cnblogs.com/Kazaf/archive/2012/03/19/2406006.html
- response.sendRedirect()与request.getRequestDispatcher().forward()区别
Servlet中response.sendRedirect()与request.getRequestDispatcher().forward(request,response)这两个对象都可以使页面跳 ...
- 什么是shell
Shell本身是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释和执行用户输入的命令:作为程序设计语言,它定义了各种 ...
- table居中
- -bcenter标签已经被淘汰了让一个容器水平居中,可以使用css控制 body { text-align:center; } table { margin:0px auto; }
- requirejs(一)
RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可以按需.并行.延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂. 在h ...
- 黑科技装点圣诞节，美国邮政局用AR APP邮寄圣诞包裹
AR手游<精灵宝可梦Go>的出现将增强现实技术带到了众人的视线中,各大公司纷纷紧抓AR的发展前景,同时积极将AR功能引入自家产品中.临近圣诞,又到了一年一度的快递高峰期,据591ARVR资 ...
- dbflow 批量 增删查改
@ModelContainer @Table(database = DemoDatabase.class) class Person extends BaseModel implements Seri ...
- Ext3文件系统mount选项和文件属性介绍
mount选项 设置方式 ext3 mount选项可以通过多个方式进行设置:1)内核编译时: 内核menuconfig通过CONFIG_EXT3_DEFAULTS_TO_ORDERED编译控制选项,来 ...