一个简单的 ASP.NET MVC 例子演示如何在 Knockout JS 的配合下,使用 TypeScript 。
2014-05-29 18:15
1061 查看
前言
TypeScript 是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发。TypeScript扩展了 JavaScript 的句法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件,扩展了它对于流行的库如 jQuery,MongoDB,Node.js和 D3.js 的好处。TypeScript 的官方地址:http://www.typescriptlang.org/
实战
1. 定义实体类
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace TypeScriptMvc.Models { public class TaskDetails { public int Id { get; set; } public string Title { get; set; } public string Details { get; set; } public DateTime Starts { get; set; } public DateTime Ends { get; set; } } }
2. 控制器(Controller)代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using TypeScriptMvc.Models; namespace TypeScriptMvc.Controllers { public class HomeController : Controller { public ActionResult Tasks() { List<TaskDetails> tasks = new List<TaskDetails>(); for (int i = 0; i < 10; i++) { TaskDetails newTask = new TaskDetails { Id = i, Title = "Task " + (i + 1), Details = "Task Details " + (i + 1), Starts = DateTime.Now, Ends = DateTime.Now.AddDays(i + 1) }; tasks.Add(newTask); } return View(tasks); } } }
这里仅仅是循环生成了 10 条 TaskDetails 记录,并把它作为 Model 传递给 View。
3. View.cshtml 代码
@model IEnumerable<TypeScriptMvc.Models.TaskDetails> <p> @Html.ActionLink("Create New", "Create") <input type="hidden" id="serverJSON" value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" /> </p> <table class="table"> <tr> <th> Title </th> <th> Details </th> <th> Starts </th> <th> Ends </th> <th></th> </tr> <tbody data-bind="foreach: tasks"> <tr> <td data-bind="text: title"></td> <td data-bind="text: details"></td> <td data-bind="text: starts"></td> <td data-bind="text: ends"></td> <td></td> </tr> </tbody> </table> @section Scripts{ <script src="~/Scripts/knockout-2.3.0.js"></script> <script src="~/Scripts/moment.min.js"></script> <script src="~/Scripts/typescript-list.js"></script> }
首先,我们看到 JSON 序列化了 Controller 传过来的 Model,然后用了一个 HTML Hidden 来保存。然后用 Knockout JS 的语法(请注意 <tbody> 中的 data-bind)来呈现数据,那么 Knockout JS 的数据源从哪里来呢?我们接着往下看。我们看到底部引用了一个 typescript-list.js ,进去瞧瞧。PS:typescript-list.js 这个 JS 文件并不是什么第三方 Javascript 库,完全可以把它改成 aaa.js 。另外那 2 个 JS 文件(knockout-2.3.0.js 和 moment.min.js)就是第三方库了。
4. 进入 typescript-list.js
找到 typescript-list.js 文件///<reference path="typings/jquery/jquery.d.ts" /> ///<reference path="typings/knockout/knockout.d.ts" /> var TaskDetails = (function () { function TaskDetails(id, title, details, starts, ends) { this.id = ko.observable(id); this.title = ko.observable(title); this.details = ko.observable(details); this.starts = ko.observable(moment(starts).format("MMM DD, YYYY h:mm:ss a")); this.ends = ko.observable(moment(ends).format("MMM DD, YYYY h:mm:ss a")); } return TaskDetails; })(); var TaskViewModel = (function () { function TaskViewModel() { this.tasks = ko.observableArray([]); } return TaskViewModel; })(); $(document).ready(function () { var serverData; serverData = JSON.parse($("#serverJSON").val()); var vm; var i; vm = new TaskViewModel(); for (i = 0; i < serverData.length; i++) { var serverTask; serverTask = serverData[i]; vm.tasks.push(new TaskDetails(serverTask.Id, serverTask.Title, serverTask.Details, serverTask.Starts, serverTask.Ends)); } ko.applyBindings(vm); }); //# sourceMappingURL=typescript-list.js.map
根据 TypeScript 的背景,我猜测这个 js 文件是编译后动态生成的,语言就是 TypeScript。果然,在目录 /Scripts 下,我找到了 typescript-list.ts。 扩展名是 ts,也就是去 TypeScript 的 2 个单词的首字母。我还注意到还有一个 typescript-list.js.map 文件,我猜应该也是由 TypeScript 动态生成的,下面我们进入 typescript-list.ts 瞧瞧。
typescript-list.js.map 内容如下:
{ "version":3, "file":"typescript-list.js", "sourceRoot":"", "sources":["typescript-list.ts"], "names":["TaskDetails","TaskDetails.constructor","TaskViewModel","TaskViewModel.constructor",""], "mappings":"AAAA,kDAAkD;AAClD,sDAAsD;AAEtD;IAOIA,qBAAYA,EAAUA,EAAEA,KAAaA,EAAEA,OAAeA,EAClDA,MAAcA,EAAEA,IAAYA;QAC5BC,IAAIA,CAACA,EAAEA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,EAAEA,CAACA,CAACA;QAC5BA,IAAIA,CAACA,KAAKA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,KAAKA,CAACA,CAACA;QAClCA,IAAIA,CAACA,OAAOA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,OAAOA,CAACA,CAACA;QACtCA,IAAIA,CAACA,MAAMA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,MAAMA,CAACA,MAAMA,CAACA,CAACA,MAAMA,CAACA,yBAAyBA,CAACA,CAACA,CAACA;QAC9EA,IAAIA,CAACA,IAAIA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,MAAMA,CAACA,IAAIA,CAACA,CAACA,MAAMA,CAACA,yBAAyBA,CAACA,CAACA,CAACA;IAC9EA,CAACA;IACLD;AAACA,CAAAA,IAAA;;AAED;IAEIE;QACIC,IAAIA,CAACA,KAAKA,GAAGA,EAAEA,CAACA,eAAeA,CAACA,EAAEA,CAACA,CAACA;IACxCA,CAACA;IACLD;AAACA,CAAAA,IAAA;;AAED,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;IACdE,IAAIA,UAAUA,CAAQA;IACtBA,UAAUA,GAAGA,IAAIA,CAACA,KAAKA,CAACA,CAACA,CAACA,aAAaA,CAACA,CAACA,GAAGA,CAACA,CAACA,CAACA,CAACA;IAChDA,IAAIA,EAAEA,CAAgBA;IACtBA,IAAIA,CAACA,CAASA;IACdA,EAAEA,GAAGA,IAAIA,aAAaA,CAACA,CAACA,CAACA;IACzBA,KAAKA,CAACA,GAAGA,CAACA,EAAEA,CAACA,GAAGA,UAAUA,CAACA,MAAMA,EAAEA,CAACA,EAAEA,CAAEA;QACpCA,IAAIA,UAAUA,CAAMA;QACpBA,UAAUA,GAAGA,UAAUA,CAACA,CAACA,CAACA,CAACA;QAC3BA,EAAEA,CAACA,KAAKA,CAACA,IAAIA,CAACA,IAAIA,WAAWA,CAACA,UAAUA,CAACA,EAAEA,EAAEA,UAAUA,CAACA,KAAKA,EAAEA,UAAUA,CAACA,OAAOA,EAAEA,UAAUA,CAACA,MAAMA,EAAEA,UAAUA,CAACA,IAAIA,CAACA,CAACA,CAACA;KAC3HA;IACDA,EAAEA,CAACA,aAAaA,CAACA,EAAEA,CAACA,CAACA;AACzBA,CAACA,CAAC,CAAC" }
看完,我们继续探索。
5. 进入 typescript-list.ts
找到 typescript-list.ts 文件。///<reference path="typings/jquery/jquery.d.ts" /> ///<reference path="typings/knockout/knockout.d.ts" /> class TaskDetails { id: KnockoutObservable<number>; title: KnockoutObservable<string>; details: KnockoutObservable<string>; starts: KnockoutObservable<string>; ends: KnockoutObservable<string>; constructor(id: number, title: string, details: string, starts: string, ends: string) { this.id = ko.observable(id); this.title = ko.observable(title); this.details = ko.observable(details); this.starts = ko.observable(moment(starts).format("MMM DD, YYYY h:mm:ss a")); this.ends = ko.observable(moment(ends).format("MMM DD, YYYY h:mm:ss a")); } } class TaskViewModel { public tasks: KnockoutObservableArray<TaskDetails>; constructor() { this.tasks = ko.observableArray([]); } } $(document).ready(function () { var serverData: any[]; serverData = JSON.parse($("#serverJSON").val()); var vm: TaskViewModel; var i: number; vm = new TaskViewModel(); for (i = 0; i < serverData.length; i++) { var serverTask: any; serverTask = serverData[i]; vm.tasks.push(new TaskDetails(serverTask.Id, serverTask.Title, serverTask.Details, serverTask.Starts, serverTask.Ends)); } ko.applyBindings(vm); });
请注意这 2 行代码:
///<reference path="typings/jquery/jquery.d.ts" /> ///<reference path="typings/knockout/knockout.d.ts" />
这个可能是由 TypeScript 官方提供的组件。
可参看网址:
用近似静态语言、强类型语言的TypeScript开发属于动态语言、弱类型语言的JavaScript
代码下载:https://github.com/dotnetcurry/typescript-ko-mvc
谢谢浏览!
相关文章推荐
- ASP.NET MVC 例子演示如何在 Knockout JS 的配合下,使用 TypeScript 。
- 在ASP.NET MVC 中,一个简单的例子让 URL 请求的 controller 和 action 小写
- ORM,ASP.NET中ORM学习,ASP.NET中ORM学习心得,WEB2.0中ORM实现原理,Asp.net简单ORM示例源码详细讲解,Asp.net2.0:如何使用ObjectDataSource(配合ORM )(二)
- ORM,ASP.NET中ORM学习,ASP.NET中ORM学习心得,WEB2.0中ORM实现原理,Asp.net简单ORM示例源码详细讲解,Asp.net2.0:如何使用ObjectDataSource(配合ORM )
- [转:Pro ASP.NET MVC 5中的例子]使用MVC4,Ninject,EF,Moq,构建一个真实的应用电子商务SportsStore
- 使用ASP.NET MVC 4 创建一个简单的应用程序
- ASP.NET MVC 3 中 WebMail 使用的简单例子
- 【翻译】使用ASP.NET MVC 和LINQ建立一个简单的博客 - Part 3
- 【翻译】使用ASP.NET MVC 和LINQ建立一个简单的博客 - Part 2
- Spring.Net在ASP.NET Mvc里使用的一个小例子
- 使用Asp.net mvc + Linq + mvc_scaffold_gen_setup.exe 生成一个完整的家庭帐册大管家程序 之二
- 使用ArcGIS Server和ASP.net建立一个简单的网站
- 如何使用谷歌的自定义搜索引擎来搜寻一个ASP.NET网站
- 使用C# Builder建一个简单的ASP.NET应用程序
- ASP.NET MVC Tip #17 – 如何运行一个ASP.NET MVC应用程序
- 如何使用谷歌的自定义搜索引擎来搜寻一个ASP.NET网站
- 如何使用谷歌的自定义搜索引擎来搜寻一个ASP.NET网站【转】
- 如何同一时间一个帐号只有一个用户使用?(asp.net)
- 如何使用asp.net中的控件将一个图片文件从一个目录传到另外一个目录下?
- asp.net中使用ajax简单例子