استرجاع قيم العناصر في قائمة HTML باستخدام ASP.NET وJavaScript
عند النظر إلى الكود الذي قدمته، يظهر أنك تحتاج إلى إضافة وظيفة تتيح لك الحصول على قيم محددة من عناصر
أولاً، يمكنك إضافة دالة Javascript للتعامل مع النقر على زر “Buy Now”. يمكنك استخدام مكتبة jQuery لتسهيل عمليات الاختيار والتفاعل مع العناصر. فيما يلي مثال على كيفية تحقيق ذلك:
html<script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
<script>
$(document).ready(function () {
// استمع لنقرة الزر "Buy Now"
$(".info").click(function () {
// احصل على القيم من العناصر داخل العنصر المناسب
var referenceNumber = $(this).closest("li").find(".fa-clock-o").text();
var outvail = $(this).closest("li").find(".outvail-class").text(); // قم بتغيير "outvail-class" إلى الفئة الفعلية
var invailTotal = $(this).closest("li").find(".invail-total-class").text(); // قم بتغيير "invail-total-class" إلى الفئة الفعلية
// قم بعرض القيم أو قم بتمريرها إلى دالة ASP.NET إذا كنت ترغب في استخدامها على الخادم
console.log("Reference Number: " + referenceNumber);
console.log("Outvail: " + outvail);
console.log("Invail Total: " + invailTotal);
});
});
script>
في هذا المثال، يتم استخدام $(this).closest("li") للعثور على أقرب عنصر
.find() للعثور على العناصر داخل هذا العنصر
بهذا، يمكنك الآن استخدام القيم المحددة في دالة ASP.NET الخاصة بك لمتابعة المعالجة على الخادم.
المزيد من المعلومات
للقيام بالعملية المطلوبة، يجب عليك استخدام لغة JavaScript للتفاعل مع عناصر الصفحة واسترجاع القيم من العناصر التي تهمك. في سياق ASP.NET، يمكنك استخدام ميزة التفاعل بين الجانب الخادم والجانب العميل لتحقيق هذا الهدف.
أولاً وقبل كل شيء، يجب عليك تعيين معرف فريد لكل عنصر li في القائمة ul. على سبيل المثال، يمكنك إضافة معرف فريد لكل li كما يلي:
html<ul>
<li id="item1" class="mix" category-1="" data-value="600.35" style="display:block;">
<button class="info" onclick="getValues('item1')">Buy Nowbutton>
li>
<li id="item2" class="mix" category-1="" data-value="600.35" style="display:block;">
<button class="info" onclick="getValues('item2')">Buy Nowbutton>
li>
ul>
ثم، يمكنك إضافة البرنامج النصي التالي في جزء الجافا سكريبت:
html<script>
function getValues(itemId) {
// استرجاع قيم العنصر المحدد باستخدام معرف العنصر
var item = document.getElementById(itemId);
// استرجاع القيم من العنصر
var refNumber = item.getAttribute("data-value");
var outvail = item.querySelector(".outvail-class").innerText; // استبدل ".outvail-class" بالفئة أو العنصر الصحيح
var invailTotal = item.querySelector(".invail-total-class").innerText; // استبدل ".invail-total-class" بالفئة أو العنصر الصحيح
// يمكنك القيام بما تشاء مع القيم المسترجعة، مثلاً إرسالها إلى الخادم باستخدام AJAX
console.log("Reference Number:", refNumber);
console.log("Outvail:", outvail);
console.log("Invail Total:", invailTotal);
}
script>
يرجى ملاحظة أنه يجب عليك استبدال “.outvail-class” و “.invail-total-class” بالفئات أو العناصر الصحيحة التي تحتوي على قيم outvail و invail total على التوالي. كما يمكنك تخصيص الكود حسب احتياجاتك.
