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 ...
随机推荐
- js对文本框特殊字符串过滤
HTML 中 onkeyup="stripscript(this)"; function stripscript(obj) { var s = $(obj).val(); var ...
- 仿qq联系人 学习笔记---ExpandableListActivity的使用
[转]原地址 http://blog.163.com/xygzx@126/blog/static/237809502011102010100331/ 效果显示图: 1.布局文件 main.xml(E ...
- XCode 中的代码块导出与导入
目标文件放置位置 ~/Library/Developer/Xcode/UserData/CodeSnippets CodeSnippets 这整个文件夹都是 直接搬移整个文件夹 操作方法: 解压缩并复 ...
- 以前用SQL实现的机构职能树，再看看
DECLARE CNT NUMBER; TMP ); vtmp ); ltmp1 ); ltmp2 ); ltmp3 ); ltmp4 ); NTMP NUMBER; CURSOR CSR_TEST ...
- POJ1288 Sly Number(高斯消元 dfs枚举)
由于解集只为{0, 1, 2}故消元后需dfs枚举求解 #include<cstdio> #include<iostream> #include<cstdlib> ...
- WPF中Ribbon控件的使用
这篇博客将分享如何在WPF程序中使用Ribbon控件.Ribbon可以很大的提高软件的便捷性. 上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可 ...
- 彻底解决m2eclipse之Unable to update index for central
原文链接:https://my.oschina.net/itblog/blog/208581 maven是个好东西,eclipse上的maven插件m2eclipse也非常方便,但是最近这个东西经常无 ...
- HDU 4605 Magic Ball Game （dfs+离线树状数组）
题意:给你一颗有根树,它的孩子要么只有两个,要么没有,且每个点都有一个权值w. 接着给你一个权值为x的球,它从更节点开始向下掉,有三种情况 x=w[now]:停在此点 x<w[now]:当有孩子 ...
- OpenFOAM 学习路线 【转载】
"Two weeks of playing with a CFD code will save you one afternoon of reading" 什么是OpenFOAM( ...
- JavaScript闭包深入解析
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...