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.CodeAs follows:

 
Public static classJsonhelper{/// <Summary> ///JSON serialization/// </Summary> /// <Param name = "value"> </param> /// <returns> </returns>Public static stringJsonserializer (This objectValue ){JavascriptserializerS =NewJavascriptserializer();ReturnS. serialize (value );}}
 

Then we create a general processingProgramName 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 = "School celebration text live" ) 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, to facilitate writing the program to death, I only get the text titled "school celebration 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:

<DivID= "Container"> <DivID= "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 ( "Dymtr ()" , 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 [ '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 [ 'Content' ] + '</Span> <SPAN class = "timespan"> [' ; HTML + = mydate. pattern ( "HH: mm: SS" ) +'] </Span> </P> </LI>' ; $ ( "# Live ul" ). Append (HTML );});}}});} Function Dymtr (){ 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 [ '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. ProgramSource code: Http://files.cnblogs.com/nianming/LiveText20101025.rar

Finally, I would like to thank you for saying, "Do I need to attend the training ?" Thank you for your comments !!!