حول تنفيذ ASP.NET استدعاء JavaScript

تجمع هذه المقالة بين الأمثلة لوصف كيفية استخدام برامج Javascript من جانب العميل في تطبيقات ASP.net لتحسين كفاءة تنفيذ البرنامج وتحقيق المزيد من الوظائف.

1. ASP.Net وJavascript

.Net هو جوهر إستراتيجية الجيل التالي من Microsoft، وASP.Net هو التنفيذ المحدد لاستراتيجية .Net في تطوير الويب. فهو يرث بساطة وسهولة استخدام ASP، بينما يتغلب على عيوب برامج ASP سيئة التنظيم ويصعب قراءتها وفهمها. على وجه الخصوص، أدى إدخال عناصر التحكم من جانب الخادم والنماذج المستندة إلى الأحداث إلى جعل تطوير تطبيقات الويب أقرب إلى تطوير برامج سطح المكتب في الماضي.

في العديد من المقالات والكتب التي تقدم ASP.Net، ينصب التركيز على عناصر تحكم الخادم و.Net Framework SDK لأن هذه هي أحدث التحسينات وأكثرها ثورية في ASP.Net، على النقيض من البرنامج النصي Javascript من جانب العميل (بما في ذلك VBScript أيضًا)؛ لعبت دورًا مهمًا في تطوير الويب في الماضي، ونادرًا ما يتم ذكرها، ويبدو أنه مع البرامج من جانب الخادم، لم تعد هناك حاجة إلى البرامج النصية من جانب العميل. ومع ذلك، يتطلب البرنامج من جانب الخادم تفاعلاً بين المتصفح وخادم الويب، بالنسبة لـ ASP.Net، فهو عبارة عن إرسال صفحة، الأمر الذي يتطلب إرسال كمية كبيرة من البيانات ذهابًا وإيابًا، ومع ذلك، فإن العديد من المهام، مثل التحقق من الإدخال أو تأكيد الحذف، يتم تنفيذه باستخدام Javascript. لذلك، لا يزال من الضروري استكشاف كيفية استخدام Javascript في ASP.Net.

2. أمثلة على تطبيق جافا سكريبت

1. إضافة حدث Javascript إلى عنصر تحكم الخادم على الصفحة

يقوم عنصر تحكم الخادم في النهاية بإنشاء HTML عادي، مثل الذي يقوم بإنشاء نص الإدخال. يحتوي كل عنصر تحكم HTML في النموذج على حدث Javascript خاص به، مثل أن يحتوي Textbox على حدث onchange، أو Button يحتوي على حدث onclick، أو Listbox به حدث onchange، وما إلى ذلك. لإضافة أحداث من جانب العميل إلى عنصر تحكم الخادم، تحتاج إلى استخدام خاصية السمات. سمة السمات هي سمة تمتلكها جميع عناصر تحكم الخادم ويتم استخدامها لإضافة بعض العلامات المخصصة إلى HTML النهائي الذي تم إنشاؤه. لنفترض أن هناك زر حفظ btnSave في نموذج الويب، وتريد مطالبة المستخدم بما إذا كان يريد الحفظ حقًا عند النقر فوق هذا الزر (على سبيل المثال، بمجرد الحفظ، لا يمكن استعادته، وما إلى ذلك)، يجب أن يكون التعليمة البرمجية التالية تتم إضافتها إلى حدث Page_Load:

إذا لم يكن page.isPostBack() ثم

btnSave.Attributes.Add("onclick"،"Javascript:return تأكيد('هل أنت متأكد من الحفظ؟');")

ينتهي إذا

تجدر الإشارة إلى ذلك لم يتم حذف "return"، وإلا حتى إذا قام المستخدم بالنقر فوق "إلغاء الأمر"، فسيتم حفظ البيانات.

2. أضف حدث Javascript لكل صف في Datagrid

. افترض أن كل صف من Datagrid يحتوي على زر حذف، عندما ينقر المستخدم على هذا الزر، من المأمول أن يتم سؤال المستخدم عما إذا كان يريد حقًا حذف هذا السجل، في حالة ما. ينقر المستخدم على الصف الخطأ، أو ينقر فقط على زر الحذف.

بغض النظر عن اسم زر الحذف هذا، فلا يمكن الرجوع إليه مباشرة مثل المثال السابق، لأن كل صف يحتوي على مثل هذا الزر، وهي عبارة عن عناصر تحكم فرعية في Datagrid. في هذه الحالة، تحتاج إلى استخدام الحدث OnItemDataBound الخاص بـ Datagrid. يحدث الحدث OnItemDataBound بعد ربط كل صف من البيانات في Datagrid بـ Datagrid (أي أنه يتم إطلاقه مرة واحدة لكل صف). أولاً، قم بإضافة التعليمات البرمجية التالية إلى تعريف Datagrid:

...تعريف الأعمدة هنا

هنا يتم توضيح أن ItemDataBound يتم استدعاء الطريقة عند وقوع الحدث OnItemDataBound، قم بإضافة تعريف هذه الطريقة في الملف الموجود خلف الكود:

Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)

إذا كان e.Item.ItemType <> ListItemType.Header وe.Item.ItemType <> ListItemType.Footer ثم

Dim oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)

oDeleteButton.Attributes("onclick") = "javascript:return تأكيد ('هل أنت متأكد من رغبتك في الحذف" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "؟")"

النهاية إذا كان

End Sub

نظرًا لأن صف العنوان وصف التذييل في Datagrid سيؤدي أيضًا إلى تشغيل هذا الحدث، فسيتم الحكم أولاً على أن الصف الذي يقوم بتشغيل هذا الحدث ليس صف العنوان أو صف التذييل. من المفترض هنا أن زر الحذف موجود في العمود 6 من Datagrid (العمود الأول هو 0)، ويحتوي مصدر بيانات Datagrid على عمود يسمى "m_sName"

3. مرجع إلى عناصر التحكم في Datagrid في حالة التحرير

تعد وظيفة التحرير المضمنة في Datagrid طريقة تحرير عندما يكون عدد الحقول في السجل صغيرًا. لا يتعين على المستخدم إدخال صفحة منفصلة لتحرير السجل، ولكن يمكنه النقر مباشرة على زر التحرير لوضع الصف الحالي في وضع التحرير. من ناحية أخرى، هناك بعض برامج Javascript التي تحتاج إلى الإشارة إلى اسم عنصر التحكم. على سبيل المثال، توفر العديد من البرامج عنصر تحكم في التاريخ عندما يحتاج المستخدم إلى إدخال تاريخ للتأكد من شرعية تنسيق التاريخ. عندما ينقر المستخدم على أيقونة التحكم، تنبثق نافذة جديدة للمستخدم لتحديد تاريخ. في هذا الوقت، تحتاج إلى توفير معرف مربع النص الذي يعرض التاريخ في النافذة الجديدة بحيث يمكن إعادة تعبئة القيمة في مربع النص عندما يحدد المستخدم التاريخ.

إذا كان عنصر تحكم مربع نص خادم عادي، فإن معرفه هو نفس معرف مربع إدخال HTML الذي تم إنشاؤه؛ ولكن في حالة تحرير Datagrid، فإن المعرفين ليسا متماثلين (السبب هو نفس المثال أعلاه )، الأمر الذي يتطلب استخدام خاصية ClientID لعنصر التحكم.

Protected Sub ItemEdit(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

Dim sDateCtrl كسلسلة

sDateCtrl = grd1 Items (e.Item.ItemIndex) Cells(2). ClientID

End Sub

من المفترض هنا أن أسلوب ItemEdit هو معالج الأحداث OnItemEdit الخاص بـ Dategrid، وأن العمود الثالث من Datagrid يحتوي على عنصر تحكم مربع نص الخادم المسمى txtDate.

4.

يشير إلى برنامج Javascript الذي تم إنشاؤه تلقائيًا بواسطة ASP.Net

يستهدف المطورين. لا يوجد تمييز بين الخادم والعميل في برنامج مصدر HTML الذي تم إنشاؤه، فكلها عبارة عن HTML وDHTML و جافا سكريبت. السبب وراء قدرته على الاستجابة لإدخال المستخدم هو أن معالج الأحداث لكل عنصر تحكم يقوم في النهاية بإنشاء برنامج نصي يقوم هذا البرنامج النصي بإعادة إرسال الصفحة بحيث يكون لدى خادم الويب فرصة للرد والمعالجة مرة أخرى. عادةً لا يتعين علينا معرفة ما هو هذا البرنامج النصي أو استدعاء هذا البرنامج النصي مباشرة، ولكن في بعض الحالات، يمكن أن يؤدي استدعاء هذا البرنامج النصي بشكل مناسب إلى تبسيط الكثير من العمل. ألق نظرة على المثالين التاليين.

● انقر في أي مكان على Datagrid لتحديد صف.

توفر Datagrid زر تحديد مضمنًا عند النقر فوق هذا الزر، يتم تحديد الصف الحالي (يمكن تعيين الخاصية SelectedItemStyle لمنح الصف الحالي مظهرًا مختلفًا). ومع ذلك، قد يكون المستخدمون أكثر اعتيادًا على تحديد صف عن طريق النقر في أي مكان. سيكون تنفيذ هذه الوظيفة بالكامل بأنفسهم أمرًا مرهقًا للغاية. من الأفكار الجيدة إضافة زر تحديد، ولكن مع جعل العمود مخفيًا، واستدعاء Javascript الذي تم إنشاؤه بواسطة هذا الزر عند النقر فوق أي صف.

Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)

Dim itemType As ListItemType

itemType = CType(e.Item.ItemType, ListItemType)

If (itemType <> ListItemType.Header) و_

(itemType <> ListItemType.Footer) و_

(itemType <> ListItemType.Separator) ثم

Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)

e.Item.Attributes("onclick") = GetPostBackClientHyperlink (oSelect, " ")

End Sub

يفترض هذا أن زر التحديد موجود في العمود 6. e.Item يمثل صفًا، انطلاقًا من HTML الذي تم إنشاؤه، تتم إضافة حدث onclick إلى كل . تقوم طريقة Page.GetPostBackClientHyperLink بإرجاع البرنامج النصي للعميل الذي تم إنشاؤه بواسطة عنصر التحكم LinkButton في الصفحة. المعلمة الأولى هي عنصر التحكم Linkbutton، والمعلمة الثانية هي المعلمة التي تم تمريرها إلى عنصر التحكم هذا، والتي تكون عادةً فارغة. إذا لم يكن عنصر تحكم LinkButton، فهناك وظيفة مشابهة يمكن أن يشير إليها GetPostBackClientEvent القراء في MSDN.

● تتعارض البرامج النصية التي تم إنشاؤها بواسطة الخادم مع البرامج النصية المضافة يدويًا

بشكل عام. تتوافق أحداث الخادم الخاصة بعناصر تحكم الخادم مع الأحداث المقابلة لعناصر تحكم العميل. على سبيل المثال، يتوافق حدث SelectedIndexChanged الخاص بـ Dropdownlist مع حدث onchange الخاص بـ HTML . إذا كنت تريد إضافة حدث onchange يدويًا، فسيتم إنشاء حدثين onchange من جانب العميل، وسيتجاهل المتصفح واحدًا. على سبيل المثال، يريد المستخدم الحفظ في قاعدة البيانات في كل مرة يقوم فيها بتغيير الخيارات في القائمة المنسدلة (على الرغم من أنها ليست شائعة جدًا، إلا أن هذه الحاجة موجودة)، ولكنه في نفس الوقت، يريد أيضًا تذكير المستخدم بما إذا كان يريد حقا أن ينقذ. من الواضح أنه يجب وضع الكود المحفوظ في حدث SelectedIndexChanged، ويجب إضافة التذكير يدويًا مع حدث onchange. والنتيجة هي أنه يمكن تنفيذ واحد فقط من التغييرين. يجب أن تكون الطريقة الصحيحة هي إضافة زر حفظ غير مرئي واستدعاء البرنامج الذي تم إنشاؤه بواسطة هذا الزر في حدث onchange المُضاف يدويًا.

طريقة Page_Load هي كما يلي:

Dim sCmd كسلسلة

sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")

إذا لم يكن page.isPostback ثم

Dropdownlist1.Attributes.add("onchange"،"ConfirmUpdate(""" & sCmd & """ )")

انتهى إذا

وظيفة ConfirmUpdate هي كما يلي

يتم استخدام وظيفة تقييم Javascript هنا استدعاء أوامر السلسلة الموجودة في . تجدر الإشارة إلى أنه لا يمكن تضمين السلسلة التي تحتوي على الأمر في علامات اقتباس مفردة، لأن البرنامج النصي الذي تم إنشاؤه تلقائيًا يتضمن علامات اقتباس مفردة، لذلك يتم هنا استخدام علامتي اقتباس مزدوجتين لتمثيل علامات الاقتباس المزدوجة للسلسلة نفسها.

3. الخلاصة

لقد ناقشنا بإيجاز عدة حالات لإدراج Javascript في ASP.Net. يمكن أن يؤدي إدخال نصوص Javascript من جانب العميل بشكل صحيح في برنامج الخادم إلى تحسين كفاءة تشغيل البرنامج وتوفير واجهة مستخدم أكثر سهولة.