代码演示用 KnockoutJS 和 Web API 对一个表格(Gird)进行 CRUD 操作,在 MVC 5 下
实体类:
using System;
using System.Collections.Generic; public partial class EmployeeInfo
{
public int EmpNo { get; set; }
public string EmpName { get; set; }
public string DeptName { get; set; }
public string Designation { get; set; }
public decimal Salary { get; set; }
}
控制器:
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.Http;
using System.Web.Http.Description;
using MVC5_Editable_Table.Models; namespace MVC5_Editable_Table.Controllers
{
public class EmployeeInfoAPIController : ApiController
{
private ApplicationEntities db = new ApplicationEntities(); // GET api/EmployeeInfoAPI
public IQueryable<EmployeeInfo> GetEmployeeInfoes()
{
return db.EmployeeInfoes;
} // GET api/EmployeeInfoAPI/5
[ResponseType(typeof(EmployeeInfo))]
public IHttpActionResult GetEmployeeInfo(int id)
{
EmployeeInfo employeeinfo = db.EmployeeInfoes.Find(id);
if (employeeinfo == null)
{
return NotFound();
} return Ok(employeeinfo);
} // PUT api/EmployeeInfoAPI/5
public IHttpActionResult PutEmployeeInfo(int id, EmployeeInfo employeeinfo)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
} if (id != employeeinfo.EmpNo)
{
return BadRequest();
} db.Entry(employeeinfo).State = EntityState.Modified; try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!EmployeeInfoExists(id))
{
return NotFound();
}
else
{
throw;
}
} return StatusCode(HttpStatusCode.NoContent);
} // POST api/EmployeeInfoAPI
[ResponseType(typeof(EmployeeInfo))]
public IHttpActionResult PostEmployeeInfo(EmployeeInfo employeeinfo)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
} db.EmployeeInfoes.Add(employeeinfo);
db.SaveChanges(); return CreatedAtRoute("DefaultApi", new { id = employeeinfo.EmpNo }, employeeinfo);
} // DELETE api/EmployeeInfoAPI/5
[ResponseType(typeof(EmployeeInfo))]
public IHttpActionResult DeleteEmployeeInfo(int id)
{
EmployeeInfo employeeinfo = db.EmployeeInfoes.Find(id);
if (employeeinfo == null)
{
return NotFound();
} db.EmployeeInfoes.Remove(employeeinfo);
db.SaveChanges(); return Ok(employeeinfo);
} protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
} private bool EmployeeInfoExists(int id)
{
return db.EmployeeInfoes.Count(e => e.EmpNo == id) > ;
}
}
}
视图:
@{
ViewBag.Title = "Index";
} <h2>CRUD Operationson HTML Table using HTML Templates</h2> <style type="text/css">
table {
width: 700px;
border: double;
} th {
width: 100px;
} td {
border: double;
width: 100px;
} input {
width: 100px;
}
</style>
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/knockout-3.1.0.js"></script> <input type="button" value="Add New Record" data-bind="click: function () { EmpViewModel.addnewRecord(); }" />
<table>
<thead>
<tr>
<th>
EmpNo
</th>
<th>
EmpName
</th>
<th>
DeptName
</th>
<th>
Desigation
</th>
<th>
Salary
</th>
<th>
</th>
<th>
</th>
</tr>
</thead>
<tbody data-bind="template: { name: currentTemplate, foreach: Employees }"></tbody>
</table> <script type="text/html" id="readonlyTemplate">
@* <table>*@
<tr>
<td>
<span data-bind="text: EmpNo"></span>
</td>
<td>
<span data-bind="text: EmpName"></span>
</td>
<td>
<span data-bind="text: DeptName"></span>
</td>
<td>
<span data-bind="text: Designation"></span>
</td>
<td>
<span data-bind="text: Salary"></span>
</td>
<td>
<input type="button" value="Edit" data-bind="click: function () { EmpViewModel.editTemplate($data);}" />
</td>
<td>
<input type="button" value="delete" data-bind="click: function () { EmpViewModel.deleteEmployee($data); }" />
</td>
</tr>
@* </table>*@
</script> <script type="text/html" id="editTemplate">
@* <table>*@
<tr>
<td>
<input type="text" data-bind="value: $data.EmpNo" id="txteno" disabled="disabled" />
</td>
<td>
<input type="text" data-bind="value: $data.EmpName" id="txtename" />
</td>
<td>
<input type="text" data-bind="value: $data.DeptName" id="txtdname" />
</td>
<td>
<input type="text" data-bind="value: $data.Designation" id="txtdesig" />
</td>
<td>
<input type="text" data-bind="value: $data.Salary" id="txtsal" />
</td>
<td>
<input type="button" value="Save" data-bind="click: EmpViewModel.saveEmployee" />
</td>
<td>
<input type="button" value="Cancel" data-bind="click: function () { EmpViewModel.reset(); }" />
</td>
</tr>
@* </table>*@
</script> <script type="text/javascript"> var self = this;
//S1:Boolean to check wheather the operation is for Edit and New Record
var IsNewRecord = false; self.Employees = ko.observableArray([]); loadEmployees(); //S2:Method to Load all Employees by making call to WEB API GET method
function loadEmployees() {
$.ajax({
type: "GET",
url: "api/EmployeeInfoAPI",
success: function (data) {
alert("Success");
self.Employees(data);
},
error: function (err) {
alert(err.status + " <--------------->");
}
}); };
alert("Loading Data"); //S3:The Employee Object
function Employee(eno, ename, dname, desig, sal) {
return {
EmpNo: ko.observable(eno),
EmpName: ko.observable(ename),
DeptName: ko.observable(dname),
Designation: ko.observable(desig),
Salary: ko.observable(sal)
}
}; //S4:The ViewModel where the Templates are initialized
var EmpViewModel = {
readonlyTemplate: ko.observable("readonlyTemplate"),
editTemplate: ko.observable()
}; //S5:Method ti decide the Current Template (readonlyTemplate or editTemplate)
EmpViewModel.currentTemplate = function (tmpl) {
return tmpl === this.editTemplate() ? 'editTemplate' : this.readonlyTemplate();
}.bind(EmpViewModel); //S6:Method to create a new Blabk entry When the Add New Record button is clicked
EmpViewModel.addnewRecord = function () {
alert("Add Called");
self.Employees.push(new Employee(0, "", "", "", 0.0));
IsNewRecord = true; //Set the Check for the New Record
}; //S7:Method to Save the Record (This is used for Edit and Add New Record)
EmpViewModel.saveEmployee = function (d) { var Emp = {};
Emp.EmpNo = d.EmpNo;
Emp.EmpName = d.EmpName;
Emp.DeptName = d.DeptName;
Emp.Designation = d.Designation;
Emp.Salary = d.Salary;
//Edit teh Record
if (IsNewRecord === false) {
$.ajax({
type: "PUT",
url: "api/EmployeeInfoAPI/" + Emp.EmpNo,
data: Emp,
success: function (data) {
alert("Record Updated Successfully " + data.status);
EmpViewModel.reset();
},
error: function (err) {
alert("Error Occures, Please Reload the Page and Try Again " + err.status);
EmpViewModel.reset();
}
});
}
//The New Record
if (IsNewRecord === true) {
IsNewRecord = false;
$.ajax({
type: "POST",
url: "api/EmployeeInfoAPI",
data: Emp,
success: function (data) {
alert("Record Added Successfully " + data.status);
EmpViewModel.reset();
loadEmployees();
},
error: function (err) {
alert("Error Occures, Please Reload the Page and Try Again " + err.status);
EmpViewModel.reset();
}
});
}
}; //S8:Method to Delete the Record
EmpViewModel.deleteEmployee = function (d) { $.ajax({
type: "DELETE",
url: "api/EmployeeInfoAPI/" + d.EmpNo,
success: function (data) {
alert("Record Deleted Successfully " + data.status);
EmpViewModel.reset();
loadEmployees();
},
error: function (err) {
alert("Error Occures, Please Reload the Page and Try Again " + err.status);
EmpViewModel.reset();
}
});
}; //S9:Method to Reset the template
EmpViewModel.reset = function (t) {
this.editTemplate("readonlyTemplate");
}; ko.applyBindings(EmpViewModel);
</script>
图文介绍地址:http://www.dotnetcurry.com/showarticle.aspx?ID=1006
代码下载:https://github.com/dotnetcurry/htmltable-mvc-webapi
谢谢浏览!
代码演示用 KnockoutJS 和 Web API 对一个表格(Gird)进行 CRUD 操作,在 MVC 5 下的更多相关文章
- HttpActionDescriptor,ASP.NET Web API又一个重要的描述对象
HttpActionDescriptor,ASP.NET Web API又一个重要的描述对象 通过前面对“HttpController的激活”的介绍我们已经知道了ASP.NET Web API通过Ht ...
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...
- HTML5 Web SQL Database 与 Indexed Database 的 CRUD 操作
http://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5db/ 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- 【ASP.NET Web API教程】2.1 创建支持CRUD操作的Web API
原文 [ASP.NET Web API教程]2.1 创建支持CRUD操作的Web API 2.1 Creating a Web API that Supports CRUD Operations2.1 ...
- knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页
Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例 ...
- 从实体框架核心开始:构建一个ASP。NET Core应用程序与Web API和代码优先开发
下载StudentApplication.Web.zip - 599.5 KB 下载StudentApplication.API.zip - 11.5 KB 介绍 在上一篇文章中,我们了解了实体框架的 ...
- 【ASP.NET MVC 5】第27章 Web API与单页应用程序
注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家 ...
- 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用
由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...
- Web API 强势入门指南
Web API是一个比较宽泛的概念.这里我们提到Web API特指ASP.NET Web API. 这篇文章中我们主要介绍Web API的主要功能以及与其他同类型框架的对比,最后通过一些相对复杂的实例 ...
随机推荐
- paip.提升性能3倍--使用栈跟VirtualAlloc代替堆的使用.
paip.提升性能3倍--使用栈跟VirtualAlloc代替堆的使用. #----为什么要设计堆栈,它有什么独特的用途? 为了性能 .... 堆比栈的性能 也有的说法为了编程容易...这个是错误的 ...
- javaweb学习总结(二十三)——jsp自定义标签开发入门
一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...
- MyEclipse使用总结——在MyEclipse中设置jsp页面为默认utf-8编码
在MyEclispe中创建Jsp页面,Jsp页面的默认编码是“ISO-8859-1”,如下图所示: 在这种编码下编写中文是没有办法保存Jsp页面的,会出现如下的错误提示: 因此可以设置Jsp默认的编码 ...
- ucos操作系统的内核有哪些调度方法
1)时间片轮番调度法 假设系统中有5个任务,T1,T2,T3,T4,T5,这个时候,操作系统为每一个任务分配时间,比如说我们为T1任务分配10毫秒,为T2任务分配20毫秒,为T3任务分配5毫秒,为T4 ...
- asp.net MVC的EF与easyui DataGrid数据绑定
页面代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...
- webService----wsimport调用方式
一.工具 1.myEclipse 2.jdk1.7 二.创建服务端 1.创建web Service Project 命名为TheService 2.创建class类ServiceHello.java, ...
- Scala 深入浅出实战经典 第76讲:模式匹配下的赋值语句
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...
- 安装scapy遇到的问题
1. Mac平台 在mac上安装scapy可以说是困难重重,一来因为scapy实在有些小众和老旧,再加上安装说明文档都是python2.5 也没有详细说明一些安装问题. 折腾了大概三个小时之后终于解决 ...
- IT部门能力评估...
IT运行成本和变化成本越来越高,IT部门是否上了一些对企业无价值的系统,是否充分利用了已有系统的价值? 随 着IT应用不断深入,庞大的企业IT系统日积月累,各种隐患渐渐显露.IT系统变得越来越复杂,运 ...
- Android学习笔记----Activity的生命周期图示
转载,一目了然.