我们会经常遇到这样一种效果:先在页面上显示“loading”或者一个圆圈在那转,过几秒钟,会在上述两个地方显示出新闻的列表。下面的内容就是关于这种效果的实现。
1、前态页面 Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<%@ Register TagPrefix="UC1" TagName="TopBar" Src="UserControl/TopBar.ascx"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script language="javascript" src="JS/ReadNewInfo.js"></script>
<title>首页</title>
</head>
<body onload="Page_init();">
<form id="form1" runat="server">
<div><UC1:TopBar id="TopBar1" runat="server"></UC1:TopBar>
</div>
<div class="post">
<div class="postTitle">
<a id="viewpost1_TitleUrl" href="#">新闻主题列表</a>
</div>
<div class="postText" id="ShowTitleList"><center><br/><br/><br/><img src='Images/loading.gif' /></center></div>
</div>
</form>
</body>
</html>
<%@ Register TagPrefix="UC1" TagName="TopBar" Src="UserControl/TopBar.ascx"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script language="javascript" src="JS/ReadNewInfo.js"></script>
<title>首页</title>
</head>
<body onload="Page_init();">
<form id="form1" runat="server">
<div><UC1:TopBar id="TopBar1" runat="server"></UC1:TopBar>
</div>
<div class="post">
<div class="postTitle">
<a id="viewpost1_TitleUrl" href="#">新闻主题列表</a>
</div>
<div class="postText" id="ShowTitleList"><center><br/><br/><br/><img src='Images/loading.gif' /></center></div>
</div>
</form>
</body>
</html>
2、js文件 ReadNewInfo.js
// JScript 文件
///createtime 2007-3-27
///author wangxin
var StartShowGif="<center><br /><img src='Images/loading.gif' /></center>";
var Start_Circle="<center><br /><img src='Images/load2.gif' /></center>";
var Title_Para=""; // 主题参数
var Content_Para=""; // 内容参数
function Page_init()
{
//if(GetJsValue!=null && GetJsValue!="")
// {
// S_Read_Content(GetJsValue);
//}
//else
//{
// Read_ContentList(GetJsValue); //显示新闻内容
//}
//Read_WebSiteList(); //显示网站列表
Read_TitleList(); //显示新闻主题
}
//-----------------------------------------
//显示网站列表
//-----------------------------------------
//显示新闻主题 时间
function Read_TitleList()
{
document.getElementById("ShowTitleList").innerHTML=StartShowGif; //显示新闻主题
Default.Server_Read_TitleList(Title_Para,CallBack_Read_TitleList);
}
function CallBack_Read_TitleList(res)
{
if(!res.error && res.value !="")
{
document.getElementById("ShowTitleList").innerHTML = res.value;
}
else
{
document.getElementById("ShowTitleList").innerHTML = "读取数据出错!";
}
}
//-----------------------------------------
///createtime 2007-3-27
///author wangxin
var StartShowGif="<center><br /><img src='Images/loading.gif' /></center>";
var Start_Circle="<center><br /><img src='Images/load2.gif' /></center>";
var Title_Para=""; // 主题参数
var Content_Para=""; // 内容参数
function Page_init()
{
//if(GetJsValue!=null && GetJsValue!="")
// {
// S_Read_Content(GetJsValue);
//}
//else
//{
// Read_ContentList(GetJsValue); //显示新闻内容
//}
//Read_WebSiteList(); //显示网站列表
Read_TitleList(); //显示新闻主题
}
//-----------------------------------------
//显示网站列表
//-----------------------------------------
//显示新闻主题 时间
function Read_TitleList()
{
document.getElementById("ShowTitleList").innerHTML=StartShowGif; //显示新闻主题
Default.Server_Read_TitleList(Title_Para,CallBack_Read_TitleList);
}
function CallBack_Read_TitleList(res)
{
if(!res.error && res.value !="")
{
document.getElementById("ShowTitleList").innerHTML = res.value;
}
else
{
document.getElementById("ShowTitleList").innerHTML = "读取数据出错!";
}
}
//-----------------------------------------
3、后台文件 Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Mysqlserver;
using System.Text;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Default));
}
#region string Server_Read_TitleList(WebID)根据参数读取某网站下的主题列表
[AjaxPro.AjaxMethod]
public string Server_Read_TitleList(string WebID)
{
StringBuilder ReturnTitleList = new StringBuilder();
string ReadSiteListSql = string.Empty;
ReadSiteListSql = "select top 10 NewsId,Title,Content,CreateTime,FilePath from inNews order by NewsId desc";
SqlServerDataBase db = new SqlServerDataBase();//建立数据对象
DataSet ds = db.Select(ReadSiteListSql, null);//选择更新后的浏览值
//string[] GetArray = Mydb.GetSqlCmd_Array(Read_SiteList_Sql);
ReturnTitleList.Append("<table width="85%" border="0" cellspacing="0" cellpadding="0"> ");
if (ds != null)
{
for (int i = 0; i < ds.Tables[0].Rows.Count; i += 1)
{
ReturnTitleList.Append("<tr><td>" + "<a href='NewsFiles/" + ds.Tables[0].Rows[i]["FilePath"] + "'>" + ds.Tables[0].Rows[i]["Title"] + "</a>" + "</td><td>" + ds.Tables[0].Rows[i]["CreateTime"] + "</td></tr>");
}
ReturnTitleList.Append("</table>");
return ReturnTitleList.ToString();
}
else
{
return "数据正在更新中...";
}
}
#endregion
}
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Mysqlserver;
using System.Text;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Default));
}
#region string Server_Read_TitleList(WebID)根据参数读取某网站下的主题列表
[AjaxPro.AjaxMethod]
public string Server_Read_TitleList(string WebID)
{
StringBuilder ReturnTitleList = new StringBuilder();
string ReadSiteListSql = string.Empty;
ReadSiteListSql = "select top 10 NewsId,Title,Content,CreateTime,FilePath from inNews order by NewsId desc";
SqlServerDataBase db = new SqlServerDataBase();//建立数据对象
DataSet ds = db.Select(ReadSiteListSql, null);//选择更新后的浏览值
//string[] GetArray = Mydb.GetSqlCmd_Array(Read_SiteList_Sql);
ReturnTitleList.Append("<table width="85%" border="0" cellspacing="0" cellpadding="0"> ");
if (ds != null)
{
for (int i = 0; i < ds.Tables[0].Rows.Count; i += 1)
{
ReturnTitleList.Append("<tr><td>" + "<a href='NewsFiles/" + ds.Tables[0].Rows[i]["FilePath"] + "'>" + ds.Tables[0].Rows[i]["Title"] + "</a>" + "</td><td>" + ds.Tables[0].Rows[i]["CreateTime"] + "</td></tr>");
}
ReturnTitleList.Append("</table>");
return ReturnTitleList.ToString();
}
else
{
return "数据正在更新中...";
}
}
#endregion
}
代码应该不难,其中需要设置ajaxpro。在网上有搜索一下吧。
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1624507