บางที "ยอดเยี่ยม" อาจนำมาซึ่งการวิพากษ์วิจารณ์มากมาย แต่ฉันคิดว่ามันดีจริงๆ ฉันดูรายการแบบเลื่อนลงที่เชื่อมโยงประมาณ 20 รายการโดยไม่รีเฟรช และพวกเขาก็ยุ่งเหยิงภายใต้ Firefox ฉันเกือบจะสร้างสองรายการสำหรับสิ่งนี้ วิธีเก็บค่าของกล่องรายการที่สองหลังจากส่งแบบฟอร์ม เนื่องจากหากคุณเพิ่มรายการลงในกล่องแบบเลื่อนลงผ่าน js สถานะของมันจะไม่ถูกบันทึก แพลตฟอร์มทดสอบ: ie6, firefox
ฟังก์ชั่น: การเชื่อมโยงแบบไม่รีเฟรชระดับที่สอง: ข้ามเบราว์เซอร์ ส่งแบบฟอร์มเพื่อรับค่าของช่องแบบเลื่อนลงที่สอง ข้อมูลมาจากฐานข้อมูล ใช้ xmlhttp เพื่อส่งคำขอเพื่อให้ได้คำขอที่ไม่รีเฟรช: หากคุณทำได้ หาวิธีที่ดีกว่า โปรดบอกฉัน ขอบคุณมาก คำวิจารณ์และข้อเสนอแนะของคุณเป็นกำลังใจที่ดีสำหรับฉัน
เว็บฟอร์ม1.aspx:
<%@ ภาษาเพจ = "c#" Codebehind = "WebForm1.aspx.cs" AutoEventWireup = "false" สืบทอด = "drop.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<หัว>
<title>WebForm1</title>
<meta name = "เครื่องกำเนิดไฟฟ้า" เนื้อหา = "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 ">
<ภาษาสคริปต์ = "จาวาสคริปต์">
//ฟังก์ชัน jb จะเริ่มต้นวัตถุ xmlhttp ตามเบราว์เซอร์ที่แตกต่างกัน
ฟังก์ชั่น jb()
-
var A=null;
พยายาม
-
A=ใหม่ ActiveXObject("Msxml2.XMLHTTP");
-
จับ(จ)
-
พยายาม
-
A=ใหม่ ActiveXObject("Microsoft.XMLHTTP");
-
จับ(oc)
-
ก=โมฆะ
-
-
ถ้า ( !A && ประเภทของ XMLHttpRequest != "undef" )
-
A=ใหม่ XMLHttpRequest()
-
กลับ A
-
//ฟังก์ชัน Go ต่อไปนี้ถูกเรียกเมื่อกล่องรายการหลักเปลี่ยนแปลง และพารามิเตอร์คือรายการที่เลือก
ฟังก์ชั่นไป (obj)
-
//รับค่าของรายการแบบเลื่อนลงของกล่องตัวเลือก
var svalue = obj.value;
//กำหนดหน้าเพื่อประมวลผลข้อมูล
var weburl = "webform1.aspx?parent_id="+svalue;
//เตรียมใช้งานวัตถุ xmlhttp
var xmlhttp = jb();
//ส่งข้อมูล ควรรับพารามิเตอร์แรก และพารามิเตอร์ตัวที่สามควรเป็นจริง
xmlhttp.open("get",weburl,true);
// การแจ้งเตือน (xmlhttp.responseText);
//หากข้อมูลถูกส่งกลับเรียบร้อยแล้ว
xmlhttp.onreadystatechange=function()
-
if(xmlhttp.readyState==4)//4 แสดงถึงการส่งคืนข้อมูลสำเร็จ
-
var result = xmlhttp.responseText;//รับข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์
//ขั้นแรกให้ล้างรายการแบบเลื่อนลงทั้งหมดของ dListChild
document.getElementById("dListChild").ความยาว = 0;
//เพิ่มโมเดลทั้งหมดลงใน dListChild โปรดทราบว่าตัวเลือกไม่ใช่ตัวเลือก
document.getElementById("dListChild").options.add(ตัวเลือกใหม่("ทุกรุ่น", "0"));
if(result!="")//หากข้อมูลที่ส่งคืนไม่ว่างเปล่า
-
//แยกสตริงที่ได้รับออกเป็นอาร์เรย์ตาม
var allArray = result.split(",");
//วนอาร์เรย์นี้ โปรดทราบว่าเริ่มจาก 1 เนื่องจากอักขระตัวแรกของสตริงที่ได้รับคือ , ดังนั้นอาร์เรย์แรกหลังจากการแยกจึงว่างเปล่า
สำหรับ (var i=1;i<allArray.length;i++)
-
//แยกสตริงนี้เป็นอาร์เรย์ตาม |
var thisArray = allArray[i].split("|");
//เพิ่มรายการใน dListChild
document.getElementById("dListChild").options.add(ตัวเลือกใหม่(thisArray[1].toString(),thisArray[0].toString()));
-
-
-
-
//ส่งข้อมูล โปรดใส่ใจกับลำดับและพารามิเตอร์ พารามิเตอร์จะต้องเป็นโมฆะหรือ ""
xmlhttp.send(null);
-
</สคริปต์>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DropDownList onchange = "ไป (นี้)" id = "dListParent" style = "Z-INDEX: 101; ซ้าย: 248px; ตำแหน่ง: สัมบูรณ์; TOP: 40px"
runat="เซิร์ฟเวอร์">
<asp:ListItem Value="100">โมโตโรล่า</asp:ListItem>
<asp:ListItem Value="101">โนเกีย</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="dListChild" style="Z-INDEX: 102; ซ้าย: 248px; ตำแหน่ง: สัมบูรณ์; TOP: 104px"
runat="เซิร์ฟเวอร์"></asp:DropDownList>
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 256px; POSITION: สัมบูรณ์; TOP: 176px" runat = "เซิร์ฟเวอร์"
Text="ปุ่ม"></asp:ปุ่ม>
</แบบฟอร์ม>
</ร่างกาย>
</HTML>
แบ็กเอนด์ webform1.aspx.cs:
ใช้ระบบ;
ใช้ System.Collections;
โดยใช้ System.ComponentModel;
ใช้ System.Data;
โดยใช้ระบบการวาดภาพ;
ใช้ System.Web;
โดยใช้ System.Web.SessionState;
โดยใช้ System.Web.UI;
ใช้ System.Web.UI.WebControls;
ใช้ System.Web.UI.HtmlControls;
โดยใช้ระบบการกำหนดค่า;
ใช้ System.Data.SqlClient
ดรอป
-
/// <สรุป>
/// คำอธิบายโดยสรุปของ WebForm1
/// </สรุป>
WebForm1 ระดับสาธารณะ: System.Web.UI.Page
-
ป้องกัน System.Web.UI.WebControls.DropDownList dListParent;
ป้องกัน System.Web.UI.WebControls.Button Button1;
ป้องกัน System.Web.UI.WebControls.DropDownList dListChild;
โมฆะส่วนตัว Page_Load (ผู้ส่งวัตถุ System.EventArgs e)
-
//ใส่รหัสผู้ใช้ที่นี่เพื่อเริ่มต้นเพจ
//ถ้า(!IsPostBack)
-
BindDrop();//หากไม่ได้ส่งกลับ ให้ผูกกล่องรายการ
-
}
โมฆะที่ได้รับการป้องกัน BindDrop()
-
//ก่อนอื่น ฉันต้องการให้รายการดรอปดาวน์พาเรนต์เชื่อมโยงกับฐานข้อมูลด้วย แต่ฉันไม่คิดว่าจะจำเป็นในภายหลัง
//ถ้า(!IsPostBack)
-
//ผูกหลัก dListParent
//BindParent();
-
//รับค่า parent_id ที่ส่งผ่าน หากเป็นคำขอแรกจะเป็นโมฆะ
string str = Request.QueryString["parent_id"];
สตริง str1 = dListParent.SelectedValue;;
การตอบสนองเขียน(str1);
//ถ้า str เพิ่มสตริง!=สตริงเดิม หมายความว่าเหตุการณ์ onchange ของ dListParent ได้รับการทริกเกอร์แล้ว
ถ้า((str+"abc")!="abc")
-
//ผูกตัวควบคุม dListChild
BindChild(str);//ใช้ค่าที่ส่งผ่านของ DropDownList หลักเป็นพารามิเตอร์
-
อื่น
BindParent(str1);
-
โมฆะที่ได้รับการป้องกัน BindParent (สตริง str)
-
//หากเป็นคำขอแรกหรือเพจถูกรีเฟรช จะถูกเลือกตามค่าของ dListParent
//แปลงพารามิเตอร์เป็น int
int i = Convert.ToInt32(str);
dListChild.Items.ล้าง();
dListChild.Items.Add(รายการใหม่("ทุกรุ่น", "0"));
//รับสตริงการเชื่อมต่อฐานข้อมูล
สตริง connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
//เตรียมใช้งานวัตถุ conn
SqlConnection conn = SqlConnection ใหม่ (connStr);
//คำสั่งฐานข้อมูล
string commStr = string.Format("เลือก type_value,type_text จาก phone_type โดยที่ parent_id={0}",i);
//สร้างวัตถุคำสั่งฐานข้อมูล
SqlCommand comm = ใหม่ SqlCommand (commStr, conn);
//เปิดฐานข้อมูล
conn.เปิด();
//ดำเนินการคำสั่ง
SqlDataReader dr = comm.ExecuteReader();
//วนรอบ dr และเพิ่มรายการใน dListParent
ในขณะที่ (dr.Read())
-
dListChild.Items.Add(รายการใหม่(dr[1].ToString(),dr[0].ToString()));
//มันอาจจะเป็นแบบนี้ก็ได้
//dListParent.Items.Add(รายการใหม่(dr["phone_text"].ToString(),dr["phone_value"].ToString()));
-
dListParent.Items[0].เลือก = จริง;
//การเพิ่มต่อไปนี้หมายความว่าสามารถบันทึกสถานะของ dListChild ที่สองได้เมื่อคลิกปุ่มส่งเพื่อส่งแบบฟอร์ม
dListChild.SelectedValue = คำขอแบบฟอร์ม ["dListChild"];
ดร.ปิด();
conn.ปิด();
-
ป้องกันโมฆะ BindChild (สตริง str)
-
//เนื้อหาที่เพิ่มผ่าน js ไปยังส่วนควบคุมใดๆ รวมถึงรายการดรอปดาวน์จะไม่ถูกบันทึก
//แปลงพารามิเตอร์เป็น int
int i = Convert.ToInt32(str);
//กำหนดสตริงเพื่อบันทึกข้อมูลที่ส่งคืนจากฐานข้อมูล
ผลลัพธ์สตริง = "";
//เคลียร์เอาท์พุตก่อน
การตอบสนอง.Clear();
สตริง connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
SqlConnection conn = SqlConnection ใหม่ (connStr);
SqlCommand comm = conn.CreateCommand();
string commStr = string.Format("เลือก type_value,type_text จาก phone_type โดยที่ parent_id = {0}",i);
comm.CommandText = commStr;
conn.เปิด();
SqlDataReader dr = comm.ExecuteReader();
ในขณะที่ (dr.Read())
-
ผลลัพธ์ += ","+dr[0].ToString() +"|" + dr[1].ToString();
//dListChild.Items.Add(รายการใหม่(dr[1].ToString(),dr[0].ToString()));
-
//ส่งข้อมูลที่ได้รับจากฐานข้อมูลไปยังไคลเอนต์
การตอบสนองเขียน(ผลลัพธ์);
//ปิดการตอบสนองหลังจากเอาต์พุตเสร็จสิ้นเพื่อหลีกเลี่ยงเอาต์พุตที่ไม่จำเป็น
การตอบสนองฟลัช();
การตอบสนอง.ปิด();
ดร.ปิด();
conn.ปิด();
-
#region รหัสที่สร้างโดยนักออกแบบเว็บฟอร์ม
แทนที่การป้องกันโมฆะ OnInit (EventArgs e)
-
-
// CODEGEN: การเรียกนี้จำเป็นโดยผู้ออกแบบ ASP.NET Web Forms
-
เตรียมใช้งานส่วนประกอบ();
ฐาน OnInit(e);
-
/// <สรุป>
/// Designer รองรับวิธีการที่จำเป็น - อย่าใช้โปรแกรมแก้ไขโค้ดเพื่อแก้ไข
/// เนื้อหาของวิธีนี้
/// </สรุป>
โมฆะส่วนตัว InitializeComponent()
-
this.Button1.Click += System.EventHandler ใหม่ (this.Button1_Click);
this.Load += ใหม่ System.EventHandler(this.Page_Load);
}
#endregion
โมฆะส่วนตัว Button1_Click (ผู้ส่งวัตถุ System.EventArgs e)
-
Response.Write (คำขอแบบฟอร์ม ["dListChild"].ToString());
-
-
-
เอกสารข้อมูล:
รหัสคีย์หลัก parent_id(int) type_value(int) type_text(varchar)
int เพิ่มค่าของกล่องดรอปดาวน์พาเรนต์ ค่าของกล่องดรอปดาวน์ ข้อความของกล่องดรอปดาวน์