页面局部无刷新汇总(转载cnblogs)

局部刷新技术

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34138521

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui xhtml ViewUI

原文链接：http://www.cnblogs.com/xiaobaigang/archive/2007/07/30/836193.html

本文介绍四种局部刷新技术：Iframe、JavaScript、.NET回调及Ajax。通过实例演示如何根据输入的城市名称，动态更新下拉列表中的城镇选项。

一、 使用Iframe 实现局部无刷新
说明：有两个页面：Iframe_Default.aspx、Iframe_Show.aspx
1.Iframe_Default.aspx

@ Page Language="C#" AutoEventWireup="true" CodeFile="Iframe_Default.aspx.cs" Inherits="_Default" %>

<! 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" >

< title > Iframe 实现局部无刷新DEMO_城市 </ title >

< script language ="javascript" >

function Search()

{

var city = document.getElementById("TextBox1").value;

if (city!="")

{

document.getElementById("iframe1").src="iframe_show.aspx?city="+city;

}

</ script >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< strong > 使用Iframe 实现局部无刷新DEMO < br />

</ strong > 城市名称： < asp:TextBox ID ="TextBox1" runat ="server" ></ asp:TextBox >  

--<asp:Button ID="Button1" runat="server" Text="查询" OnClientClick="Search()" />-- %>

< input id ="Button1" type ="button" value ="查询" onclick ="Search()" />

< br />

< iframe src ="Iframe_Show.aspx" style ="text-align:left" id ="iframe1" width ="200px" height ="50" frameborder ="no" scrolling ="no" />

</ div >

</ form >

</ body >

</ html >

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;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

2.Iframe_Show.aspx

@ Page Language="C#" AutoEventWireup="true" CodeFile="Iframe_Show.aspx.cs" Inherits="Iframe_Show" %>

<! 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" >

< title > Iframe 实现局部无刷新DEMO_城镇 </ title >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

　城镇： < asp:DropDownList ID ="DropDownList1" runat ="server" >

</ asp:DropDownList ></ div >

</ form >

</ body >

</ html >

using System;

using System.Data;

using System.Configuration;

using System.Collections;

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;

public partial class Iframe_Show : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (Request["city"] != null)

{

string strCity = Request["city"];

switch (strCity)

{

case "武汉":

this.DropDownList1.Items.Clear();

this.DropDownList1.Items.Add("武昌");

this.DropDownList1.Items.Add("汉口");

this.DropDownList1.Items.Add("洪山");

break;

case "钟祥":

this.DropDownList1.Items.Clear();

this.DropDownList1.Items.Add("郢中");

this.DropDownList1.Items.Add("胡集");

this.DropDownList1.Items.Add("双河");

break;

default:

break;

}

3.Result：

二、 .net2.0+JavaScript实现局部无刷新
说明：只有一个页面JavaScript_Default.aspx
1.JavaScript_Default.aspx

@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScript_Default.aspx.cs" Inherits="JavaScript_Default" %>

<! 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" >

< title > .net2.0+JavaScript实现局部无刷新 </ title >

< script language ="javascript" >

function FillData(strCity)

{

document.getElementById("DropDownList1").options.length=0;

var indexofcity;

var city;

//分割传递来的字符串

while(strCity.length>0)

{

//判断是否是最后一个字符串

indexofcity = strCity.indexOf(",");

if (indexofcity > 0)

{

city = strCity.substring(0,indexofcity);

strCity = strCity.substring(indexofcity+1);

//填充DropDownList1

document.getElementById("DropDownList1").add(new Option(city,city));

}

else

{

document.getElementById("DropDownList1").add(new Option(strCity,strCity));

break;

}

</ script >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< strong >

.net2.0+JavaScript实现局部无刷新Demo < br />

</ strong >

城市名称： < asp:TextBox ID ="TextBox1" runat ="server" ></ asp:TextBox >

--<asp:Button ID="Button1" runat="server" Text="查询" OnClientClick="Search()" />-- %>

< input id ="Button1" type ="button" value ="查询" onclick ="Search()" />

< br />

　　城镇： < asp:DropDownList ID ="DropDownList1" runat ="server" >

</ asp:DropDownList ></ div >

</ div >

</ form >

</ body >

</ html >

using System;

using System.Data;

using System.Configuration;

using System.Collections;

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;

public partial class JavaScript_Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

//创建字符串连接对象

System.Text.StringBuilder cityScript = new System.Text.StringBuilder();

//使用字符串组织一个JavaScript脚本方法,FillData()脚本方法在客户端页面定义

cityScript.Append("function Search() \n");

cityScript.Append("{ var city=document.getElementById('TextBox1').value; \n");

cityScript.Append(" switch (city) \n");

cityScript.Append(" { case '武汉': \n");

cityScript.Append(" FillData('" + GetCityStr("武汉") + "'); \n");

cityScript.Append(" break; \n");

cityScript.Append(" case '钟祥': \n");

cityScript.Append(" FillData('"+GetCityStr("钟祥")+"'); \n");

cityScript.Append(" break; \n");

cityScript.Append(" } \n ");

cityScript.Append("} \n");

//使用注册脚本方法在页面的客户端，注册这个字符串编写的脚本方法

Page.ClientScript.RegisterClientScriptBlock(typeof(string), "Search", cityScript.ToString(), true);

}

private string GetCityStr(string _city)

{

string strCity = null;

switch (_city)

{

case "武汉":

strCity = "武昌,汉口,洪山";

break;

case "钟祥":

strCity = "郢中,胡集,双河";

break;

default:

break;

}

return strCity;

}

2.Result：

三、 使用.net回调(CallBack)技术实现局部刷新
说明：有一个页面CallBack_Default.aspx
1.CallBack_Default.aspx

@ Page Language="C#" AutoEventWireup="true" CodeFile="CallBack_Default.aspx.cs" Inherits="CallBack_Default" %>

<! 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" >

< title > 使用.net回调(CallBack)技术实现局部刷新 </ title >

< script language ="javascript" >

function FillData()

{

var city = document.getElementById("TextBox1").value;

<% =ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>;

}

function FillDll(strCity)

{

document.getElementById("DropDownList1").options.length = 0;

var indexofcity;

var city;

//分割传递来的字符串

while(strCity.length>0)

{

//判断是否是最后一个字符串

indexofcity = strCity.indexOf(",");

if (indexofcity > 0)

{

city = strCity.substring(0,indexofcity);

strCity = strCity.substring(indexofcity+1);

//填充DropDownList1

document.getElementById("DropDownList1").add(new Option(city,city));

}

else

{

document.getElementById("DropDownList1").add(new Option(strCity,strCity));

break;

}

</ script >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< strong > 使用.net回调(CallBack)技术实现局部刷新 </ strong >< br />

城市名称： < asp:TextBox ID ="TextBox1" runat ="server" ></ asp:TextBox >

< input id ="Button1" type ="button" value ="查询" onclick ="FillData()" />< br />

城镇： < asp:DropDownList ID ="DropDownList1" runat ="server" >

</ asp:DropDownList ></ div >

</ form >

</ body >

</ html >

using System;

using System.Data;

using System.Configuration;

using System.Collections;

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;

public partial class CallBack_Default : System.Web.UI.Page,ICallbackEventHandler

{

private string _data;

protected void Page_Load(object sender, EventArgs e)

{

}

public string GetCallbackResult()

{

return _data;

}

public void RaiseCallbackEvent(string eventArgument)

{

switch (eventArgument)

{

case "武汉":

_data = "武昌,汉口,洪山";

break;

case "钟祥":

_data = "郢中,胡集,双河";

break;

default:

break;

}

2.Result：

四、使用Ajax技术实现局部刷新
说明：有两个页面Ajax_Default.aspx、Ajax_Response.aspx
1.Ajax_Default.aspx

@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Ajax_Default.aspx.cs" Inherits="Ajax_Default" %>

<! 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" >

< title > 无标题页 </ title >

< script language ="javascript" >

var xmlHttp;

function GetData()//创建异步对象

{

//获取城市名称

var city = document.getElementById("TextBox1").value;

//创建异步调用对象

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

//将对象状态与事件关联

xmlHttp.onreadystatechange = StateChange;

//加载要链接的页面(响应的页)并将参数值编码(encodeURI)

xmlHttp.Open("POST","Ajax_Response.aspx?city="+encodeURI(city),true);

xmlHttp.Send();

}

function StateChange()//异步调用的状态

{

//判断异步调用是否已经完成

if (xmlHttp.readystate == 4)

{

//判断完成的提示代码是否是OK状态

if (xmlHttp.status ==200)

{

//将返回数据作为参数,传递给填充的方法

FillData(xmlHttp.responseText);

}

function FillData(strCity)

{

document.getElementById("DropDownList1").options.length = 0;

var indexofcity;

var city;

//分割传递来的字符串

while(strCity.length>0)

{

//判断是否是最后一个字符串

indexofcity = strCity.indexOf(",");

if (indexofcity > 0)

{

city = strCity.substring(0,indexofcity);

strCity = strCity.substring(indexofcity+1);

//填充DropDownList1

document.getElementById("DropDownList1").add(new Option(city,city));

}

else

{

lastCity=strCity.substring(0,2);

document.getElementById("DropDownList1").add(new Option(lastCity,lastCity));

break;

}

</ script >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< strong >

使用Ajax技术实现局部刷新 </ strong >< br />

城市名称： < asp:TextBox ID ="TextBox1" runat ="server" ></ asp:TextBox >

--<asp:Button ID="Button1" runat="server" Text="查询" OnClientClick="GetData()" />-- %>

< input id ="Button1" type ="button" value ="查询" onclick ="GetData()" />

< br />

城镇： < asp:DropDownList ID ="DropDownList1" runat ="server" >

</ asp:DropDownList ></ div >

</ form >

</ body >

</ html >

using System;

using System.Data;

using System.Configuration;

using System.Collections;

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;

public partial class Ajax_Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

2.Ajax_Response.aspx

@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Response.aspx.cs" Inherits="Ajax_Show" %>

<! 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" >

< title > 无标题页 </ title >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

</ div >

</ form >

</ body >

</ html >

using System;

using System.Data;

using System.Configuration;

using System.Collections;

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;

public partial class Ajax_Show : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (Request["city"] != null)

{

string city = Server.HtmlDecode(Request["city"]);//html解码

Response.Clear();

switch (city)

{

case "wuhan":

Response.Write("武昌,汉口,洪山");

break;

case "钟祥":

Response.Write("郢中,胡集,双河");

break;

default:

break;

}

3.Result：

DownDemo

转载于:https://www.cnblogs.com/xiaobaigang/archive/2007/07/30/836193.html