Teamvideo Video video playback website developed by Asp.net MVC 2.0 + Silverlight player-Series 3

This series should have been completed. Sorry, recent discomfort has delayed the process ...........

PreviousArticle:

Teamvideo Video video playback website developed by Asp.net MVC 2.0 + Silverlight player-Series 1

Teamvideo Video video playback website developed by Asp.net MVC 2.0 + Silverlight player-Series 2

  

There were a few friends who wantedSource codeI uploaded it to codeplex. You can download the latestCode... (Currently, no version is released, so you can only download the code of the latest development version ).

Http://temvideos.codeplex.com/SourceControl/list/changesets

 

The project homepage has not been updated yet, but some introductions are simply added:

If you have time to complete this project together, please join ...... You can leave a message for me ..

  

The night before, I drew a video management page:

 

The ADD and modify video page is as follows:

 

I prefer to draw all the functions simply after I want to understand the functions. Maybe it is easier for me to accept the graphics. The following benefits:

When writing code, you don't need to look at a bunch of text to find the function. Instead, you can write every function as shown in the figure.

  

There are not many things worth noting in the management of meager resources. I am going to share the following content with you:

1. The paging display record function implemented by Ajax.
2. Share a website generated by Ajax load images.
3. After the database is restored, You need to modify the content and pay attention to it.

The paging display record function implemented by Ajax

Idea: there will be two images on the page. One is to flip the page forward and the other is to flip the page backward. When you click the image, use the Ajax post function of jquery to send a page number to the server, for example, if the page number returned after clicking is 4, the server will use the page to determine which records should be returned to the client, and then build an HTML template using code, after the HTML is spelled out, the client clears a table and displays the returned HTML as the table body.

 

Specific implementation process:

Add the following code to videomanagercontroller to load the index page.

 

Add two images on the view page, which respectively indicate turning the pages forward or backward:

HTML code:

<IMGSRC="Http://images.cnblogs.com/prev.ico"ID="Prev"Class="NAV" />

< IMG SRC = " Http://images.cnblogs.com/next.ico " ID = " Next " Class = " NAV "   / >

When the default page is loaded, I will write the current page in JavaScript to 0, that is, pageindex = 0. If you click the button to flip the page backward, pageindex will be + 1;

Note that when pageindex is 0 or the maximum number of pages, no data interaction occurs when you click "front page" or "back page.

  

How many pages can the current record be divided into? Use a hidden input to store it:

< Input Type = " Hidden " ID = " Pagecount " Value =' <% = (Math . Ceiling ( New   Mediaentities () . Videos . Count () / 5 . 0 ))   %> '   / >

How can I control whether the page tumble exceeds the maximum or minimum value?

This is mainly done by judging the value of pageindex. If it is already 0, we will directly return and no code will be executed. The maximum number of pages is the same.

  

After clicking the page flip image and executing the above JavaScript, I began to send a POST request to the server:

$ ( ' # Loader ' ) . Html ( "   Src = 'images/ajax-loader.gif '/> " ) . CSS ( ' Width ' ,   ' 50 ' ) ;

$.Ajax({ Type: 'Post',

URL: 'Videomanager/Getdata',

Data :   {   Pageindex :   $ ( ' # Pageindex ' ) . Val ( )   } ,

success : function ( data ) {

$('# Emptable Tbody').Html(Data);

$ ( ' # Loader ' ) . Html ( ' ' ) . CSS ( ' Background - Color ' ,   ' White ' ) ;

} });

The request sent to the server is mainly post a previous pageindex. After a successful request, the returned data is the body content with the ID of emptable. In this way, the format is generated to the server ......

  

 

 

The following code completes the getdata method:

 

Share an Ajax load image generated website

The final effect of the above page is as follows:

As you can see, before binding data to a table, we will display an Ajax-loading chart, which is already quite common. This is common for all websites,

I will show you how to get this image:

Http://www.ajaxload.info/#preview

Yes, you don't need to design GIF images. You can use this website to automatically generate various loading images you like:

You can select the animation color and background color .... Hope to be useful to you ....

 

After the database is restored, You need to modify the content and pay attention to it.

If youHttp://temvideos.codeplex.com/After downloading the source code, you need to modify the URL value of the video table in the database:

 

Cheers

Nic