初试KONCKOUT+WEBAPI简单实现增删改查

初试KONCKOUT+WEBAPI简单实现增删改查

前言

　　konckout.js本人也是刚刚接触，也是初学，本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作。Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如：更新依赖于用户的行为或者外部数据源的改变)，KO能够很简单的帮你实现并且很容易维护。其作用简单来说就是声明所需的数据作为一个JavaScript 模型对象(model object)，然后将DOM 元素或者模板(templates)绑定到它上面。

创建mvc4+webapi+konckout.js的简单应用程序

1、首先准备一个测试的数据库,我这以我随便创建的一个数据库为例

表结构如下图：

 

2、创建一个mvc程序，并在项目中添加一个以上表的ado.net实体数据模型

添加完成以后:

3、添加添加一个带读写操作的EmployeeApiController webapi控制器和用来实现增删改查的普通控制器EmployeeController

添加是注意选择是带读写操作的webapi控制器，选择好数据模型及数据库上下文，方面vs自动为我们生成读写操作。

添加完成后自动生成的完整代码：

  View Code

在添加一个普通的控制器EmployeeController，并在里面添加如下方法：

public ActionResult Create()
        {
            return View("Create");
        }

添加视图Create.cshtml：

首先在视图中添加对ko的引用，mapping.js是用来实现绑定viewmodel的第三方插件:

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

在body节点下添加一个form表单如下代码：

<form>
        <table>
            <tr>
                <td>
                    <!--将textbox监控属性的值与ViewModel绑定 -->
                    <table id="tbldml">
                        <tr>
                            <td>编号</td>
                            <td>
                                <input type="text" id="txteno" data-bind="value: $root.EmployeeID" disabled="disabled" /></td>
                        </tr>
                        <tr>
                            <td>名称</td>
                            <td>
                                <input type="text" id="txtename" data-bind="value: $root.EmployeeName" /></td>
                        </tr>
                        <tr>
                            <td>薪资</td>
                            <td>
                                <input type="text" id="txtsal" data-bind="value: $root.Salary" /></td>
                        </tr>
                        <tr>
                            <td>部门</td>
                            <td>
                                <input type="text" id="txtdname" data-bind="value: $root.DeptName" /></td>
                        </tr>
                        <tr>
                            <td>籍贯</td>
                            <td>
                                <input type="text" id="txtdesig" data-bind="value: $root.Address" /></td>
                        </tr>
                        <tr>
                            <!--ko控制的保存和修改按钮-->
                            <td>
                                <button data-bind="click :$root.save">保存</button></td>
                            <td>
                                <button data-bind="click: $root.update">修改</button></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div class="FixedContainer">
                        <!--控制有数据的时候显示表格-->
                        <table data-bind="visible:  Employees().length>0">
                            <thead>
                                <tr>
                                    <td>编号</td>
                                    <td>名称</td>
                                    <td>薪资</td>
                                    <td>部门</td>
                                    <td>籍贯</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <!--遍历所有数据->
                            <tbody data-bind="foreach:  Employees">
                                <tr style="border: solid" data-bind="click: $root.getselectedemployee" id="updtr">
                                    <td><span data-bind="text:  EmployeeID"></span></td>
                                    <td><span data-bind="text:  EmployeeName"></span></td>
                                    <td><span data-bind="text: Salary"></span></td>
                                    <td><span data-bind="text: DeptName"></span></td>
                                    <td><span data-bind="text: Address"></span></td>
                                    <td>
                                        <button data-bind="click: $root.deleterec">Delete</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </table>

    </form>

4、页面改造好以后，编写Ko需要的js来实现增删改查

在页面添加scripts占位节点添加如下脚本：

@section scripts{
        <script type="text/javascript">
        var EmpViewModel = function () {
            var self = this;

            self.EmployeeID = ko.observable("0");
            self.EmployeeName = ko.observable("");
            self.Salary = ko.observable("");
            self.DeptName = ko.observable("");
            self.Address = ko.observable("");

            var EmpData = {
                EmployeeID: self.EmployeeID,
                EmployeeName: self.EmployeeName,
                Salary: self.Salary,
                DeptName: self.DeptName,
                Address: self.Address
            };

            //生命一个ObservableArray来存储返回的所有数据
            self.Employees = ko.observableArray([]);

            GetEmployees(); //通过ajax请求返回所有数据
            //保存数据
            self.save = function () {
                //Ajax 提交到webapi保存数据
                alert(11);
                $.ajax({
                    type: "POST",
                    url: "/api/EmployeeApi",
                    data: ko.toJSON(EmpData),
                    contentType: "application/json",
                    success: function (data) {
                        alert("记录保存成功");
                        self.EmployeeID(data.EmployeeID);
                        alert("新数据Id :" + self.EmployeeID());
                        GetEmployees();
                    },
                    error: function () {
                        alert("提交失败");
                    }
                });
            };

            self.update = function () {
                var url = "/api/EmployeeApi/" + self.EmployeeID();
                alert(url);
                $.ajax({
                    type: "PUT",
                    url: url,
                    data: ko.toJSON(EmpData),
                    contentType: "application/json",
                    success: function (data) {
                        alert("修改成功");
                        GetEmployees();
                    },
                    error: function (error) {
                        alert(error.status + "<!----!>" + error.statusText);
                    }
                });
            };

            //删除操作
            self.deleterec = function (employee) {
                $.ajax({
                    type: "DELETE",
                    url: "/api/EmployeeApi/" + employee.EmployeeID,
                    success: function (data) {
                        alert("Record Deleted Successfully");
                        GetEmployees();//Refresh the Table
                    },
                    error: function (error) {
                        alert(error.status + "<--and--> " + error.statusText);
                    }
                });
            };

            //获取所有Employee
            function GetEmployees() {
                //Ajax 获取所有Employee记录
                $.ajax({
                    type: "GET",
                    url: "/api/EmployeeApi",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        self.Employees(data); 
                    },
                    error: function (error) {
                        alert(error.status + "<--and--> " + error.statusText);
                    }
                });
            }
            //点击右侧列表某一行左侧编辑赋值
            self.getselectedemployee = function (employee) {
                self.EmployeeID(employee.EmployeeID),
                self.EmployeeName(employee.EmployeeName),
                self.Salary(employee.Salary),
                self.DeptName(employee.DeptName),
                self.Address(employee.Address)
            };


        };
        //激活knockout
        ko.applyBindings(new EmpViewModel());
    </script>

    }

代码中有比较详细的注释，其中实现的增删查改的操作是通过ajax异步调用webapi来实现的，刷新及数据绑定是通过ko来实现的。

5、运行程序得到如下效果：

新增记录的时候id默认为0，表单数据为空，点击保存实现无刷新保存，右侧若无数据表格则隐藏，若有数据表格显示数据列表。

点击某一行数据，左侧表单显示该行数据信息，并可以修改信息

点击删除实现无刷新删除数据记录。

 

 

 

 

 

背景返回目录

用过 ExtJs 的朋友都有一种趋势：审美疲劳，好在 Ext4.1 之后的版本提供了快速自定义主题的功能，本文的内容主要来自：http://docs.sencha.com/extjs/4.2.2/#!/guide/theming，我记录下来是为了强化一下。

安装环境返回目录

• JRE：http://www.oracle.com/technetwork/java/javase/downloads/index.html。
• Ruby：http://rubyinstaller.org/。
• Sencha-Cmd：http://www.sencha.com/products/sencha-cmd/download。
• Ext Js：http://www.sencha.com/products/extjs/。

自定义主题返回目录

第一步：创建 Workspace返回目录

命令行内容

1 cd /d E:\ExtCoding
2 sencha -sdk ext-4.2 generate workspace ThemingStudy

运行结果

第二步：创建 App返回目录

命令行内容

1 cd /d E:\ExtCoding\ThemingStudy
2 sencha -sdk ext generate app ThemeTest ThemeTest

运行结果

第三步：创建主题返回目录

命令行内容

1 cd /d E:\ExtCoding\ThemingStudy\ThemeTest
2 sencha generate theme happy-theme-green

运行结果

第四步：修改主题的“继承主题”和“Saas 变量”返回目录

修改“继承主题”

修改“Saas 变量”

增加文件：E:\ExtCoding\ThemingStudy\packages\happy-theme-green\sass\var\Component.scss

1 $base-color: #745858 !default;

第五步：编译主题返回目录

命令行内容

1 cd /d E:\ExtCoding\ThemingStudy\packages\happy-theme-green
2 sencha package build

运行结果

第六步：App 使用主题，编译 App返回目录

在 E:\ExtCoding\ThemingStudy\ThemeTest\.sencha\app\sencha.cfg 中修改如下内容：

1 app.theme=happy-theme-green

编译 App 使用的命令行内容

1 cd /d E:\ExtCoding\ThemingStudy\ThemeTest
2 sencha app build

第七步：最终运行结果返回目录

如何学习 Sass 变量？返回目录

备注返回目录

再也不怕主题不兼容了，随着浏览器的性能越来越好，看好 ExtJs，不过我有可能要转 Silverlight 或 WPF 了。

 

 

标签:  .net mvc