TodoList开发笔记

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">&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自己手动写这些会有多痛苦。