使用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">
$(func
补充:Web开发 , ASP.Net ,