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. 使用google地图API

    1.获取key 2.获取相应地方的坐标:https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop&hl= ...

  2. VS2005 Manifest 配置问题总结

    一.问题 编译某个遗留工程后,运行程序时报错,“由于应用程序的配置不正确,应用程序无法启动.重新安装应用程序可能会解决这个问题.” 查看生成的Manifest文件如下: <?xml versio ...

  3. Unity与Android交互实现

    主要参考了这篇文章: Unity与Android交互方案优化版 链接:https://www.jianshu.com/p/86b275da600e 自己的实现(unity获取内存和温度): andro ...

  4. javascript拼接html代码

    转自开源中国社区:http://www.oschina.net/code/snippet_94055_21640经常做jsp开发的朋友可能遇到一个情况,显示列表数据不是table,而是div或者其他很 ...

  5. windows下用py2exe打包脚本为可双击运行程序

    文件夹结构: ├── readme.txt ├── settings.py #程序参数 ├── settings.pyc ├── setup.py    #安装文件 ├── spider.ico   ...

  6. diango-tinymce富文本编译器

    应用到项目中 在settings.py中为INSTALLED_APPS添加编辑器应用 INSTALLED_APPS = ( ... 'tinymce', ) 在settings.py中添加编辑配置项 ...

  7. POJ 1861 &amp; ZOJ 1542 Network（最小生成树之Krusal）

    题目链接: PKU:http://poj.org/problem?id=1861 ZJU:http://acm.zju.edu.cn/onlinejudge/showProblem.do?proble ...

  8. linux之shell常用命令介绍

    一.cd    切换目录 cd /etc  切换到/etc目录下              cd ~       切换到主目录下 cd  ..      返回上级目录                  ...

  9. ZOJ1311(Network)

    题目链接:传送门 题目大意:给你一副无向图,求有多少个割点 题目思路:tarjan算法(此题读入是字符串读入,需注意) #include <iostream> #include <c ...

  10. js HTML DOM TableRow 对象(innerHTML)

    TableRow 对象 TableRow 对象代表一个 HTML 表格行. 在 HTML 文档中 <tr> 标签每出现一次,一个 TableRow 对象就会被创建. TableRow 对象 ...