Use ASP. NET MVC3 + EF + Jquery to create a text live broadcast system (4) -- complete

 

In the previous article, I was planning to end it. I had to separate it when I encountered a small problem.

 

In this article, we complete the final work and display the data on the page. I return JSON data, so first write a JsonHelper class.

 

Create a Tool folder in the LiveText. WebUI project and a JsonHelper class in this folder. The Code is as follows:

 

Public static class JsonHelper

{

/// <Summary>

/// Json serialization

/// </Summary>

/// <Param name = "value"> </param>

/// <Returns> </returns>

Public static string JsonSerializer (this object value)

{

JavaScriptSerializer s = new JavaScriptSerializer ();

Return s. Serialize (value );

}

} Then we create a general processing program and name it GetInfoList. ashx. On the front-end page, we initiate an AJAX request to return JSON data.

 

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;

}

}

} In the above code, I killed the program for convenience and only obtained the text titled "campus text live. Of course, you have to create a title for "campus text live" in the background and place it in a category. I have already put all the data in the database and will be able to see the effect of the program running in a moment.

 

Now let's finish the front-end stuff. We need to modify the Index. cshtml under the Views consumer Home.

 

Add the following code to the Body:

 

<Div id = "container">

<Div id = "live">

<Ul>

</Ul>

</Div>

</Div>

Then add some 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>

In the introduction of two JS files, 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>

Just write the JS Code:

 

<Script type = "text/javascript">

$ (Function (){

Init ();

SetInterval ("dyval ()", 10000 );

});

 

// Initial

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 ['update']);

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 ['content'] + '</span> <span class = "timespan"> [';

Html + = mydate. pattern ("HH: mm: ss") + '] </span> </p> </li> ';

$ ("# Live ul"). append (html );

});

}

}

});

}

 

Function dyevery (){

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 ['update']);

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 ['content'] + '</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>

Let's take a look at the running effect:

 

 

 

So far, it is complete. Program source code: http://files.cnblogs.com/nianming/LiveText20101025.rar

Author: Tian Nian-Ming