Durandal CRUD

• 下载源代码 - 5.1 MB

引言

本文逐步展示如何使用 Visual Studio MVC 模板和 Nuger Durandal Starter Kit 创建 Durandal CRUD Web 应用程序。

创建项目

打开一个新项目，并在 Visual C# 和 Web 下选择 ASP.NET Web 应用程序，然后为项目指定一个合适的名称，如图 1 和图 2 所示。

如图 3 所示，选择 MVC 模板。

要添加 durandal starterkit nuget 包，请从项目解决方案资源管理器中右键单击您自己的项目，然后单击“管理 Nuget 程序包”。图 4 说明了这一点。

搜索 durandal starterkit（由 Rob Eisenberg 创建），然后将其安装到您的项目中，如图 5 所示。

编码

打开 App_Start 文件夹下的 routeConfig.cs，然后将默认控制器更改为 Durandal。图 6 显示了代码行。

如果一切顺利，当您单击运行时，应该会看到 durandal starter kit 欢迎网页。图 7 显示了欢迎网页。

使用 nuget 程序包管理器搜索 knockout.TypeScript.DefinitelyTyped，为 Typescript 添加 knockout 定义 nuget 程序包，然后将其安装到您的项目中。检查定义文件 knocout.d.ts 是否已添加到您的项目的 scripts/Typings/knockout 下。

打开您的项目设置 Type Script 构建选项卡，检查模块系统是否为 AMD。图 8 显示了配置。

在 App/modules 文件夹下创建 userdata 作为 type script 文件。首先，您应该在 App 文件夹下创建 modules 文件夹。userdata 文件将作为我们的用户模型。在 userdata 类中添加 Name、Surname、Phone 和 address 作为 KnockoutObservable，如下面的代码所示。定义类的构造函数，如下所示。保存文件时，应创建 js 文件，检查解决方案资源管理器是否显示所有文件，然后找到创建的 userdata.js 文件。

module UserModule {
    export class userdata {
        public Name: KnockoutObservable<string> = ko.observable<string>();
        public Surname: KnockoutObservable<string> = ko.observable<string>();
        public Phone: KnockoutObservable<string> = ko.observable<string>();
        public Address: KnockoutObservable<string> = ko.observable<string>();
        public constructor(name: string , surname: string , phone: string , address: string ) {
            this.Name(name);
            this.Surname(surname);
            this.Phone(phone);
            this.Address(address);
        }
    }
}
export = UserModule

创建 users.ts typescript 文件作为 viewmodel，位于 viewmodels 下，并创建 users.html 作为 view，位于 views 下。导入 models/userdata 以使用 userdata 模式到 users.ts 文件。添加四个 public 项，Name、Surname、Phone 和 Address 作为 knockoutObservable。

Users.ts
import user = require("models/userdata")
class users {
    public Name: KnockoutObservable<string> = ko.observable<string>();
    public Surname: KnockoutObservable<string> = ko.observable<string>();
    public Phone: KnockoutObservable<string> = ko.observable<string>();
    public Address: KnockoutObservable<string> = ko.observable<string>();
    public userArray: KnockoutObservableArray<user.userdata> = ko.observableArray<user.userdata>([
        new user.userdata("Yildirim", "Kocdag", "5555", "AABBCC"),
        new user.userdata("Yildirim1", "Kocdag1", "55551", "AABBCC1")
        ]);

    public AddNew = () =>
    {
        this.userArray.push(new user.userdata
                (this.Name(), this.Surname(), this.Phone(), this.Address()));
        this.Name("");
        this.Surname("");
        this.Phone("");
        this.Address("");
    }

    public Remove = (user : user.userdata) =>
    {
        this.userArray.remove(user);
    }
}
export = users;

创建一个 div 用于 foreach 循环，以在用户视图中显示数组项。除此之外，添加一个用于将新项目插入数组的表单。

User.html

<div data-bind="foreach : userArray">
    <b>Name:</b> <span data-bind="text : Name"></span>
    <br />
    <b>Surname:</b><span data-bind="text: Surname"></span>
    <br />
    <b>Phone:</b><span data-bind=" text: Phone"></span>
    <br />
    <b>Address:</b><span data-bind="text: Address"></span>
    <br />
    <input type="button" value="Delete" data-bind="click: $parent.Remove" />
    <hr>
</div>

<b>New Record</b>
<br />
Name: <input type="text"  data-bind="value: Name"/>
Surname: <input type="text" data-bind="value: Surname" />
Phone: <input type="text" data-bind="value: Phone" />
Address: <input type="text" data-bind="value: Address" />
<input type="button" value="Save" data-bind="click: AddNew" />

• data-bind="text : Name" 表达式表明 Name 属性通过 text 属性与视图进行单向绑定。
• data-bind="value: Name" 表达式表明 Name 属性通过 value 属性与视图进行双向绑定。

当我们单击保存按钮时，系统应该使用在 viewmodel 中定义的 AddNew 函数将该项目保存到数组中。
删除按钮将使用 $parent.Remove 函数从数组中删除该项目，该函数绑定到按钮的单击函数。删除函数写在 viewmodel 中。

要将新视图添加到菜单，应在 shell.js 文件中的路由器中定义到此视图的导航。

Shell.js

define(['plugins/router', 'durandal/app'], function (router, app) {
    return {
        router: router,
        search: function() {
            app.showMessage('Search not yet implemented...');
        },
        activate: function () {
            router.map([
                { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/flickr', nav: true },
                { route: 'users', title:'Users', moduleId:'viewmodels/users', nav:true}
            ]).buildNavigationModel();
            return router.activate();
        }
    };
});

当您单击播放按钮，然后选择用户页面时，您将看到如下页面

历史

如果文章引起预期的关注，我将添加更新过程。