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. github+hexo+node.js搭建个人博客基本过程及遇到的问题

    一,所需工具 1,github账号+Gitclient+配置SSH key 2,安装node.js. 3,安装Hexo. 当中,github pages是我们用来部署我们本地的博客到github上的. ...

  2. NDK，在JNI层使用AssetManager读取文件

    NDK,二进制文件数据读取,在JNI层,通过AAssetManager读取asset内部的资源: 需要头文件的支持 #include <android/asset_manager_jni.h&g ...

  3. PowerDesigner如何导出表到word的方法

    from:https://jingyan.baidu.com/article/295430f1c385970c7f005056.html PowerDesigner如何导出表到word的方法 听语音 ...

  4. 如何在shell中处理异常（转）

    似乎好像大概有句话是这么说得,好程序与坏程序之间的区别就在于它的鲁棒性,也就是在异常情况下该程序是否还是在可hold住状态,能否不死,不崩溃,或者不做出一些超出预期的事情.那要做好这些,自然而然就要学 ...

  5. 微信小程序结构分析

    1.Console页面:控制台信息页两个作用: (1)开发直接输入代码并且进行调试: (2)显示小程序的错误输出: 2.Sources页面:源文件调试信息页,用于显示当前项目的脚本文件. 3.Netw ...

  6. Cocos2d-x Lua中多场景切换生命周期

    在多个场景切换时候,场景的生命周期会更加复杂.这一节我们介绍一下场景切换生命周期.多个场景切换时候分为几种情况:情况1,使用pushScene函数从实现GameScene场景进入SettingScen ...

  7. 巨蟒python全栈开发django4:url反向解析图解&&模板渲染

    第一部分: 1.(1)知识点回顾: django回顾: ()下载安装 输入网址,a,form表单get post,爬虫 (请求)==>django项目服务端的url(r"index/& ...

  8. Error: unable to connect to node rabbit@10: nodedown 修改hostname后异常

    https://blog.csdn.net/witsmakemen/article/details/22651365 [root@d bin]# rabbitmqctl start_appStarti ...

  9. Docker selinux

    编辑/etc/sysconfig/docker文件,把OPTIONS='--selinux-enabled'的--selinux-enabled注释掉,也可以通过这个错误. 最大的问题就是Linux的 ...

  10. Java的==与equals之辨

    =======================原理速记=================================== equals重载后比较内容,==比较指针.否则equls等同于== (Ja ...