<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0"> <title> Learninghard SPA Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div> <div> <div> <p>简单任务管理系统</p> </div> <div> <ul> <li><a href="https://www.jb51.net/">主页</a></li> </ul> </div> </div> </div> <div> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - Learninghard SPA Application</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/knockout") @Scripts.Render("~/bundles/app") </body> </html> Index页面代码如下： @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <div data-bind="if:canCreate"> <h2>Tasks</h2> <div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>描述</th> <th>负责人</th> <th>创建时间</th> <th>完成时间</th> <th>状态</th> <th></th> </tr> </thead> <tbody data-bind="foreach:tasks"> <tr> <td data-bind="text: id"></td> <td><a data-bind="text: name, click: handleCreateOrUpdate"></a></td> <td data-bind="text: description"></td> <td data-bind="text: owner"></td> <td data-bind="text: creationTime"></td> <td data-bind="text: finishTime"></td> <td data-bind="text: state"></td> <td><a data-bind="click:remove" href="javascript:void(0)">Remove</a></td> </tr> </tbody> </table> </div> <div> <a href="javascript:void(0)" data-bind="click: function(data, event){ setTaskList('all') }">All </a> | <a href="javascript:void(0)" data-bind="click: function(data, event){ setTaskList('active') }"> Active</a> | <a href="javascript:void(0)" data-bind="click: function(data, event){ setTaskList('completed') }"> Completed</a> </div> <div> <a href="javascript:void(0)" data-bind="click: handleCreateOrUpdate">添加任务</a> </div> </div> <div> <h2>添加任务</h2> <br/> <div> <div> <label for="taskName">名称 *</label> <div> <input type="text" data-bind="value: name" placeholder="名称"> </div> </div> <div> <label for="taskDesc">描述</label> <div> <textarea data-bind="value: description" rows="3" placeholder="描述"></textarea> </div> </div> <div> <label for="taskOwner">负责人 *</label> <div> <input data-bind="value: owner" placeholder="负责人"> </div> </div> <div> <label for="taskFinish">预计完成时间 *</label> <div> <input data-bind="value: finishTime"> </div> </div> <div> <label for="taskOwner">状态 *</label> <div> <select data-bind="value: state"> <option>Active</option> <option>Completed</option> </select> </div> </div> <div> <div> <button data-bind="click:handleSaveClick">Save</button> <button data-bind="click: handleBackClick">Back</button> </div> </div> </div> </div>
8. 创建对应的前端脚本逻辑。用JS代码来请求数据，并创建对应ViewModel对象来进行前端绑定。具体JS实现代码如下：
var taskListViewModel = { tasks: ko.observableArray(), canCreate:ko.observable(true) }; var taskModel = function () { this.id = 0; this.name = ko.observable(); this.description = ko.observable(); this.finishTime = ko.observable(); this.owner = ko.observable(); this.state = ko.observable(); this.fromJS = function(data) { this.id = data.id; this.name(data.name); this.description(data.description); this.finishTime(data.finishTime); this.owner(data.owner); this.state(data.state); }; }; function getAllTasks() { sendAjaxRequest("GET", function (data) { taskListViewModel.tasks.removeAll(); for (var i = 0; i < data.length; i++) { taskListViewModel.tasks.push(data[i]); } }, 'GetByState', { 'state': 'all' }); } function setTaskList(state) { sendAjaxRequest("GET", function(data) { taskListViewModel.tasks.removeAll(); for (var i = 0; i < data.length; i++) { taskListViewModel.tasks.push(data[i]); }},'GetByState',{ 'state': state }); } function remove(item) { sendAjaxRequest("DELETE", function () { getAllTasks(); }, item.id); } var task = new taskModel(); function handleCreateOrUpdate(item) { task.fromJS(item); initDatePicker(); taskListViewModel.canCreate(false); $('#create').css('visibility', 'visible'); } function handleBackClick() { taskListViewModel.canCreate(true); $('#create').css('visibility', 'hidden'); } function handleSaveClick(item) { if (item.id == undefined) { sendAjaxRequest("POST", function (newItem) { //newitem是返回的对象。 taskListViewModel.tasks.push(newItem); }, null, { name: item.name, description: item.description, finishTime: item.finishTime, owner: item.owner, state: item.state }); } else { sendAjaxRequest("PUT", function () { getAllTasks(); }, null, { id:item.id, name: item.name, description: item.description, finishTime: item.finishTime, owner: item.owner, state: item.state }); } taskListViewModel.canCreate(true); $('#create').css('visibility', 'hidden'); } function sendAjaxRequest(httpMethod, callback, url, reqData) { $.ajax("/api/tasks" + (url ? "https://www.jb51.net/" + url : ""), { type: httpMethod, success: callback, data: reqData }); } var initDatePicker = function() { $('#create .datepicker').datepicker({ autoclose: true }); }; $('.nav').on('click', 'li', function() { $('.nav li.active').removeClass('active'); $(this).addClass('active'); }); $(document).ready(function () { getAllTasks(); // 使用KnockoutJs进行绑定 ko.applyBindings(taskListViewModel, $('#list').get(0)); ko.applyBindings(task, $('#create').get(0)); });
到此，我们的单页面程序就开发完毕了，接下来我们来运行看看其效果。
