用MVC做可拖拽的留言板，利用 Jquery模板 -- JsRender

本文主要記錄 JsRender模板 的使用

1. 表結構
2. 界面樣式
3. 讓div可拖拽
4. 數據綁定
5. 使用模板 JsRender
6. Controller代碼

先看看效果圖，演示地址：http://www.5imvc.com/  新域名綁定啦，備用地址：http://linfei721.s5.jutuo.net/Home

其實實現div拖拽利用jQueryUI做很簡單，呵呵，本文主要介紹怎么使用 JsRender 做模板

表結構

CREATE TABLE [dbo].[MyNote](
    [ID] [int] IDENTITY(1,1) NOT NULL,    --編號
    [NContent] [varchar](max) NOT NULL,    --留言內容
    [IP] [varchar](50) NULL,            --發布者IP
    [Date] [datetime] NOT NULL,            --留言時間
 CONSTRAINT [PK_MyNote] PRIMARY KEY CLUSTERED 
(
    [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

界面樣式和div

    <style>
        .draggable {
            width: 200px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
            border: 1px solid #ccc;
            background: #fafafa;
            position: relative;
        }

            .draggable .title {
                cursor: move;
                padding: 5px;
                background: #ccc;
                color: #fff;
            }

            .draggable .date {
                position: absolute;
                left: 15px;
                bottom: 5px;
            }
    </style>

<div class="contentbox" id="containment-wrapper" style="height: 100%;">
        <div class="draggable">
            <div class="title">title</div>
            內容
            <div class="date">2013-05-01</div>
        </div>
</div>

如何讓div可以拖動

先利用jQueryUI的draggable方法讓我們的div可以拖拽，詳細請看：http://jqueryui.com/draggable/，代碼：

//讓div可以拖拽
$(".draggable").draggable({
    containment: "#containment-wrapper", scroll: false,
    start: function (e, ui) {
        $(".draggable").zIndex("");
        $(this).zIndex(1000);
    }
});

//阻止文本被選中
$(".contentcontainer").disableSelection();

這里在拖拽的事件中增加了一個 start，所有小紙條的zIndex等於空，然后在對當前拖拽的div增加到最上層，這樣防止拖拽時被其他div遮擋

containment 的參數是讓所有小紙條在制定的div內部

數據綁定

最后考慮怎么綁定數據，可以用mvc的機制，代碼如下：

<div class="contentbox" id="containment-wrapper" style="height: 100%;">
        @foreach (var item in Model)
        {
            <div class="draggable">
                <div class="title">title</div>
                @item.NContent
            <div class="date">@item.Date</div>
            </div>
        }
    </div>

但是這樣不友好，我需要用無刷新的方式來實現，但是通常我們做法是字符串拼接來生成一個html的字符串

$.post("@Url.Action("NoteList")", function (data) {
         var html = "";
         $(data).each(function (index, e) {
              html += "<div class='draggable'><div class='title'>title</div>" + e.NContent + "......";
         });
},"json");

這樣代碼不好維護，使用也不方便，所以我們可以使用 jQuery模板來實現，其實網上有很多種，我找了一個叫 JsRender 的，

使用JsRender模板

詳細請看：https://github.com/BorisMoore/jsrender ，里面很多案例

下面來看看代碼 ，先需要定義個模板，看看代碼是不是簡單清晰多了，呵呵

<script src="~/Scripts/jsrender.js"></script>

<script id="Template" type="text/x-jsrender">
    <div class="draggable" style="top: {{attr: top}}px; left: {{attr:left }}px;">
        <div class="title">NO：{{:#index+1}}</div>
        {{:NContent}} 
        <div class="date">{{:Date}}</div>
    </div>
</script>

用{{:變量}}或{{>變量}}來顯示數據 ，: 和 >的區別在於 轉義html， : 會直接顯示包括html代碼，>是會將html轉義

{{attr:變量}}表示這是屬性值，其實還有很多方法，大家可以去官網看看，例如 if for 等等

這里的 {{attr:top}} Visual Studio 會提示警告，但是並不影響我們的模板

再來看看綁定的代碼，就這么一句話，直接把json的數據傳給模板就能生成了

$.post("@Url.Action("NoteList")", function (data) {
      $("#containment-wrapper").html($("#Template").render(data));
},"json");

Controller 代碼

前端的代碼就寫完了，再來看看 Controller 的代碼

　　　　　/// <summary>
        /// 獲取留言列表
        /// </summary>
        /// <returns></returns>
        public ActionResult NoteList()
        {
            //獲取留言前100條
            var list = db.MyNote.OrderByDescending(o => o.Date).Take(100).ToList();

            int count = list.Count;

            List<object> pos = new List<object>();

            Random ra = new Random();

            //生成每個div隨機偏移坐標，打亂div的位置
            var top = Enumerable.Range(1, count).Select(s => ra.Next(-20, 30)).ToList();
            var left = Enumerable.Range(1, count).Select(s => ra.Next(-20, 30)).ToList();

            //增加到集合
            for (int i = 0; i < count; i++)
            {
                pos.Add(new { top = top[i], left = left[i], NContent = list[i].NContent, Date = list[i].Date });
            }

            return JsonDate(pos);
            //return Json(pos, JsonRequestBehavior.AllowGet);
        }

這里有兩點需要注意，

1.top和left變量，在循環或大量需要調用linq的時候，一定要使用ToList()方法存儲到變量中，不要在使用時去ToList()，在循環內部去ToList()效率會非常低，之前吃過虧，呵呵

2.MVC中Controller的Json方法返回帶時間的數據時，格式會變成 "\/Date(1369419656217)\/" 這樣的，這里的 JsonDate 方法請看我的這個帖子：http://www.cnblogs.com/linfei721/archive/2013/05/25/3098614.html

好了，寫完了，有什么不對的地方希望大家提出來哦