使用ASP.NET MVC3+EF+Jquery製作文字直播系統（四）——完成篇

在上一篇中本來打算結束的，最後遇到點小問題，不得不分開，廢話少說，開始吧。

這一篇中，我們完成最後的工作，在頁面中顯示資料。我返回的是JSON資料，所以首先寫一個JsonHelper類。

在LiveText.WebUI項目裡建立一個Tool檔案夾，在這個檔案夾裡建立一個JsonHelper類。代碼如下：

public static class JsonHelper{    /// <summary>    /// Json序列化    /// </summary>    /// <param name="value"></param>    /// <returns></returns>    public static string JsonSerializer(this object value)    {        JavaScriptSerializer s = new JavaScriptSerializer();        return s.Serialize(value);    }}

然後我們在建立一個一般處理常式，就命名為GetInfoList.ashx吧。在前台頁面，我們對它發起AJAX請求，返回JSON資料。

public class GetInfoList : IHttpHandler{    public void ProcessRequest(HttpContext context)    {        context.Response.ContentType = "text/plain";        LiveTextDbContext dbContext = new LiveTextDbContext();        var list = from t in dbContext.Texts.Where(t => t.Title.Name == "校慶文字直播")                   select new                   {                       t.Prolocutor,                       t.ProContent,                       t.ProDate                   };        string data = list.JsonSerializer();        context.Response.ContentType = "application/json";        context.Response.Write(data);        context.Response.Flush();        context.Response.End();    }    public bool IsReusable    {        get        {            return false;        }    }}

我在上面的代碼中為了方便將程式寫死了，只取得標題為“校慶文字直播”的文字。當然，你得在後台建立一個“校慶文字直播”的標題，將它放在一個類別裡面。我已經將資料都放在資料庫裡面了，一會就可以看到程式啟動並執行效果了。

下面我們就完成前台的東西吧。我們需要修改的就是Views➤Home下面的Index.cshtml。

在Body裡面加上下面代碼即可：

    <div id="container">        <div id="live">            <ul>            </ul>        </div>    </div>

然後加點CSS

 

    <style type="text/css">        div#container        {            width: 770px;            margin-left: auto;            margin-right: auto;        }        div#live        {            width: 100%;        }        div#live ul        {            list-style: none;        }        div#live ul li        {            padding-bottom: 19px;        }        div#live ul li p        {            margin-top: 0;            margin-bottom: 0;        }        div#live .evenlibackcolor        {            background-color: #F5F5F5;        }        div#live .oddlibackcolor        {            background-color: #FFF;        }        div#live .namespan        {            color: #E211A5;        }        div#live .timespan        {            font-size: small;            color: #AAA;            margin-left: 10px;        }    </style>

在引入兩個JS檔案，DateFormate.js的：http://files.cnblogs.com/nianming/DateFormat.js

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/DateFormat.js")" type="text/javascript"></script>

在寫一下JS代碼就搞定了：

    <script type="text/javascript">        $(function () {            init();            setInterval("dyoper()", 10000);        });        //初始        function init() {            var noCache = new Date();            $.ajax({                type: 'post',                url: '/Models/GetInfoList.ashx?m=' + Date(),                data: {},                success: function (data) {                    if (data != null) {                        jQuery.each(data, function (entryIndex, entry) {                            var mydate = ConvertJSONDateToJSDateObject(entry['ProDate']);                            var html = '';                            if (entryIndex % 2 == 0) {                                html = '<li class="evenlibackcolor"><p><span class="namespan">[';                            }                            else {                                html = '<li class="oddlibackcolor"><p><span class="namespan">[';                            }                            html += entry['Prolocutor'] + ']：</span><span>';                            html += entry['ProContent'] + '</span><span class="timespan">[';                            html += mydate.pattern("HH:mm:ss") + ']</span></p></li>';                            $("#live ul").append(html);                        });                    }                }            });        }        function dyoper() {            var noCache = new Date();            $.ajax({                type: 'post',                url: '/Models/GetInfoList.ashx?m=' + Date(),                data: {},                success: function (data) {                    if (data != null) {                        $("#live ul>li").remove();                        jQuery.each(data, function (entryIndex, entry) {                            var mydate = ConvertJSONDateToJSDateObject(entry['ProDate']);                            var html = '';                            if (entryIndex % 2 == 0) {                                html = '<li class="evenlibackcolor"><p><span class="namespan">[';                            }                            else {                                html = '<li class="oddlibackcolor"><p><span class="namespan">[';                            }                            html += entry['Prolocutor'] + ']：</span><span>';                            html += entry['ProContent'] + '</span><span class="timespan">[';                            html += mydate.pattern("HH:mm:ss") + ']</span></p></li>';                            $("#live ul").append(html);                        });                    }                }            });        }        function ConvertJSONDateToJSDateObject(JSONDateString) {            var date = new Date(parseInt(JSONDateString.replace("/Date(", "").replace(")/", ""), 10));            return date;        }    </script>

下面看一下運行效果吧：

至此，就完成了。程式原始碼：http://files.cnblogs.com/nianming/LiveText20101025.rar

最後我想謝謝大家，對“我是否需要參加培訓？”給我提出的寶貴意見，謝謝！！！