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

Source: Internet
Author: User
Tags dateformat

 

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.