现在的位置: 首页 > 综合 > 正文

无刷新网页(收藏)

2012年12月31日 ⁄ 综合 ⁄ 共 3754字 ⁄ 字号 评论关闭

    在.net中实现无刷新网页技术,我所知的目前有三个解决方案.(转载)
1.xml+webservice.htc+DHTML
2.数据岛技术
3.类似于第一种,只不过数据源不是xml.

对于第一个方案,我是在csdn上搜索到一个帖子里看到的.可惜我对xml不是很熟.但是我参考了其中的思路,然后结合webservice behavior的特征:webservice行为不支持DataSet,DataTable,但支持strings integers等,
不能直接支持DataSet,DataTable真的是一大缺憾.我首先采用一个返回string值的webservice 试验了一下,试验成功,的确可以做到无刷新.但是要实现比较好的页面效果的话,根本就不够.因为我要的是一个table.一个比较复杂比较漂亮的table. 我不知怎么想到的,这个table可不可以就是一个字符串?可以的.然后就不断尝试,成功了,不过页面还是相对较简单,然后自己不断美化页面,在上面花了好多功夫,终于做到了我想要的效果,虽然还不是很完美.期间我在csdn上发了个贴,http://community.csdn.net/Expert/topic/2850/2850538.xml?temp=.7095911.反映还是比较热烈的,而且还学到了用数据岛的技术实现无刷新网页.
http://www.cnblogs.com/daview/archive/2004/05/06/8373.aspx 笨笨蜗牛.

在这里,既然是blog.就把那代码再贴一次,而且csdn也不是很稳定,就当多做一次备份吧.
[WebMethod]
  public string GetScores()
  {
   string connectionString="Server=Root;database=kakai;User id=sa;password=201080";
   SqlConnection conn;
   conn=new SqlConnection(connectionString);
   string SQL;
   SqlDataAdapter Adpt;
   DataSet ds;
   SQL="Select MatchName,MatchTime, HostTeam,CustomerTeam,MatchScore,HalfScore,MatchState From ShowScores where MatchDate='11月8日'";
   Adpt=new SqlDataAdapter(SQL,conn);
   ds=new DataSet();
   Adpt.Fill(ds,"ShowScores");
   DataTable table=ds.Tables["Showscores"];
   int i;
   string output="<table width=\"500\"  border=\"0\" width=\"70%\"   cellspacing=\"1\" cellpadding=\"1\" showalign=\"left\" style=\"line-height: 140%\">"+"<tr bgcolor=\"#0033CC\" style=\"color: #ffffff\">"+"<td width=\"13%\" nowrap>3月3日</td>"+"<td width=\"11%\"  nowrap>KO時間</td><td width=\"3%\" nowrap>對賽隊伍</td><td width=\"25%\">比分</td><td width=\"10%\" nowrap>對賽隊伍</td><td width=\"25%\">半場</td><td width=\"13%\" nowrap>比赛状态</td></tr>";
  
   for(i=0;i<table.Rows.Count-1;i++)
   {
       output+="<tr bgcolor=\"#66CCFF\" id=tr"+i.ToString()+">";
    output+=MakeHtml(table.Rows[i]);
   }
   output+="</table>";
   return output;
  }
  private string MakeHtml(DataRow row)
  {
    string 赛事名=Server.HtmlEncode(row["MatchName"].ToString());
          string 开赛时间=Server.HtmlEncode(row["MatchTime"].ToString());
          string 主队=Server.HtmlEncode(row["HostTeam"].ToString());
          string 比分=Server.HtmlEncode(row["MatchScore"].ToString());
          string 客队=Server.HtmlEncode(row["CustomerTeam"].ToString());
          string 半场=Server.HtmlEncode(row["HalfScore"].ToString());
          string 比赛状态=Server.HtmlEncode(row["MatchState"].ToString());
         
          string HTML="";
          HTML+="<td nowrap>"+赛事名+"</td>";
    HTML+="<td nowrap >"+"<input  type=\"checkbox\" value=\"ON\" checked onclick=\"if (!this.checked) { this.style.display='none';this.checked=true;}\">"+"</td>";
          HTML+="<td>"+开赛时间+"</td>";
          HTML+="<td nowrap >"+主队+"</td>";
          HTML+="<td nowrap>"+比分+"</td>";
          HTML+="<td nowrap>"+客队+"</td>";
          HTML+="<td nowrap>"+半场+"</td>";
          HTML+="<td nowrap>"+比赛状态+"</td>";
          HTML+="</tr>";
          return HTML;
         
 
  }

客户端showscores.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>RealTime</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <script language="javascript">
 var intCallID=0;
 function Init()
 {
 GetNewFeatured();
 setInterval("GetNewFeatured()",10000);
 }
 function GetNewFeatured()
 {
   Service.useService("http://localhost/WebService/LoadData/FeaturedService.asmx?WSDL","FeaturedService");
   intCallID=Service.FeaturedService.callService(RealTime_Result,"GetScores");
 }
 function RealTime_Result(result)
 {
  if(result.error)
  {
   divFeatured.innerHTML=result.errorDetail.string;
  }
  else
  {
  divFeatured.innerHTML=result.value;
  }
 }
 </script>
 </HEAD>
 <body onload="Init()">
  <div id="Service" style="BEHAVIOR:url(webservice.htc)"></div>
  <div id="divFeatured"><FONT face="宋体"></FONT>&nbsp;</div>
 </body>
</HTML>

抱歉!评论已关闭.