Iframe ne réalise aucun lien d'actualisation
L'absence d'actualisation de l'iframe est en fait une actualisation partielle. La barre de défilement de la barre d'état défilera toujours, mais la page ne scintillera pas. Il s'agit d'une technologie plus ancienne, et elle sera plus lente lorsque les données en cours de traitement sont volumineuses. . Dans cet exemple, deux pages sont nécessaires : index.aspx et frame.asapx. Index.aspx est utilisé pour afficher l'interface. Il y a une balise iframe pointant vers la page frame.aspx pour afficher les résultats
.
Code frontal index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.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 id="Head1" runat="server"> <title>无标题页</title> <script type="text/javascript"> function Query() { var ddlpro = document.getElementById('ddlPro'); var pro = ddlpro.options[ddlpro.selectedIndex].innerText; if (pro != "") { document.getElementById("iframe1").src = "frame.aspx?Pro=" + pro; } } </script> </head> <body> <form id="form2" runat="server"> <div> <table border="1" cellpadding="3" cellspacing="0" width="600px"> <tr> <td colspan="2" align="center"> Iframe实现局部刷新 </td> </tr> <tr> <td> 省份名称: </td> <td> <select id="ddlPro" style="width: 201px"> <option value="湖北">湖北</option> <option value="河北">河北</option> <option value="广东">广东</option> <option value="河南">河南</option> </select> <input id="Button3" type="button" value="查询" onclick="Query()" /> </td> </tr> <tr> <td> 显示城市列表 </td> <td> <iframe src="frame.aspx" style="text-align: center" id="iframe1" width="100%" height="100%" frameborder="0" scrolling="no" /> </td> </tr> </table> </div> </form> </body> </html>
Code frontal de frame.aspx :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frame.aspx.cs" Inherits="myframe" %> <!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 id="Head1" runat="server"> <title>无标题页</title> </head> <body> <form id="form2" runat="server"> <div> <asp:DropDownList ID="ddlCity" runat="server" Width="179px"> </asp:DropDownList> </div> </form> </body> </html>
code d'arrière-plan frame.aspx :
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 myframe : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string pro = Request.QueryString["pro"]; switch (pro) { case "湖北": this.ddlCity.Items.Clear(); this.ddlCity.Items.Add("武汉"); this.ddlCity.Items.Add("黄冈"); this.ddlCity.Items.Add("黄石"); this.ddlCity.Items.Add("襄樊"); break; case "河北": this.ddlCity.Items.Clear(); this.ddlCity.Items.Add("石家庄"); this.ddlCity.Items.Add("唐山"); this.ddlCity.Items.Add("承德"); this.ddlCity.Items.Add("邯郸"); break; case "广东": this.ddlCity.Items.Clear(); this.ddlCity.Items.Add("广州"); this.ddlCity.Items.Add("佛山"); this.ddlCity.Items.Add("深圳"); this.ddlCity.Items.Add("珠海"); break; case "河南": this.ddlCity.Items.Clear(); this.ddlCity.Items.Add("郑州"); this.ddlCity.Items.Add("新乡"); this.ddlCity.Items.Add("安阳"); this.ddlCity.Items.Add("信阳"); break; } } }
JavaScript sans lien d'actualisation
Code de la première page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="jacascript_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 id="Head1" runat="server"> <title>无标题页</title> <script type="text/javascript"> function FillData(strcity) { document.getElementById("ddlCity").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); document.getElementById("ddlCity").add(new Option(city, city)); } else { document.getElementById("ddlCity").add(new Option(strcity, strcity)); break; } } } </script> </head> <body> <form id="form2" runat="server"> <div> <table width="700px" border="1" cellpadding="5" cellspacing="0"> <tr> <td colspan="2" align="center"> 脚本方法实现刷新 </td> </tr> <tr> <td> 选择省份: </td> <td> <select id="ddlPro" style="width: 201px"> <option value="湖北">湖北</option> <option value="河北">河北</option> <option value="广东">广东</option> <option value="河南">河南</option> </select> <input id="btnQuery" type="button" value=" 查询" onclick="City()" /> </td> </tr> <tr> <td> 城市: </td> <td> <asp:DropDownList ID="ddlCity" runat="server" Width="201px"> </asp:DropDownList> </td> </tr> </table> </div> </form> </body> </html>
Code backend :
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; using System.Text; public partial class jacascript_Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { StringBuilder myscript = new StringBuilder(); myscript.Append("function City() {\n"); myscript.Append("var ddlpro=document.getElementById('ddlPro');\n"); myscript.Append("var pro=ddlpro.options[ddlpro.selectedIndex].innerText;\n"); //myscript.Append("var pro=document.getElementById('txtPro').value;\n"); myscript.Append("switch(pro) { \n"); myscript.Append("case '湖北':\n"); myscript.Append("FillData('" + GetCityStr("湖北") + "');\n"); myscript.Append("break;\n"); myscript.Append("case '河北':\n"); myscript.Append("FillData('" + GetCityStr("河北") + "');\n"); myscript.Append("break;\n"); myscript.Append("case '广东':\n"); myscript.Append("FillData('" + GetCityStr("广东") + "');\n"); myscript.Append("break;\n"); myscript.Append("case '河南':\n"); myscript.Append("FillData('" + GetCityStr("河南") + "');\n"); myscript.Append("break;}\n"); myscript.Append("}\n"); Page.ClientScript.RegisterClientScriptBlock(typeof(string), "city", myscript.ToString(), true); } private string GetCityStr(string pro) { string city = ""; switch (pro) { case "湖北": city = "武汉,黄冈,黄石,襄樊"; break; case "河北": city = "石家庄,唐山,承德,邯郸"; break; case "广东": city = "广州,佛山,深圳,珠海"; break; case "河南": city = "郑州,新乡,安阳,信阳"; break; } return city; } }
CallBack sans lien d'actualisation
Code frontal :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.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 id="Head1" runat="server"> <title>无标题页</title> <script type="text/javascript"> function FillData() { var ddlpro=document.getElementById('ddlPro'); var pro=ddlpro.options[ddlpro.selectedIndex].value; <% =ClientScript.GetCallbackEventReference(this,"pro","FillDll",null) %> } function FillDll(strcity) { document.getElementById("ddlCity").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); document.getElementById("ddlCity").add(new Option(city,city)); } else { document.getElementById("ddlCity").add(new Option(strcity,strcity)); break; } } } </script> </head> <body> <form id="form2" runat="server"> <div> <table width="700px" border="1" cellpadding="5" cellspacing="0"> <tr> <td colspan="2" align="center"> callback方法实现刷新 </td> </tr> <tr> <td> 选择省份: </td> <td> <select id="ddlPro" style="width: 200px"> <option value="湖北">湖北</option> <option value="河北">河北</option> <option value="广东">广东</option> <option value="河南">河南</option> </select> <input id="btnQuery" type="button" value=" 查询" onclick="FillData()" /> </td> </tr> <tr> <td> 城市: </td> <td> <asp:DropDownList ID="ddlCity" runat="server" Width="201px"> </asp:DropDownList> </td> </tr> </table> </div> </form> </body> </html>
Code backend :
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) { } ICallbackEventHandler 成员 }
Ajax sans lien d'actualisation
Cet exemple utilise également deux pages : oec203index.aspx et datapage.aspx datapage.aspx sert principalement à renvoyer les données à afficher
.
Code frontal de la page .aspx :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.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 id="Head1" runat="server"> <title>无标题页</title> <script type="text/javascript"> var xmlhttp; function getData() { var ddlpro = document.getElementById("ddlPro"); var pro = ddlpro.options[ddlpro.selectedIndex].innerText; xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = statechange; xmlhttp.Open("GET", "datapage.aspx?pro=" + pro, true); xmlhttp.Send(); } function statechange() { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { FillData(xmlhttp.responseText); } } } function FillData(strcity) { document.getElementById("ddlCity").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); document.getElementById("ddlCity").add(new Option(city, city)); } else { document.getElementById("ddlCity").add(new Option(strcity, strcity)); break; } } } </script> </head> <body> <form id="form2" runat="server"> <div> <table width="700px" border="1" cellpadding="5" cellspacing="0"> <tr> <td colspan="2" align="center"> ajax方法实现刷新 </td> </tr> <tr> <td> 选择省份: </td> <td> <select id="ddlPro" style="width: 201px"> <option value="湖北">湖北</option> <option value="河北">河北</option> <option value="广东">广东</option> <option value="河南">河南</option> </select> <input id="btnQuery" type="button" value=" 查询" onclick="getData()" /> </td> </tr> <tr> <td> 城市: </td> <td> <asp:DropDownList ID="ddlCity" runat="server" Width="201px"> </asp:DropDownList> </td> </tr> </table> </div> </form> </body> </html>
Code d'arrière-plan datapage.aspx :
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_datapage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string pro = Request.QueryString["pro"]; Response.Clear(); switch (pro) { case "湖北": Response.Write("武汉,黄冈,黄石,襄樊"); break; case "河北": Response.Write("石家庄,唐山,承德,邯郸"); break; case "广东": Response.Write("广州,佛山,深圳,珠海"); break; case "河南": Response.Write("郑州,新乡,安阳,信阳"); break; } } }
Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.