لقد قمت مؤخرًا بتنفيذ بعض برامج مواقع الويب، وغالبًا ما أستخدم خيارات القائمة المنسدلة المتعددة. بعد قراءة المقدمة، بدأت في استخدام عنصر التحكم AjaxPro، وأشعر أن التأثير جيد. لقد استخدمت MagicAjax من قبل، لكنني نسيته بعد عدم استخدامه لفترة طويلة. الشيء الأكثر إزعاجًا هو أنه أكثر إزعاجًا عند العمل مع الدلائل الافتراضية. هاها، هناك الكثير على الإنترنت، لكن المبتدئين غالبًا لا يكونون كذلك ذكرتني بنقاط مهمة، لذا أرجو من الخبراء تجاهلها. رأيت أن AjaxPro سهل الاستخدام نسبيًا هذه المرة استخدمت الإصدار 6.x، وآخر إصدار هو 7.x، وأعتقد أن السلسلة 6.0 كانت أكثر ملاءمة، لذلك اخترته.
هناك تلميحات في أماكن مهمة، وأعتقد أنها سهلة الفهم.
قم أولاً بإضافة نقطة الاتصال هذه بين <system.web> و</system.web> في web.config، كما يلي:
<system.web>
<!--لأجاكس نت-->
<httpHandlers>
<إضافة فعل = "POST,GET" مسار = "ajaxpro/*.ashx" نوع = "AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<!--إعدادات أخرى-->
</system.web>
ثم قم برمي AjaxPro.2.dll في مجلد bin وقم بالإشارة إليه.
من الأفضل إرسال الرمز، فهو مزعج للغاية. الرمز الموجود أدناه هو من Default.aspx.cs.
باستخدام النظام؛
باستخدام System.Data؛
باستخدام System.Configuration؛
باستخدام System.Data.OleDb؛
باستخدام System.Web؛
باستخدام System.Web.UI؛
باستخدام System.Web.UI.WebControls؛
باستخدام System.Web.UI.WebControls.WebParts؛
باستخدام System.Web.UI.HtmlControls
الفئة العامة الجزئية _Default: System.Web.UI.Page
{
Page_Load باطلة محمية (مرسل الكائن، EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); // ضروري
if(!IsPostBack)BindDc();
}
/**//// <summary>
/// اتصال قاعدة البيانات http://www.downcodes.com
/// </الملخص>
/// <returns></returns>
OleDbConnection العام myConn()
{
string ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
OleDbConnection conn = new OleDbConnection(ConnStr);
يحاول
{
conn.Open();
العودة كون؛
}
يمسك
{
يرمي؛
}
}
/**//// <الملخص>
/// احصل على فئات المستوى الأدنى
/// </الملخص>
[AjaxPro.AjaxMethod]
مجموعة البيانات العامة getNextClass (سلسلة cid)
{
// لأننا لا نريد أن تعرف الصفحة اسم الحقل، لذا إذا كان txt، فإن id هو vol
// يجب أن يكون اسم العمود الذي حصلت عليه الصفحة هو نفسه هذا الاسم وأن يكون حساسًا لحالة الأحرف. وهذا عادةً مكان يسهل التغاضي عنه.
// لذلك لم يتغير التصنيف الثانوي
string sql = @"select cname as txt,id as vol from webclass Whereparentid=" + cid;
يحاول
{
إرجاع getDs(sql);
}
يمسك
{
//يرمي؛
عودة فارغة؛
}
}
/**//// <الملخص>
/// إرجاع مجموعة البيانات
/// </الملخص>
/// <param name="SQL"></param>
/// <returns></returns>
getDs لمجموعة البيانات العامة (سلسلة SQL)
{
OleDbConnection conn = myConn();
DataSet Ds = new DataSet();
OleDbDataAdapter Da = new OleDbDataAdapter(SQL, conn);
يحاول
{
Da.Fill(Ds);
إرجاع س.
}
يمسك
{
عودة فارغة؛
//يرمي؛
}
}
/**//// <الملخص>
/// // ربط البيانات
/// </الملخص>
الفراغ الخاص BindDc ()
{
// أول واحد
string sql = @"select * from webclass Where Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cname";
ddl1.DataValueField = "id";
ddl1.DataBind();
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
// يمكنك أولاً تحديد DropDownList.SelectedItem.Value
//الثانية
sql = @"select * from webclass Whereparentid=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cname";
ddl2.DataValueField = "id";
ddl2.DataBind();
//الثالث
if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * from webclass Whereparentid=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cname";
ddl3.DataValueField = "id";
ddl3.DataBind();
}
}
محتوى default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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 " >
<رئيس التشغيل = "الخادم">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>يحقق AjaxPro ارتباطًا ثلاثي المستويات بدون تحديث</title>
</الرأس>
<script language="javascript" type="text/javascript">
<!--
// وظائف JS المشتركة لـ ACLOUD
وظيفة getBid(s){
إرجاع document.getElementById(s);
}
وظيفة getBmc(s){
إرجاع document.getElementByName(s);
}
// عرض قائمة الفئات
وظيفة showNext(sid,obj)
{
if(sid==null || sid=="" || sid.length<1)return;
var slt =getBid(obj);
var v = _Default.getNextClass(sid).value; // اسم الفئة
// تنبيه (ت)؛
//يعود؛
إذا (الخامس != فارغة){
if(v != null && typeof(v) == "object" && v.Tables != null)
{
طول طول = 0;
slt.options.add(new Option("يرجى التحديد",0));
// تمت إضافة "الرجاء التحديد" بشكل أساسي لتشغيل حدث onchange
إذا (obj = = "ddl2") {
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(new Option("يرجى التحديد",0));
}
for(var i=0; i<v.Tables[0].Rows.length; i++)
{
var txt = v.Tables[0].Rows[i].txt; // يجب أن يكون هذا المكان حساسًا لحالة الأحرف var vol = v.Tables[0].Rows[i].vol; يجب أن تكون الأسماء متسقة في جدول مجموعة البيانات slt.options.add(new Option(txt,vol));
}
}
}
يعود؛
}
-->
</script>
<الجسم>
<معرف النموذج = "form1" runat = "الخادم">
<ديف>
<عرض الجدول = "500" الحدود = "0" محاذاة = "المركز" خلية الحشو = "0" تباعد الخلايا = "0">
<تر>
<td width="99"> </td>
<عرض td = "401">
المدينة<asp:DropDownList ID="ddl1" runat="server">
</asp:DropDownList>
المنطقة <asp:DropDownList ID = "ddl2" runat = "server">
</asp:DropDownList>
حديقة <asp:DropDownList ID = "ddl3" runat = "الخادم">
</asp:DropDownList></td>
</tr>
<تر>
<td> </td>
<td> </td>
</tr>
<تر>
<td> </td>
<td> </td>
</tr>
</الجدول>
</div>
</النموذج>
</الجسم>
</html>
الوثائق ذات الصلة