UserController代码：

  1. using GignSoft.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Net;
  6. using System.Net.Http;
  7. using System.Web.Http;
  8.  
  9. namespace GignSoft.Controllers
  10. {
  11.     public class UserController : ApiController
  12.     {
  13.         private readonly GignSoftDataContext context = new GignSoftDataContext();
  14.  
  15.         public IEnumerable<SysUser> Get()
  16.         {
  17.             return context.SysUser;
  18.         }
  19.  
  20.         public SysUser Get(int id)
  21.         {
  22.             return context.SysUser.FirstOrDefault(c => c.SysUserID == id);
  23.         }
  24.  
  25.         public void Put(SysUser sysuser)
  26.         {
  27.             Guid gid = Guid.NewGuid();
  28.             sysuser.SysUserID = gid.GetHashCode();
  29.             context.SysUser.InsertOnSubmit(sysuser);
  30.             context.SubmitChanges();
  31.         }
  32.  
  33.         public void Post(SysUser sysuser)
  34.         {
  35.             Delete(sysuser.SysUserID);
  36.             context.SysUser.InsertOnSubmit(sysuser);
  37.             context.SubmitChanges();
  38.         }
  39.         public void Delete(int id)
  40.         {
  41.             SysUser sysuser = context.SysUser.FirstOrDefault(c => c.SysUserID == id);
  42.             context.SysUser.DeleteOnSubmit(sysuser);
  43.             context.SubmitChanges();
  44.         }
  45.     }
  46. }

视图代码:

  1. @{
  2.     ViewBag.Title = "Index";
  3. }
  4. <script type="text/javascript">
  5.     function altRows(id) {
  6.         if (document.getElementsByTagName) {
  7.  
  8.             var table = document.getElementById(id);
  9.             var rows = table.getElementsByTagName("tr");
  10.  
  11.             for (i = ; i < rows.length; i++) {
  12.                 if (i %  == ) {
  13.                     rows[i].className = "evenrowcolor";
  14.                 } else {
  15.                     rows[i].className = "oddrowcolor";
  16.                 }
  17.             }
  18.         }
  19.     }
  20.  
  21.     window.onload = function () {
  22.         altRows('alternatecolor');
  23.     }
  24. </script>
  25.  
  26. <style type="text/css">
  27.     table.altrowstable {
  28.         font-family: verdana,arial,sans-serif;
  29.         font-size: 11px;
  30.         color: #;
  31.         border-width: 1px;
  32.         border-color: #a9c6c9;
  33.         border-collapse: collapse;
  34.     }
  35.  
  36.         table.altrowstable th {
  37.             border-width: 1px;
  38.             padding: 8px;
  39.             border-style: solid;
  40.             border-color: #a9c6c9;
  41.         }
  42.  
  43.         table.altrowstable td {
  44.             border-width: 1px;
  45.             padding: 8px;
  46.             border-style: solid;
  47.             border-color: #a9c6c9;
  48.         }
  49.  
  50.     .oddrowcolor {
  51.         background-color: #d4e3e5;
  52.     }
  53.  
  54.     .evenrowcolor {
  55.         background-color: #c3dde0;
  56.     }
  57. </style>
  58. <html>
  59. <head>
  60.     <title>用户管理</title>
  61.     <script src="~/Content/Scripts/jquery-1.7.1.js"></script>
  62.     <script src="~/Content/Scripts/knockout-2.1.0.js"></script>
  63. </head>
  64. <body>
  65.     <div id="user">
  66.         <table rules="all" class="altrowstable" id="alternatecolor">
  67.             <tr>
  68.                 <th>编号</th>
  69.                 <th>用户名</th>
  70.                 <th>密码</th>
  71.                 <th>创建时间</th>
  72.                 <th>状态</th>
  73.                 <th></th>
  74.             </tr>
  75.             <tbody>
  76.  
  77.                 <tr>
  78.                     <td data-bind="text: SysUserID" />
  79.                     <td>
  80.                         <input type="text" class="textbox long" data-bind="value: LogName" />
  81.                     </td>
  82.                     <td>
  83.                         <input type="text" class="textbox long" data-bind="value: PassWord" />
  84.                     </td>
  85.  
  86.                     <td data-bind="text: CreateTime" />
  87.                     <td data-bind="text: State" />
  88.  
  89.                     <td>
  90.                         <a href="#" data-bind="click: $root.updateContact">修改</a>
  91.                         <a href="#" data-bind="click: $root.deleteContact">删除</a>
  92.                     </td>
  93.                 </tr>
  94.  
  95.                 <tr data-bind="with: addedContact">
  96.                     <td>
  97.                         <input type="text" class="textbox" data-bind="value: SysUserID" />
  98.                     </td>
  99.                     <td>
  100.                         <input type="text" class="textbox" data-bind="value: LogName" />
  101.                     </td>
  102.                     <td>
  103.                         <input type="text" class="textbox long" data-bind="value: PassWord" />
  104.                     </td>
  105.                     <td>
  106.                         <input type="text" class="textbox" data-bind="value: CreateTime" />
  107.                     </td>
  108.                     <td>
  109.                         <input type="text" class="textbox" data-bind="value: State" />
  110.                     </td>
  111.                     <td>
  112.                         <a href="#" data-bind="click: $root.addContact">添加</a>
  113.                     </td>
  114.                 </tr>
  115.             </tbody>
  116.         </table>
  117.     </div>
  118.     <script type="text/javascript">
  119.         function ContactViewModel() {
  120.             self = this;
  121.             self.allContacts = ko.observableArray();
  122.             self.addedContact = ko.observable();
  123.  
  124.             self.loadContacts = function () {
  125.                 $.get("/api/user", null, function (data) {
  126.                     self.allContacts(data);
  127.                     var emptyContact = { SysUserID: "", LogName: "", PassWord: "", CreateTime: "", State: "" };
  128.                     self.addedContact(emptyContact);
  129.                 });
  130.             };
  131.  
  132.             self.addContact = function (data) {
  133.                 if (!self.validate(data)) {
  134.                     return;
  135.                 }
  136.                 $.ajax({
  137.                     url: "/api/user/",
  138.                     data: self.addedContact(),
  139.                     type: "PUT",
  140.                     success: self.loadContacts
  141.                 });
  142.             };
  143.  
  144.             self.updateContact = function (data) {
  145.                 $.ajax({
  146.                     url: "/api/user/",
  147.                     data: data,
  148.                     type: "POST",
  149.                     success: self.loadContacts
  150.                 });
  151.             };
  152.  
  153.             self.deleteContact = function (data) {
  154.                 $.ajax({
  155.                     url: "/api/user/" + data.SysUserID,
  156.                     type: "DELETE",
  157.                     success: self.loadContacts
  158.                 });
  159.             };
  160.  
  161.             self.validate = function (data) {
  162.                 if (data.LogName && data.PassWord && data.State) {
  163.                     return true;
  164.                 }
  165.                 alert("请输入全部完整信息!");
  166.                 return false;
  167.             }
  168.             self.loadContacts();
  169.         }
  170.         ko.applyBindings(new ContactViewModel());
  171.     </script>
  172. </body>
  173. </html>

使用效果:

参考书本：

ASP.NET MVC 4框架揭秘

代码资料来源：

通过ASP.NET Web API + JQuery创建一个简单的Web应用

通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html

http://www.cnblogs.com/artech/archive/2012/05/14/web-api-demo.html

主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API的更多相关文章

  1. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP

    原文:主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP 原文地址 http://www.codeguru.com/csharp/.net/net_asp/using-jso ...

  2. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  4. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  5. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用

    在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...

  7. 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息

    第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...

  8. 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据

                @{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> ...

  9. 主攻ASP.NET MVC4.0之重生:使用反射获取Controller的ActionResult

    示例代码 public ActionResult TypeOfForName() { Type typeinfo = typeof(CustomerClassController); //typeof ...

随机推荐

  1. sha1加密算法

    public static void main(String[] args) throws UnsupportedEncodingException { /* * 获取jsapi_ticket * * ...

  2. 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标

    jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

  3. Fibonacci series(斐波纳契数列)的几种常见实现方式

    费波那契数列的定义: 费波那契数列(意大利语:Successione di Fibonacci),又译费波拿契数.斐波那契数列.斐波那契数列.黄金切割数列. 在数学上,费波那契数列是以递归的方法来定义 ...

  4. 转载： vim使用技巧

    两篇很牛的vim使用技巧   来源: ChinaUnix博客 日期: 2009.07.06 10:18 (共有条评论) 我要评论   读本文之前请注意:1. 本文的目标是提供一些vim的使用技巧,利用 ...

  5. git的优秀教程

    1.csdn地址:http://blog.csdn.net/qq_15037231/article/details/73864293 2.廖雪峰的git教程  地址:https://www.liaox ...

  6. mysql UNION all 实现不对称数据统计

    当统计多条的三个参数在不同时间段的数据的sum,又只能写在同一个sql上时,可以考虑union all三次查询, select * from ( select kk.a_time as dates,k ...

  7. Native VLAN打上标记

    802.1Q和ISL都知道两者的区别在于前者对native vlan的流量不打标记,而后者统一都打标记. 配置成Native VLAN的Trunk端口,收到Native VLAN的帧后,不打标记直接从 ...

  8. tsinsen A1333. 矩阵乘法（梁 盾）

    A1333. 矩阵乘法(梁 盾) 时间限制:2.0s   内存限制:256.0MB   总提交次数:515   AC次数:211   平均分:54.14   将本题分享到:        查看未格式化 ...

  9. 安装mysql报错—解决方法：error while loading shared libraries: libssl.so.6

    for 32bit ln -sf /usr/lib/libssl.so.10 /usr/lib/libssl.so.6ln -sf /usr/lib/libcrypto.so.10 /usr/lib/ ...

  10. python多进程理论

    什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): 你在一个时间段内有很多任务要做:python学习的任务,赚钱的任务,交女朋 ...