TodoList开发笔记

本节开始对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">&times;</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 ...

随机推荐

无插件，直接加参数，chrome它可以模拟手机浏览器
在目标出现,加上一些参数即可:--user-agent="mozilla/5.0 (linux; u; android 2.3.3; en-us; sdk build/ gri34) app ...
P90
#include<stdio.h> #define N 4 int fun(int a[][N]) { int i,j,max=a[0][0]; for(i=0;i<2;i++) f ...
web富客户端应用下，前端架构问题。
前言: 以前的工作大部分都是,前端做页面稍微写几个js效果就算是有复杂的效果也没有涉及到需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前 ...
sql小总结2
SQL NULL 值如果表中的某个列是可选的,那么我们可以在不向该列添加值的情况下插入新记录或更新已有的记录.这意味着该字段将以 NULL 值保存. NULL 值的处理方式与其他值不同. NULL ...
Android第一次打开应用程序，实现向导界面
转载请注明出处,谢谢http://blog.csdn.net/harryweasley/article/details/42079167 先说下思路:1.利用Preference存储数据,来记录是否是 ...
Thinking in UML 学习笔记（四）——UML活动图来看核心
在UML活动图的性质是一个流程图,它需要描述为完成活动的特定目标的描述来完成,这些交互运行顺序. UML有两个级别的活动图,的用例场景的叙述性描述,还有的对象用来描述交互的描述. 工具.它不是我们的分 ...
C#中利用双缓冲技术解决绘图闪屏问题。
这段时间在做一个小型游戏,在界面显示的时候用到了一些图形.一开始涉及到的图形全都用控件的背景图片代替了.这样游戏运行的时候存在的一个很大的问题是游戏运行很慢.小组成员费尽周折,即将放弃,每一个成员都愁 ...
Java EE (1) -- Java EE 6 Web Component Developer Certified Expert(1z0-899)
1: hash map, hash tables 的区别 The HashMap class is roughly equivalent to Hashtable, except that it is ...
【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离
原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...
Reactive Extensions（Rx）并发浅析
Reactive Extensions(Rx)并发浅析 iSun Design & Code .Net并行编程 - Reactive Extensions(Rx)并发浅析关于Reactive ...

TodoList开发笔记 – Part Ⅲ

TodoList开发笔记 – Part Ⅲ的更多相关文章

随机推荐

热门专题