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

一、使用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>&nbsp;
        <%--<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>
        <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   

posted on 2007-07-30 12:11  萧佰刚  阅读(493)  评论(0)  编辑  收藏  举报