استخدام AjaxPro لتطوير مربع منسدل للربط غير قابل للتحديث من أربعة مستويات

الكاتب：Eve Cole وقت التحديث：2009-07-06 16:39:16

بيئة التطوير VS.NET 2005 C# Oracle AjaxPro

لقد كنت مشغولًا مؤخرًا وليس لدي وقت للشرح بالتفصيل، لذلك سأقوم بنشر كود المصدر العام لأرى بنفسي.

لأسباب تتعلق بالأداء، تتم كتابة مستويات المقاطعة والمدينة كمصفوفات JS، وتتم كتابة مستويات المقاطعة والمنطقة (المدينة) في Oracle. قم بتشغيل C# لقراءة قاعدة البيانات من خلال JS، ثم قم بتمرير البيانات مرة أخرى إلى JS، ثم ربطها للعرض.

تستخدم العملية <select> createElement() الأكثر عمومية بدلاً من استخدام options.add()

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Area.aspx.cs" Inherits="Area" %>

<!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 " >
<رئيس التشغيل = "الخادم">
<العنوان>المنطقة</title>
</الرأس>
<الجسم>
<معرف النموذج = "form1" runat = "الخادم">
<الجدول>
<تر>
<TD>
<حدد معرف = "SF">
<option Selected="selected">—يرجى التحديد—</option>
</حدد>
</TD>
<TD>
<حدد معرف = "CS">
<option Selected="selected">—يرجى التحديد—</option>
</حدد>
</TD>
<TD>
<حدد معرف = "زيان">
<option Selected="selected">—يرجى التحديد—</option>
</حدد>
</TD>
<TD>
<حدد معرف = "تشن">
<option Selected="selected">—يرجى التحديد—</option>
</حدد>
</TD>
</tr>
</table>

// أنشئ مربعًا منسدلًا من خلال DOM http://www.downcodes.com/qq.asp
//obj: مجموعة بيانات الخيارات في المربع المنسدل
//المعرف: معرف المربع المنسدل
وظيفة CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //حفظ "—يرجى التحديد—"
// يُستخدم تخزين المصفوفة بشكل شائع للمقاطعات والمدن، ويستخدم C# للقراءة من قاعدة البيانات للمقاطعات والبلدات.
if(obj==null)return;
إذا (مثيل كائن من صفيف)
...{
for(var i=0;i<obj.length;i++)
...{
var op=document.createElement("option");
op.setAttribute("value",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
آخر
...{
for(var i=0;i<obj.Rows.length;i++) // لاحظ أن هذا طول وليس عدد
...{
var op=document.createElement("option");
op.setAttribute("value",obj.Rows[i].ID); // لاحظ أنه حساس لحالة الأحرف
var txt=document.createTextNode(obj.Rows[i].NAME); // يجب أن تكون أسماء أعمدة DataTable الجذرية متسقة
op.appendChild(txt);
sel.appendChild(op);
}
}
// ربط المربع المنسدل التالي
التبديل (معرف)
...{
case "SF":sel.onchange=function()......{ClearXianZhen();CreateDropDownList(GetArray(this.value),"CS");};break;
case "CS":sel.onchange=function()......{ClearZhen();CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Xian).value,"Xian");};break; يقوم /JS بتمرير المعلمات إلى C# ويحصل على القيمة المرجعة لـ C#
case "Xian":sel.onchange=function()...{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break;
default:sel.onchange=function()......{alert(this.value);};break;
}
}

// إدخال التنفيذ
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

// احصل على المصفوفة المطلوبة
//tar=معرف المقاطعة التي ينتمي إليها
الدالة GetArray(فال)
...{
var temp=new Array();
فار ي=0;
for(var i=0;i<aDQ.length;i++)
...{
إذا (aDQ[i][2].toString()==val)
...{
temp[j]=aDQ[i];
//temp[j].push(aDQ[i]);
ي++;
}
}
درجة حرارة العودة؛
}

// امسح مربع القائمة المنسدلة "المدينة".
الدالة ClearZhen()
...{
CreateDropDownList(null,"Zhen");
}
// امسح المربعات المنسدلة "المقاطعة" و"المدينة".
الدالة ClearXianZhen()
...{
CreateDropDownList(null,"Xian");
CreateDropDownList(null,"Zhen");
}

</script>

</form>
</الجسم>
</html>

باستخدام النظام؛
باستخدام System.Data؛
باستخدام System.Data.OracleClient

فئة عامة جزئية المنطقة: System.Web.UI.Page
...{
Page_Load باطلة محمية (مرسل الكائن، EventArgs e)
...{
// قم بتسجيل فئات C# والتعدادات في JS على التوالي
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <summary>
/// احصل على البيانات المطلوبة من خلال المربع المنسدل
/// </الملخص>
/// <param name="UpID">معرف المستوى الأعلى</param>
/// <param name="ae">المقاطعة/المدينة</param>
/// <returns>إرجاع جدول البيانات</returns>
[AjaxPro.AjaxMethod]
DataTable العام GetDataTable(سلسلة UpID، AreaEnum ae)
...{
إذا (String.IsNullOrEmpty(UpID))
return null

string = "server=XXX;user=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

// أسماء الأعمدة في DataTable التي يتم إرجاعها بواسطة Oracle كلها مكتوبة بأحرف كبيرة. تذكر استخدام الأحرف الكبيرة عند جلب القيم على الصفحة.
سلسلة SQL؛
إذا (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECT id,name FROM City WHERE THREEID=0 AND TWOID=" + UpID;
آخر
sql = "SELECT id,name FROM City WHERE THREEID=" + UpID;

OracleDataAdapter converter = new OracleDataAdapter(sql, conn);
جدول DataTable = DataTable جديد ()؛
محول. ملء (الجدول)؛
طاولة العودة
}
}

/**//// <summary>
/// تعداد المنطقة
/// </الملخص>
التعداد العام AreaEnum
...{
/**//// <الملخص>
/// مقاطعة
/// </الملخص>
شيان،
/**//// <الملخص>
/// بلدة
/// </الملخص>
تشن
}

في هذه المرحلة، يتم تنفيذ الوظائف الأساسية، وهناك أيضًا بعض الوظائف (تحديد المنطقة من خلال اسم المجالIP والربط المباشر، وحفظ المنطقة المحددة، وقراءة/حفظ معلومات المدينة بسهولة لإجراء عناصر التحكم، وما إلى ذلك). سأنتهي منه عندما يكون لدي الوقت.

تذكر إضافة

في <system.web> لـ Web.config

<إضافة فعل = "POST,GET" مسار = "ajaxpro/*.ashx" نوع = "AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>