TodoList开发笔记 – Part Ⅲ
本节开始对TodoList项目的客户端进行开发
一.初步了解JQuery
其实我在学校时有接触过一段时间的Web开发，虽然代码量不多也不复杂，但也已经感受到了各浏览器对Web各项标准的恶意，Web界对当时的我来讲，就是贵圈太乱，一个标准出来得磨掉好多事，特别是JavaScript这种极其灵活的语言，到不同人不同浏览器手里差别太大了。
这几年不一样了，互联网火了，技术也推进了，首当其冲就是JQuery的出现，解放你我他啊。
简单来说JQuery就是一个类库，提供各种便捷的方法操作DOM、Javascript对象等等等。而且它能极大的保证各浏览器下的兼容性，只要是通过JQuery对象调用的方法，那么差异性基本是没有的。程序员是这么一群生物，解决问题大多数时候都是引入一个间接层。
类库相比框架，对代码的限制就少很多，这么多年下来JQuery也证明了它是经得起考验的，现在MVC项目默认都引用了它。
二.初步了解Bootstrap
其实我发觉Web的发展越来越跟桌面软件有点像了，也开始出现各种UIToolkit，Bootstrap就是其中的佼佼者了，也是经过考验后被加入MVC默认项目里了。
Bootstrap拥有不少美观的UI组件，从按钮、工具提示、输入组到模式窗口Modal应有尽有，CSS样式也写得简单易懂，非常方便修改。
三.界面设计
说了这么多可以开始扯界面了，下面是我仿造后的效果图，好像字体大了点
下面是CSHTML代码（Razor视图文件）
@{
Layout = null;
} <head>
<title>TodoList</title> <script>
// window.resizeTo(300, 600);
</script>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap") <script src="../../Scripts/bootstrap-select.js"></script>
<script src="../../Scripts/jquery.form.js"></script>
<script src="../../Scripts/Views/Index.js"></script>
<link rel="stylesheet" type="text/css" href="../../Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../../Content/bootstrap-select.css" />
<link rel="stylesheet" type="text/css" href="../../Content/Views/Index.css" />
</head> <body>
@{
var catalogs = ViewBag._todoCatalog;
foreach (var catalog in catalogs)
{
<div class="div_catalog">
<!--归类名称-->
<div data-catalogid="@catalog.CatalogId" class="div_catalogName">
@catalog.CatalogName
<button class="btn_Add"></button>
@{
var count = catalog.Events.Count;
<!--归类下事项总数-->
<strong class="strong_eventCount">
(@count)
</strong>
}
</div> @foreach (TodoEvent todo in catalog.Events.Values)
{
<div class="div_todoevent">
<div class="div_todoSummary">
<button class="btn_Completed"></button>
@if (todo.Completed)
{
<button class="btn_DeleteEvent"></button>
} <div data-eventid="@todo.EventId"
data-catalogid="@todo.CatalogId"
data-remark="@todo.Remark"
data-index="@todo.Index"
data-remindtime="@todo.RemindTime"
data-createdatetime="@todo.CreateDateTime"
data-summary="@todo.Summary"
data-location="@todo.Location"
data-completed="@(todo.Completed ? "true" : "false")"
class="@(todo.Completed ? "div_CompletedSummary" : "div_DefaultSummary")">
@todo.Summary
</div>
</div>
</div>
}
</div>
} <input type="text" id="NewCatalog" class="input_Catalog" placeholder="NewCatalog..." />
}
</body> <!-- 代办事项编辑窗口,平时隐藏 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="form_TodoEvent" method="post">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">想做点什么......</h4>
</div> <div class="modal-body">
<input id="eventid" name="eventid" type="text" style="visibility:hidden;" />
<input id="catalogid" name="catalogid" type="text" style="visibility:hidden;" /> <div class="input-group">
<span class="input-group-addon">主题</span>
<input id="summary" name="summary" type="text" class="form-control" placeholder="做点什么......">
<a href="#" id="tip_Summary" style="visibility:hidden;float:right;margin-top:-20px" rel="popover" data-content="不知道干嘛？" ></a>
</div>
<br /> <div class="input-group">
<span class="input-group-addon">地点</span>
<input id="location" name="location" type="text" class="form-control" placeholder="在哪里......">
</div>
<br /> <div class="input-group">
<span class="input-group-addon">备注</span>
<input id="remark" name="remark" type="text" class="form-control" placeholder="别忘了......">
</div>
<br /> </div>
<br /> <div class="modal-footer">
<button id="btn_CancelEdit" type="button" class="btn btn-default" data-dismiss="modal">算了吧</button>
<button id="btn_SaveEvent" type="button" class="btn btn-primary">帮我记住吧</button>
</div>
</div>
</form>
</div>
</div>这里大量采用了HTML5新增的属性 data-AttributeName，因为模型数据要绑定在HTML元素上，实在想不到有比这个更简单的方式了。
四.脚本编写
因为是单页应用所以脚本比较集中，大部分是提交请求接收结果然后更新界面元素，我只贴两个关键的代码
第一个是JQuery提交表单
var form = $('#form_TodoEvent');
$.ajax({
url: '/TodoList/SaveEvent',
cache: false,
async: true,
type: "POST",
data: form.serialize(),
error: function (message) { alert(message); },
success: function (result) { EventSaved(result); }
});第二个是JQuery提交Json数据
//更新代办事项是否已完成
$.ajax({
url: '/TodoList/UpdateCompleted',
async: true,
type: "POST",
data: { "eventId": eventid, "completed": completed },
success: function (result) { }
});这样就完成了客户端与服务端的交互，后台的代码其实很简单，就是定义一系列Action去接收Ajax提交的数据，然后就爱干嘛干嘛啦。
注意result是我定义的一个消息实体，用来传递数据的。
其它的脚本大部分都是些更改界面的代码，大部分都很繁琐，真不敢想象没有JQuery自己手动写这些会有多痛苦。
TodoList开发笔记 – Part Ⅲ的更多相关文章
- TodoList开发笔记 – Part Ⅳ
跌跌撞撞总算是把客户端开发好了,后台的代码因为不复杂,就写了些单元测试跑一跑就算通过了,大部分时间都是在调整脚本. 这一节开始部署TodoList项目. 一.了解IIS(Internet Infoma ...
- TodoList开发笔记 – Part Ⅱ
上一节给出了应用的两个主要UML类图,应用采用的技术也给出了,这一节开始实际设计编码 一.应用公开的方法 其实就几个的方法而已 1.代办事项的CRUD 2.代办事项归类目录的CRUD 3.代表事项“已 ...
- TodoList开发笔记 – PartⅠ
做了一年多的桌面软件,最近开始转向Web方面的开发,既然比较熟悉Net那么首当其冲就是学习ASP.Net,以及HTML.CSS.Javascript. 为了检验这个把星期来的学习成果,着手做了一个To ...
- [开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自：酷小孩】
原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目 ...
- EasyUI 开发笔记(二)
接上篇 :EasyUI 开发笔记(一) (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...
- EasyUI 开发笔记(一)
由于某些原因,在公司做的后台需要改成类似于Ext.js 形式的后台,主要看好其中的 框架布局,以及tab开页面和弹出式内部窗体. 后来看看,改成EasyUI,较Ext.js 库小很多,也便于公司的初级 ...
- [Openwrt 项目开发笔记]：Openwrt平台搭建（一）
[Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...
- Android移动APP开发笔记——Cordova（PhoneGap）通过CordovaPlugin插件调用 Activity 实例
引言 Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用 ...
- Android移动APP开发笔记——最新版Cordova 5.3.1（PhoneGap）搭建开发环境
引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...
随机推荐
- JavaEE(9) - Session EJB的生命周期、事务及拦截器
1. SessionBean的生命周期 无状态Session Bean: 不存在状态-->待命状态-->被销毁状态 不存在状态-->待命状态: 1)通过构造器创建EJB实例 2)执行 ...
- hibernate set的3属性
inverse 属性 在hibernate通过对 inverse 和表之间的关系. inverse = false 的为主动方,inverse = true 的为被动方, 由主动方负责维护关联关系 在 ...
- 5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle该项目的开发——使用datagrid做报表
来点需要:我使用的数据库访问EF框架,但是,因为使用一个动态表来的统计报告中.单独是每天产生基于数据表,它是很难使用EF加盟前.所以我包装在两组数据库存取层的框内,一个是EF,一种是传统的ADO.NE ...
- jQuery Easy UI Accordion(可伸缩的面板)包
Accordion 可伸缩的面板组件.基于panel,示为以下的比率: <!doctype html> <html lang="en"> <head& ...
- uva 1534 - Taekwondo(dp+馋)
题目连接:uva 1534 - Taekwondo 题目大意:有两组什么东西,题目背景有点忘记了,就是给出两组数,两组个数分别为n,m,要求找出min(n,m)对数.每一个数最多最多选一次,使得这mi ...
- 基于GruntJS前端性能优化
在本文中,如何使用GruntJS为了使治疗简单的前端性能优化自己主动,我写了一个完整的样本放在Github上.能够參考一下.关于Yahoo的前端优化规则请參考:Best Practices for S ...
- 采用jquery的imgAreaSelect样品图像裁剪示范插件实现
将用户上传的图片进行裁剪再保存是如今web2.0应用中经常处理的工作,如今借助jquery的imgareaselect插件再配合PHP的GD库就能够轻松的实现这个在曾经来说很棘手的功能. 我们来看看它 ...
- 【Android工具】DES终结者加密时报——AES加密演算法
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 在前面的两篇文章中.我们介绍了DES算法,3DES算法以及他们的Android程序实现,并研究了怎样才干实现 ...
- [mysql]刷新windows恢复后mysql和"Access denied for user'root'@'IP'"处理问题
mysql数据库软件实际上是绿色的,重装系统后能够继续使用. 1.重装系统保留原有的后mysql安装文件夹,数据文件夹. 2.制作用于启动一个批处理文件mysql:[run.bat]的文件存储在mys ...
- Swift的笔记和参考
原文:Swift的笔记和参考 好久没来了,趁着新语言Swift发布,继续钻研中! Create Class 创建类 (多态效果) // Create Class 创建类 class MyClass { ...