原文地址:http://www.cnblogs.com/flykai/p/3361064.html

前言

  konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作。Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。其作用简单来说就是声明所需的数据作为一个JavaScript 模型对象(model object),然后将DOM 元素或者模板(templates)绑定到它上面。

创建mvc4+webapi+konckout.js的简单应用程序

1、首先准备一个测试的数据库,我这以我随便创建的一个数据库为例

表结构如下图:

2、创建一个mvc程序,并在项目中添加一个以上表的ado.net实体数据模型

添加完成以后:

3、添加添加一个带读写操作的EmployeeApiController webapi控制器和用来实现增删改查的普通控制器EmployeeController

添加是注意选择是带读写操作的webapi控制器,选择好数据模型及数据库上下文,方面vs自动为我们生成读写操作。

添加完成后自动生成的完整代码:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using Knockout.Models; namespace Knockout.Controllers
{
public class EmployeeApiController : ApiController
{
private DemoDBEntities db = new DemoDBEntities(); // GET api/EmployeeApi
public IEnumerable<Employees> GetEmployees()
{
return db.Employees.AsEnumerable();
} // GET api/EmployeeApi/5
public Employees GetEmployees(int id)
{
Employees employees = db.Employees.Find(id);
if (employees == null)
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
} return employees;
} // PUT api/EmployeeApi/5
public HttpResponseMessage PutEmployees(int id, Employees employees)
{
if (ModelState.IsValid && id == employees.EmployeeID)
{
db.Entry(employees).State = EntityState.Modified; try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
} return Request.CreateResponse(HttpStatusCode.OK);
}
else
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
} // POST api/EmployeeApi
public HttpResponseMessage PostEmployees(Employees employees)
{
if (ModelState.IsValid)
{
db.Employees.Add(employees);
db.SaveChanges(); HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, employees);
response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = employees.EmployeeID }));
return response;
}
else
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
} // DELETE api/EmployeeApi/5
public HttpResponseMessage DeleteEmployees(int id)
{
Employees employees = db.Employees.Find(id);
if (employees == null)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
} db.Employees.Remove(employees); try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
} return Request.CreateResponse(HttpStatusCode.OK, employees);
} protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}

在添加一个普通的控制器EmployeeController,并在里面添加如下方法:

public ActionResult Create()
{
return View("Create");
}

添加视图Create.cshtml:

首先在视图中添加对ko的引用,mapping.js是用来实现绑定viewmodel的第三方插件:

<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>

在body节点下添加一个form表单如下代码:

<form>
<table>
<tr>
<td>
<!--将textbox监控属性的值与ViewModel绑定 -->
<table id="tbldml">
<tr>
<td>编号</td>
<td>
<input type="text" id="txteno" data-bind="value: $root.EmployeeID" disabled="disabled" /></td>
</tr>
<tr>
<td>名称</td>
<td>
<input type="text" id="txtename" data-bind="value: $root.EmployeeName" /></td>
</tr>
<tr>
<td>薪资</td>
<td>
<input type="text" id="txtsal" data-bind="value: $root.Salary" /></td>
</tr>
<tr>
<td>部门</td>
<td>
<input type="text" id="txtdname" data-bind="value: $root.DeptName" /></td>
</tr>
<tr>
<td>籍贯</td>
<td>
<input type="text" id="txtdesig" data-bind="value: $root.Address" /></td>
</tr>
<tr>
<!--ko控制的保存和修改按钮-->
<td>
<button data-bind="click :$root.save">保存</button></td>
<td>
<button data-bind="click: $root.update">修改</button></td>
</tr>
</table>
</td>
<td>
<div class="FixedContainer">
<!--控制有数据的时候显示表格-->
<table data-bind="visible: Employees().length>0">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>薪资</td>
<td>部门</td>
<td>籍贯</td>
<td></td>
</tr>
</thead>
<!--遍历所有数据->
<tbody data-bind="foreach: Employees">
<tr style="border: solid" data-bind="click: $root.getselectedemployee" id="updtr">
<td><span data-bind="text: EmployeeID"></span></td>
<td><span data-bind="text: EmployeeName"></span></td>
<td><span data-bind="text: Salary"></span></td>
<td><span data-bind="text: DeptName"></span></td>
<td><span data-bind="text: Address"></span></td>
<td>
<button data-bind="click: $root.deleterec">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table> </form>

4、页面改造好以后,编写Ko需要的js来实现增删改查

在页面添加scripts占位节点添加如下脚本:

@section scripts{
<script type="text/javascript">
var EmpViewModel = function () {
var self = this; self.EmployeeID = ko.observable("0");
self.EmployeeName = ko.observable("");
self.Salary = ko.observable("");
self.DeptName = ko.observable("");
self.Address = ko.observable(""); var EmpData = {
EmployeeID: self.EmployeeID,
EmployeeName: self.EmployeeName,
Salary: self.Salary,
DeptName: self.DeptName,
Address: self.Address
}; //生命一个ObservableArray来存储返回的所有数据
self.Employees = ko.observableArray([]); GetEmployees(); //通过ajax请求返回所有数据
//保存数据
self.save = function () {
//Ajax 提交到webapi保存数据
alert(11);
$.ajax({
type: "POST",
url: "/api/EmployeeApi",
data: ko.toJSON(EmpData),
contentType: "application/json",
success: function (data) {
alert("记录保存成功");
self.EmployeeID(data.EmployeeID);
alert("新数据Id :" + self.EmployeeID());
GetEmployees();
},
error: function () {
alert("提交失败");
}
});
}; self.update = function () {
var url = "/api/EmployeeApi/" + self.EmployeeID();
alert(url);
$.ajax({
type: "PUT",
url: url,
data: ko.toJSON(EmpData),
contentType: "application/json",
success: function (data) {
alert("修改成功");
GetEmployees();
},
error: function (error) {
alert(error.status + "<!----!>" + error.statusText);
}
});
}; //删除操作
self.deleterec = function (employee) {
$.ajax({
type: "DELETE",
url: "/api/EmployeeApi/" + employee.EmployeeID,
success: function (data) {
alert("Record Deleted Successfully");
GetEmployees();//Refresh the Table
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}; //获取所有Employee
function GetEmployees() {
//Ajax 获取所有Employee记录
$.ajax({
type: "GET",
url: "/api/EmployeeApi",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
self.Employees(data);
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}
//点击右侧列表某一行左侧编辑赋值
self.getselectedemployee = function (employee) {
self.EmployeeID(employee.EmployeeID),
self.EmployeeName(employee.EmployeeName),
self.Salary(employee.Salary),
self.DeptName(employee.DeptName),
self.Address(employee.Address)
}; };
//激活knockout
ko.applyBindings(new EmpViewModel());
</script> }

代码中有比较详细的注释,其中实现的增删查改的操作是通过ajax异步调用webapi来实现的,刷新及数据绑定是通过ko来实现的。

5、运行程序得到如下效果:

新增记录的时候id默认为0,表单数据为空,点击保存实现无刷新保存,右侧若无数据表格则隐藏,若有数据表格显示数据列表。

点击某一行数据,左侧表单显示该行数据信息,并可以修改信息

点击删除实现无刷新删除数据记录。

(转)初试konckout+webapi简单实现增删改查的更多相关文章

  1. 初试KONCKOUT+WEBAPI简单实现增删改查

    初试KONCKOUT+WEBAPI简单实现增删改查 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作.Kn ...

  2. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  3. salesforce 零基础学习(五十一)使用 Salesforce.com SOAP API 实现用户登录以及简单的增删改查(JAVA访问salesforce)

    此篇请参看:https://resources.docs.salesforce.com/202/latest/en-us/sfdc/pdf/salesforce_developer_environme ...

  4. MyBatis学习--简单的增删改查

    jdbc程序 在学习MyBatis的时候先简单了解下JDBC编程的方式,我们以一个简单的查询为例,使用JDBC编程,如下: Public static void main(String[] args) ...

  5. 通过JDBC进行简单的增删改查

    通过JDBC进行简单的增删改查(以MySQL为例) 目录 前言:什么是JDBC 一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JDBC基本操 ...

  6. MyBatis简单的增删改查以及简单的分页查询实现

    MyBatis简单的增删改查以及简单的分页查询实现 <? xml version="1.0" encoding="UTF-8"? > <!DO ...

  7. SpringMVC之简单的增删改查示例(SSM整合)

    本篇文章主要介绍了SpringMVC之简单的增删改查示例(SSM整合),这个例子是基于SpringMVC+Spring+Mybatis实现的.有兴趣的可以了解一下. 虽然已经在做关于SpringMVC ...

  8. python3.6 使用 pymysql 连接 Mysql 数据库及 简单的增删改查操作

    1.通过 pip 安装 pymysql 进入 cmd  输入  pip install pymysql   回车等待安装完成: 安装完成后出现如图相关信息,表示安装成功. 2.测试连接 import ...

  9. 通过flask实现web页面简单的增删改查bootstrap美化版

    通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...

随机推荐

  1. art-template前端高性能模板

    template.js资源 /*!art-template - Template Engine | http://aui.github.com/artTemplate/*/!function(){fu ...

  2. 自定义标签2.x

    2.x只需要继承SimpleTagSupport 1.x 输出流  JspWriter out = pageContext.getOut(); 2.x 输出流  JspWriter out = get ...

  3. Use the dkms from EPEL when install CUDA Toolkits on CentOS

    ###Use the dkms from EPEL. yum install epel-release yum install dkms # download the rpm from the NVi ...

  4. java代码getHostAddress .getHostName()的练习

    总结:主机名,ip地址是可以实现的,关键是要掌握 package com.aa; import java.io.IOException; import java.net.*; public class ...

  5. 1100 Mars Numbers

    题意:进制转换. 思路:注意当数字是13的倍数时,只需高位叫法的单词.比如26,是“hel”,而不是“hel tret”.我被坑在这里了!对应语句1的处理.另外,在输入n和n个字符串之间需要一个吸收字 ...

  6. 迭代器-迭代对象-dir(a)可以查看该数据类型有多少种方法。range(10)在py3里就是一个迭代器,for循环实际就是迭代器的应用

    迭代器 我们已经知道,可以直接作用于for循环的数据烈性有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str,bytes等: 一类是generator,数据结构,包括生成 ...

  7. bootstrap-datetimepicker如何只显示到日期

    bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢? minView: "month", //选择日期后,不会再跳转去选择时分秒 1 ...

  8. Py修行路 内置模块补充 datetime模块

      Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.datetime模块用于是date和time模块的合集,他内部重新封装了time模块,相比于time ...

  9. pcs与crmsh命令比较

    一.概念 1.crmsh This project is not part of the GNU Project. Pacemaker command line interface for manag ...

  10. HTML篇

    要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) ...