• 页面局部无刷新汇总(转载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   

  • 相关阅读:
    如何在maven项目中使用spring
    Maven之项目搭建与第一个helloworld(多图)
    Extjs Grid 各种Demo
    关于HTML与CSS与class
    两个乒乓球队进行比赛,各出三人。甲队为a,b,c三人,乙队为x,y,z三人。已抽签决定比赛名单。有人向队员打听比赛的名单。a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单。
    猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个     第二天早上又将剩下的桃子吃掉一半,又多吃了一个。以后每天早上都吃了前一天剩下     的一半零一个。到第10天早上想再吃时,见只剩下一个桃子了。求第一天共摘了多少。
    一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?
    :判断101-200之间有多少个素数,并输出所有素数。 程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除, 则表明此数不是素数,反之是素数。
    设有一数据库,包括四个表:学生表(Student)、课程表(Course)、成绩表(Score)以及教师信息表(Teacher)。四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表(一)~表(四)所示。用SQL语句创建四个表并完成相关题目。
    企业发放的奖金根据利润提成
  • 原文地址:https://www.cnblogs.com/xiaobaigang/p/836193.html
Copyright © 2020-2023  润新知