代码演示用 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的主要功能以及与其他同类型框架的对比,最后通过一些相对复杂的实例 ...
随机推荐
- Maven系列--"maven-compiler-plugin"的使用
maven是个项目管理工具,如果我们不告诉它我们的代码要使用什么样的jdk版本编译的话,它就会用maven-compiler-plugin默认的jdk版本来进行处理,这样就容易出现版本不匹配的问题,以 ...
- 重学JAVA基础(八):锁的基本知识
1.线程状态 如上图,当我们新建一个线程,并start后,其实不一定会马上执行,因为只有操作系统调度了我们的线程,才能真正进行执行,而操作系统也随时可以运行其他线程,这时线程又回到可运行状态.这个过程 ...
- 使用 multiprocessing.dummy 执行多线程任务
# -*- coding: utf-8 -*- # from multiprocessing import Pool 多进程 from multiprocessing.dummy import Poo ...
- $.ajax()方法解析
$.ajax()方法,在web网站开发中常用到,作为一种用于创建快速动态网页的技术(异步JavaScript和XML).通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以 ...
- SourceTree - 正在检查源... When cloning a repository, "Checking Source" spins forever
I am trying to clone a repository, my OpenSSH is set up correctly and I can do everything fine in Gi ...
- [Android] 转移“植物大战僵尸2”存档的办法,无需root
作者:zyl910 查过了很多文章,都说需要root后才能转移存档.但很多时候是不能root的,此时该怎么办呢? 我研究了很久,最终找到了一种办法,无需root也能转移存档. 一.备份 我用的是联想手 ...
- 【Vegas原创】安装rhel6.2,不能进图形化界面的终极解决方法
安装的时候,千万不要一路下一步,you should know,linux不是windows那么的傻瓜. 方法一: 在倒数最后一步,选择Desktop,而千万不要下一步,默认选择Basic Ser ...
- UVA 1101 To Add or to Multiply
首先我们观察加操作和乘操作会对区间产生那些影响.加操作只会平移区间,而乘操作既能移动区间还能放大区间.因此我们不难想到,如果m>1的话乘操作是log级别的,一方面是因为区间的大小不能超过s-r, ...
- 【转】Windows Phone 8 开发环境的搭建
1.先安装Microsoft Visual Studio 2012旗舰版,安装包自己下载. 系统必须是Win8 X64 对于软硬件的检测可以参照: Windows Phone 8开发环境搭建之一.电脑 ...
- jquery获取元素的值,获取当前对象的父对象等等
jsp代码: <span><input type="hidden" value="1" id="newInfo">& ...