UserController代码：

using GignSoft.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

namespace GignSoft.Controllers

{

    public class UserController : ApiController

    {

        private readonly GignSoftDataContext context = new GignSoftDataContext();

        public IEnumerable<SysUser> Get()

        {

            return context.SysUser;

        }

        public SysUser Get(int id)

        {

            return context.SysUser.FirstOrDefault(c => c.SysUserID == id);

        }

        public void Put(SysUser sysuser)

        {

            Guid gid = Guid.NewGuid();

            sysuser.SysUserID = gid.GetHashCode();

            context.SysUser.InsertOnSubmit(sysuser);

            context.SubmitChanges();

        }

        public void Post(SysUser sysuser)

        {

            Delete(sysuser.SysUserID);

            context.SysUser.InsertOnSubmit(sysuser);

            context.SubmitChanges();

        }

        public void Delete(int id)

        {

            SysUser sysuser = context.SysUser.FirstOrDefault(c => c.SysUserID == id);

            context.SysUser.DeleteOnSubmit(sysuser);

            context.SubmitChanges();

        }

    }

}

视图代码:

@{

    ViewBag.Title = "Index";

}

<script type="text/javascript">

    function altRows(id) {

        if (document.getElementsByTagName) {

            var table = document.getElementById(id);

            var rows = table.getElementsByTagName("tr");

            for (i = ; i < rows.length; i++) {

                if (i %  == ) {

                    rows[i].className = "evenrowcolor";

                } else {

                    rows[i].className = "oddrowcolor";

                }

            }

        }

    }

    window.onload = function () {

        altRows('alternatecolor');

    }

</script>

<style type="text/css">

    table.altrowstable {

        font-family: verdana,arial,sans-serif;

        font-size: 11px;

        color: #;

        border-width: 1px;

        border-color: #a9c6c9;

        border-collapse: collapse;

    }

        table.altrowstable th {

            border-width: 1px;

            padding: 8px;

            border-style: solid;

            border-color: #a9c6c9;

        }

        table.altrowstable td {

            border-width: 1px;

            padding: 8px;

            border-style: solid;

            border-color: #a9c6c9;

        }

    .oddrowcolor {

        background-color: #d4e3e5;

    }

    .evenrowcolor {

        background-color: #c3dde0;

    }

</style>

<html>

<head>

    <title>用户管理</title>

    <script src="~/Content/Scripts/jquery-1.7.1.js"></script>

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

</head>

<body>

    <div id="user">

        <table rules="all" class="altrowstable" id="alternatecolor">

            <tr>

                <th>编号</th>

                <th>用户名</th>

                <th>密码</th>

                <th>创建时间</th>

                <th>状态</th>

                <th></th>

            </tr>

            <tbody>

                <tr>

                    <td data-bind="text: SysUserID" />

                    <td>

                        <input type="text" class="textbox long" data-bind="value: LogName" />

                    </td>

                    <td>

                        <input type="text" class="textbox long" data-bind="value: PassWord" />

                    </td>

                    <td data-bind="text: CreateTime" />

                    <td data-bind="text: State" />

                    <td>

                        <a href="#" data-bind="click: $root.updateContact">修改</a>

                        <a href="#" data-bind="click: $root.deleteContact">删除</a>

                    </td>

                </tr>

                <tr data-bind="with: addedContact">

                    <td>

                        <input type="text" class="textbox" data-bind="value: SysUserID" />

                    </td>

                    <td>

                        <input type="text" class="textbox" data-bind="value: LogName" />

                    </td>

                    <td>

                        <input type="text" class="textbox long" data-bind="value: PassWord" />

                    </td>

                    <td>

                        <input type="text" class="textbox" data-bind="value: CreateTime" />

                    </td>

                    <td>

                        <input type="text" class="textbox" data-bind="value: State" />

                    </td>

                    <td>

                        <a href="#" data-bind="click: $root.addContact">添加</a>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

    <script type="text/javascript">

        function ContactViewModel() {

            self = this;

            self.allContacts = ko.observableArray();

            self.addedContact = ko.observable();

            self.loadContacts = function () {

                $.get("/api/user", null, function (data) {

                    self.allContacts(data);

                    var emptyContact = { SysUserID: "", LogName: "", PassWord: "", CreateTime: "", State: "" };

                    self.addedContact(emptyContact);

                });

            };

            self.addContact = function (data) {

                if (!self.validate(data)) {

                    return;

                }

                $.ajax({

                    url: "/api/user/",

                    data: self.addedContact(),

                    type: "PUT",

                    success: self.loadContacts

                });

            };

            self.updateContact = function (data) {

                $.ajax({

                    url: "/api/user/",

                    data: data,

                    type: "POST",

                    success: self.loadContacts

                });

            };

            self.deleteContact = function (data) {

                $.ajax({

                    url: "/api/user/" + data.SysUserID,

                    type: "DELETE",

                    success: self.loadContacts

                });

            };

            self.validate = function (data) {

                if (data.LogName && data.PassWord && data.State) {

                    return true;

                }

                alert("请输入全部完整信息!");

                return false;

            }

            self.loadContacts();

        }

        ko.applyBindings(new ContactViewModel());

    </script>

</body>

</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. POJ 1426 Find The Multiple &amp;&amp; 51nod 1109 01组成的N的倍数 (BFS + 同余模定理)

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 21436   Accepted: 877 ...

  2. ECharts：企业报表工具

    ECharts.纯Javascript图表库,基于Canvas,底层依赖ZRender.商业产品经常使用图表库,提供直观,生动.可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫 ...

  3. Laravel5.1 模型 --一对多关系

    一对多关系算是比较常用的一种关联关系了,关于一对多我们可以用 文章对应评论 来举例:一篇文章可以有多个评论,但是一个评论只属于一篇文章. 这就是一对多关系. 1 实现一对多关系 我们先来准备两个模型, ...

  4. iPhone程序中的加密处理

    本文转载至 http://blog.csdn.net/zaitianaoxiang/article/details/6650478     原文链接 : http://www.yifeiyang.ne ...

  5. Oracle Delete与系统资源

    在用Delete删除数据时,SQL语句首先要通过全表扫描或索引扫描找到符合条件的记录并删除. 然而在这个过程中将消耗大量的CPU资源,I/O资源以及UNDO数据. 如果删除的数据量较大,将极大的影响系 ...

  6. 巨蟒python全栈开发django10:ajax&&登录认证

    通过题目进行知识点回顾: 聚合查询 From django.db.models import Avg,Min,Max,F,Q,Count,Sum #查询书籍的平均值 Ret= Models.Book. ...

  7. 处理 Java 的“Cannot allocate memory”错误

    今天在配置 DCA 服务器的时候,检验 java 版本的时候忽然遇到了一个 Cannot allocate memory 错误 [root@elcid-prod1 ~]# java -version ...

  8. Ubuntu14.04下Nginx反向代理Odoo域名

    安装nginx sudo apt-get install -y nginx 修改配置文件 vi /etc/nginx/nginx.conf #注释掉下面这行代码 #include /etc/nginx ...

  9. m进制转n进制

    http://www.cnblogs.com/pkuoliver/archive/2010/10/27/Convert-m-number-to-n-number.html 从这道题中可以看出,数论中存 ...

  10. (扫盲)WebSocket 教程

    原文地址:http://www.ruanyifeng.com/blog/2017/05/websocket.html WebSocket 是一种网络通信协议,很多高级功能都需要它. 本文介绍 WebS ...