English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. النص الأساسي

خطوة بخطوة لإنشاء مكون HtmlHelper الخاص بي BootstrapHelper (ثالث جزء)

مقدمة: في المقالات السابقة تم تطوير بعض المكونات الأساسية للنماذج، هذا المقال يستمر في تطوير بعض المكونات الأخرى مبينة على bootstrap. على عكس المقال السابق، تحتاج بعض المكونات في هذا المقال إلى دعم ملفات js.

مجلد مقالات سلسلة BootstrapHelper

سلسلة C# متقدمة - خطوة بخطوة لإنشاء مكون HtmlHelper الخاص بك: BootstrapHelper

سلسلة C# متقدمة - خطوة بخطوة لإنشاء مكون HtmlHelper الخاص بك: BootstrapHelper (ثانيًا)

سلسلة C# متقدمة - خطوة بخطوة لإنشاء مكون HtmlHelper الخاص بك: BootstrapHelper (ثالثاً: مصدر الشيفرة)

أولاً: NumberBoxExtensions

NumberBoxExtensions هي مربع نصي عددي مبني على نمط bootstrap، مبنية على مكون التكديس spinner الذي تم شرحه من قبل صاحب المدونة، يمكن للزوار الذين لا يعرفون مكون spinner أن يروا المكون الثاني في https://ar.oldtoolbag.com/article/88490.htm.

من خلال التقدم الذي تم شرحه، نعلم أن تثبيت مكون التكديس spinner لا يتطلب كتابة أي شيفرة js، يمكن تحقيقه مباشرة من خلال تكوين الخاصية data في html، مما يجعل عملية التجميع سهلة جدًا، نحتاج فقط إلى إرسال المعلمات الضرورية كمعلمات لأسلوب التوسيع، ثم تحويلها إلى الخاصية data المناسبة وإرجاعها إلى frontend.

لا نريد التحدث عن غير ضروري، نعرض أولاً الشيفرة المصقولة.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
}
 public static class NumberBoxExtensions
 }
 /// <summary>
 /// إنشاء نص框 رقمي
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <returns>يعود النص الرقمي للنص框</returns>
 public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id)
 }
  return NumberTextBox(html, id, null, null, null, null, null);
 }
 /// <summary>
 /// إنشاء نص框 رقمي
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <param name="value">قيمة النص框</param>
 /// <returns>يعود النص الرقمي للنص框</returns>
 public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value)
 }
  return NumberTextBox(html, id, value, null, null, null, null);
 }
 /// <summary>
 /// إنشاء نص框 رقمي
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="value">قيمة النص框</param>
 /// <param name="min">أصغر قيمة للزيادة التلقائية</param>
 /// <param name="max">أكبر قيمة للزيادة التلقائية</param>
 /// <returns>يعود النص الرقمي للنص框</returns>
 public static MvcHtmlString NumberTextBox(this BootstrapHelper html, object value, int? min, int? max)
 }
  return NumberTextBox(html, null, value, min, max, null, null);
 }
 /// <summary>
 /// إنشاء نص框 رقمي
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <param name="value">قيمة النص框</param>
 /// <param name="min">أصغر قيمة للزيادة التلقائية</param>
 /// <param name="max">أكبر قيمة للزيادة التلقائية</param>
 /// <returns>يعود النص الرقمي للنص框</returns>
 public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max)
 }
  return NumberTextBox(html, id, value, min, max, null, null);
 }
 /// <summary>
 /// إنشاء نص框 رقمي
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <param name="value">قيمة النص框</param>
 /// <param name="min">أصغر قيمة للزيادة التلقائية</param>
 /// <param name="max">أكبر قيمة للزيادة التلقائية</param>
 /// <param name="step">رقم الزيادة في كل مرة</param>
 /// <returns>يعود النص الرقمي للنص框</returns>
 public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max, int? step)
 }
  return NumberTextBox(html, id, value, min, max, step, null);
 }
 /// <summary>
 /// إنشاء نص框 رقمي
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <param name="value">قيمة النص框</param>
 /// <param name="min">أصغر قيمة للزيادة التلقائية</param>
 /// <param name="max">أكبر قيمة للزيادة التلقائية</param>
 /// <param name="step">رقم الزيادة في كل مرة</param>
 /// <param name="rule">قاعدة الزيادة التلقائية</param>
 /// <returns>يعود النص الرقمي للنص框</returns>
 public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max, int? step, SpinningRule? rule)
 }
  TagBuilder tag = new TagBuilder("div");
  tag.MergeAttribute("class", "input-group spinner");
  tag.MergeAttribute("data-trigger", "spinner");
  System.Text.StringBuilder sb = new System.Text.StringBuilder();
  //sb.Append("<input type='text' class='form-control text-center' value='1' data-min='-10' data-max='10' data-step='2' data-rule='quantity'>");
  sb.Append("<input type='text' class='form-control text-center' ");
  إذا (!string.IsNullOrEmpty(id))
  }
  sb.Append("id='").Append(id).Append("' ");
  }
  إذا (value != null)
  }
  sb.Append("value='").Append(value.ToString()).Append("' ");
  }
  else
  }
  sb.Append("value='1' ");
  }
  if (min != null)
  }
  sb.Append("data-min='").Append(min).Append("' ");
  }
  if (max != null)
  }
  sb.Append("data-max='").Append(max).Append("' ");
  }
  if (step != null)
  }
  sb.Append("data-step='").Append(step).Append("' ");
  }
  if (rule != null)
  }
  sb.Append("data-rule='").Append(rule.ToString()).Append("' ");
  }
  else
  }
  sb.Append("data-rule='quantity' ");
  }
  sb.Append("/>");
  sb.Append("<span class='input-group-addon'>");
  sb.Append("<a href='javascript;;' class='spin-up' data-spin='up'><i class='fa fa-caret-up'></i></a>");
  sb.Append("<a href='javascript:;' class='spin-down' data-spin='down'><i class='fa fa-caret-down'></i></a>");
  sb.Append("</span>");
  tag.InnerHtml = sb.ToString();
  return MvcHtmlString.Create(tag.ToString());
 }
 }
 public enum SpinningRule
 }
 defaults,
 currency,
 quantity,
 percent,
 month,
 day,
 hour,
 minute,
 second,
 }
}

باستثناء id وvalue، فإن المعلمات التي نحتاجها لتحميل مكون التكامل بشكل تلقائي تشمل min وmax وstep وrule، التي تُناظر المعلمات data-min وdata-max وdata-step وdata-rule لجهاز التكامل.

من السهل الاستخدام، أولاً قم بإدراج ملفات الـjs وcss ذات الصلة في الصفحة المطلوبة، ثم يمكنك التعبير عن ذلك في cshtml كما يلي:

@Bootstrap.NumberTextBox(null, "1", 1, 10, 2, null)

الحصول على النتيجة:

بهذا يصبح الأمر أكثر راحة مما لو كنا نسعى دائمًا لنسخ جزء كبير من شيفرة الـhtml، هل تشعر بالشغف قليلاً؟~~

2. DateTimeBoxExtensions

بعد أن أصبح لدينا مكون الرقم كأساس، يأتي الآن تحمييد مكون الوقت. كان blogger يخطط أيضًا لاستخدام بيانات الخاصية لتحقيق التشغيل، ولكن بعد البحث في المستندات لفترة طويلة، لم يجد blogger أي طريقة لتشغيل خاصية البيانات داخل datetimepicker، لذا كان عليه القيام بتحمييد خاصية البيانات بنفسه.

1. الخطة الأساسية

نحن نصنع ملفًا جديدًا: bootstrap-datetimepicker-helper.js. يحتوي الشيفرة التالية

$(function () {
 var datetimedefault = {
 locale: 'zh-CN', //تطبيق اللغة الصينية
 });
 $.each($(".date"), function (index, item) {
 var data = $(item).data();
 var param = $.extend({}, datetimedefault, data || {});
 $(item).datetimepicker(param);
 });
});

ثم كتابة شيفرة الـhtml هكذا

<div class='input-group date' data-format="YYYY-MM-DD" data-maxDate="2017-01-10" data-minDate="2010-01-10">
 <input type='text' class="form-control" />
 <span class="input-group-addon">
  <span class="glyphicon glyphicon-calendar"></span>
 </span>
</div>

يبدو أن هناك شيء لم يكن هناك مشكلة فيه، في البداية كان يعتقد الباحث أن هناك شيء لم يكن هناك مشكلة فيه. ولكن حدث ما لم يكن متوقعًا! هناك شيء لم يكن الباحث يأخذه في الاعتبار، وهو أن طريقة data() في jQuery تحول الأسماء إلى صغير. أي أننا كتبنا data-maxDate في HTML، ولكن نتيجة data() هي maxdate، كما هو موضح في الشكل التالي:

ثم أظهرت طريقة التح�始化 datetimepicker استثناء JavaScript. هذه الطريقة غير صالحة.

2、حلول التحسين

بما أن الطريقة السابقة لم تنجح، يجب أن نحسنها. هل يوجد أي معامل يمكن لتغيير data() بحيث لا يتحويل إلى صغير؟ بحثت حول هذا، لم أجد أي إجابة. في النهاية، لم يتبق مني سوى التغيير الذاتي، وأصبح الكود JavaScript مثل هذا:

$(function () {
 var datetimedefault = {
 format: 'YYYY-MM-DD',//تحويل تاريخ، عرض التاريخ فقط
 locale: 'zh-CN', //تطبيق اللغة الصينية
 maxDate: '2017-01-01',//أكبر تاريخ
 minDate: '2010-01-01', //أقل تاريخ
 viewMode: 'days',
 defaultDate: false,
 disabledDates: false,
 enabledDates: false,
 });
 $.each($(".date"), function (index, item) {
 var data = $(item).data();
 $.each(data, function (key, value) {
  للمحاور i في datetimedefault {
  إذا (key == i.toLowerCase()) {
   datetimedefault[i] = value;
   توقف;
  }
  }
 });
 //var param = $.extend({}, datetimedefault, data || {});
 $(item).datetimepicker(datetimedefault);
 });
});

المبدأ هو مقارنة النتيجة التي يتم الحصول عليها من الطريقة data() مع اسم الخاصية المنخفضة للdatetimedefault، إذا كانت متطابقة، يتم تغطية الخاصية الافتراضية للdata في html. بعد مراجعة عدة مرات، لم أجد أي مشاكل.

بالطبع، يمكن حل المشكلة التي ذكرناها أعلاه بهذه الطريقة، ولكن يجب أن تحتوي متغير datetimedefault على كمية كافية من المعلمات الافتراضية، حتى نتمكن من تغطية الغرض، وبالطبع، يتم تعديل بعض المعلمات في المشروع عادة، ولكن هنا يجب أن نضيف بعض الخصائص الافتراضية التي نحتاج إلى تغييرها بشكل متكرر.

حسنًا، مع وجود النظريات السابقة، من السهل على DataTimeBox أن يتم تعبئته. دعونا نبدأ بالكود.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
}
 public static class DateTimeBoxExtensions
 }
 /// <summary>
 /// 生成日期控件
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">文本框标签的id</param>
 /// <returns>返回呈现日期控件的html标签</returns>
 public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id)
 }
  return DateTimeBox(html, id, null, null, null, null, null, null);
 }
 /// <summary>
 /// 生成日期控件
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">文本框标签的id</param>
 /// <param name="value">文本框标签的默认值</param>
 /// <returns>返回呈现日期控件的html标签</returns>
 public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value)
 }
  return DateTimeBox(html, id, value, null, null, null, null, null);
 }
 /// <summary>
 /// 生成日期控件
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">文本框标签的id</param>
 /// <param name="value">文本框标签的默认值</param>
 /// <param name="format">显示日期的格式</param>
 /// <param name="maxDate">日期的最小值</param>
 /// <param name="minDate">日期的最大值</param>
 /// <returns>返回呈现日期控件的html标签</returns>
 public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, string minDate)
 }
  return DateTimeBox(html, id, value, format, maxDate, minDate, null, null);
 }
 /// <summary>
 /// 生成日期控件
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">文本框标签的id</param>
 /// <param name="value">文本框标签的默认值</param>
 /// <param name="format">显示日期的格式</param>
 /// <param name="maxDate">日期的最小值</param>
 /// <param name="minDate">日期的最大值</param>
 /// <param name="viewMode">日期控件的浏览模式</param>
 /// <param name="showClear">是否显示清空按钮</param>
 /// <returns>返回呈现日期控件的html标签</returns>
 public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, string minDate, string viewMode, bool? showClear)
 }
  TagBuilder tag = new TagBuilder("div");
  tag.MergeAttribute("class", "input-group date");
  if (!string.IsNullOrEmpty(format))
  }
  tag.MergeAttribute("data-format", format);
  }
  if (!string.IsNullOrEmpty(maxDate))
  }
  tag.MergeAttribute("data-maxDate", maxDate);
  }
  if (!string.IsNullOrEmpty(minDate))
  }
  tag.MergeAttribute("data-minDate", minDate);
  }
  if (!string.IsNullOrEmpty(viewMode))
  }
  tag.MergeAttribute("data-viewMode", viewMode);
  }
  if (showClear!=null)
  }
  tag.MergeAttribute("data-showClear", showClear.ToString());
  }
  System.Text.StringBuilder sb = new System.Text.StringBuilder();
  sb.Append("<input type='text' class='form-control'")
  if(!string.IsNullOrEmpty(id))
  }
  sb.Append("id='").Append(id).Append("' ");
  }
  إذا (value != null)
  }
  sb.Append("value='").Append(value.ToString()).Append("' ");
  }
  sb.Append("/>").Append("<span class='input-group-addon'>")
  .Append("<span class='glyphicon glyphicon-calendar'></span>")
  .Append("</span>");
  tag.InnerHtml = sb.ToString();
  return MvcHtmlString.Create(tag.ToString());
 }
 }
}

ثم صفحة cshtml الخاصة بنا تحتاج فقط إلى استيراد js وcss الخاصة بنا

<link href="~/Content/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="~/Content/bootstrap-datetimepicker/js/moment-with-locales.js"></script>
<script src="~/Content/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="~/Content/bootstrap-datetimepicker/js/bootstrap-datetimepicker-helper.js"></script>

ثم استخدمها مباشرة

<div class="col-xs-3">
  @Bootstrap.DateTimeBox("starttime", null, null, null, null, null, null)
  </div>
  <div class="col-xs-3">
  @Bootstrap.DateTimeBox("endtime", null, null, null, null, null, null)
  </div>

الحصول على النتيجة

ثالثًا،TextareExtensions

The encapsulation of textarea text field is relatively simple because its structure is almost the same as TextBox, so we directly provide the encapsulation source code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
}
 public static class TextareExtensions
 }
 /// <summary>
 /// textarea text field
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <returns>html label</returns>
 public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id)
 }
  return TextAreaBox(html, id, null, null, null, null);
 }
 /// <summary>
 /// textarea text field
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <param name="value">value</param>
 /// <param name="cssClass">style</param>
 /// <returns>html label</returns>
 public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass)
 }
  return TextAreaBox(html, id, value, cssClass, null, null);
 }
 /// <summary>
 /// textarea text field
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <param name="value">value</param>
 /// <param name="cssClass">style</param>
 /// <param name="rows">number of rows</param>
 /// <returns>html label</returns>
 public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass, int? rows)
 }
  return TextAreaBox(html, id, value, cssClass, rows, null);
 }
 /// <summary>
 /// textarea text field
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">id</param>
 /// <param name="value">value</param>
 /// <param name="cssClass">style</param>
 /// <param name="rows">number of rows</param>
 /// <param name="cols">number of columns</param>
 /// <returns>html label</returns>
 public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass, int? rows, int? cols)
 }
  TagBuilder tag = new TagBuilder("textarea");
  tag.AddCssClass("form-control");
  إذا (!string.IsNullOrEmpty(id))
  }
  tag.MergeAttribute("id", id);
  }
  إذا (value != null)
  }
  tag.MergeAttribute("value", value.ToString());
  }
  إذا (!string.IsNullOrEmpty(cssClass))
  }
  tag.AddCssClass(cssClass);
  }
  if (rows != null)
  }
  tag.MergeAttribute("rows", rows.ToString());
  }
  if (cols != null)
  }
  tag.MergeAttribute("cols", cols.ToString());
  }
  return MvcHtmlString.Create(tag.ToString());
 }
 }
}

يدعم فقط بعض المعلمات البسيطة مثل rows و cols، إذا كان لديك بعض المتطلبات الخاصة في المشروع، مثل الحاجة إلى تحويل إلى محرر نصي غني، يمكنك تحسينه بنفسك.

طريقة الاستخدام

<div>
  @Bootstrap.TextAreaBox("id", "", "", 3, 5)
 </div>

إليكم سؤالًا يجب الإشارة إليه، وهو أننا نقوم بكتابة هذا النوع من النص، ولكن النتيجة النهائية هي:

يبدو أن خاصية cols لم تؤثر، في الواقع، إذا كانت بطاقتك تحتوي على النمط class='form-control'، فإنها ستملأ div بالكامل. يمكن حل هذه المشكلة بسهولة، على سبيل المثال، يمكننا القيام ببعض التعاملات على div:

 <div> @Bootstrap.TextAreaBox("", "", "", 3, 5) </div>

بما أن خاصية cols لم تؤثر، يمكن التفكير في إزالة هذا المعامل من الداخل.

الجزء الرابع: SelectExtensions

مرة أخرى، نحن في حالة ازدواجية في مربع النزول. لماذا يُقال إنه متردد؟ لأنه عند الت封装، يجب النظر في العديد من المسائل، مثل:

كيفية التعامل مع قيم option الثابتة باستخدام <optgroup> و <option> وكيفية نقل هذه القيم إلى الخلفية، ما إذا كان يجب ت封装 بطاقة select الأصلية أم ت封装 بطريقة تعتمد على بعض العناصر (مثل select2) وكيفية التعامل مع الوظائف والأحداث، وما إلى ذلك

بعد التفكير مرة أخرى، ما هو الغرض من الت封装؟ ليس من أجل أن يكون من السهل الاستخدام؟ إذا تم التشديد بشكل كبير، هل سيكون الاستخدام سهلًا؟ لذا، لاحظت أنني قمت بتنفيذ الت封装 بسيطًا جدًا. يخطط الباحث للقيام بما يلي:

إذا كان الخيار ثابتًا، أكتب بطبيعة الحال بطاقة select الأصلية؛ إذا كان الخيار ديناميكيًا، فأرسل عنوان الـ URL المناسب إلى الخلفية، استخدم البيانات المأخوذة لإنشاء بطاقة option. كما يلي الكود الم封装:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
}
 public static class SelectExtensions
 }
 /// <summary>
 /// عودة علامة select
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">معرف العنصر</param>
 /// <returns>علامة select</returns>
 public static MvcHtmlString SelectBox(this BootstrapHelper html, string id)
 }
  return SelectBox(html, id, null, null, null, null, null, null);
 }
 /// <summary>
 /// عودة علامة select
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">معرف العنصر</param>
 /// <param name="value">قيمة العنصر المحدد</param>
 /// <returns>علامة select</returns>
 public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value)
 }
  return SelectBox(html, id, value, null, null, null, null, null);
 }
 /// <summary>
 /// عودة علامة select
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">معرف العنصر</param>
 /// <param name="value">قيمة العنصر المحدد</param>
 /// <param name="cssClass">نمط العنصر</param>
 /// <returns>علامة select</returns>
 public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass)
 }
  return SelectBox(html, id, value, cssClass, null, null, null, null);
 }
 /// <summary>
 /// عودة علامة select
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">معرف العنصر</param>
 /// <param name="value">قيمة العنصر المحدد</param>
 /// <param name="cssClass">نمط العنصر</param>
 /// <param name="url">رابط بيانات الطلب</param>
 /// <param name="textField">حقل العرض</param>
 /// <param name="valueField">حقل القيمة</param>
 /// <returns>علامة select</returns>
 public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string textField, string valueField)
 }
  return SelectBox(html, id, value, cssClass, url, null, textField, valueField);
 }
 /// <summary>
 /// عودة علامة select
 /// </summary>
 /// <param name="html">مثال على التطبيق الم扩展</param>
 /// <param name="id">معرف العنصر</param>
 /// <param name="value">قيمة العنصر المحدد</param>
 /// <param name="cssClass">نمط العنصر</param>
 /// <param name="url">رابط بيانات الطلب</param>
 /// <param name="param">الإعداد المطلوب</param>
 /// <param name="textField">حقل العرض</param>
 /// <param name="valueField">حقل القيمة</param>
 /// <param name="multiple">هل هو متعدد الإختيارات</param>
 /// <returns>علامة select</returns>
 public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string param, string textField, string valueField, bool multiple = false)
 }
  TagBuilder tag = new TagBuilder("select");
  tag.AddCssClass("form-control");
  إذا (!string.IsNullOrEmpty(id))
  }
  tag.MergeAttribute("id", id);
  }
  إذا (value != null)
  }
  tag.MergeAttribute("value", value.ToString());
  }
  إذا (!string.IsNullOrEmpty(cssClass))
  }
  tag.AddCssClass(cssClass);
  }
  إذا (!string.IsNullOrEmpty(url))
  }
  tag.MergeAttribute("data-url", url);
  }
  إذا (!string.IsNullOrEmpty(param))
  }
  tag.MergeAttribute("data-param", param);
  }
  إذا (!string.IsNullOrEmpty(valueField))
  }
  tag.MergeAttribute("data-value-field", valueField);
  }
  إذا (!string.IsNullOrEmpty(textField))
  }
  tag.MergeAttribute("data-text-field", textField);
  }
  إذا (multiple)
  }
  tag.MergeAttribute("multiple", "multiple");
  }
  return MvcHtmlString.Create(tag.ToString());
 }
 }
}

ثم يستخدم المطور الأمامي جافا سكريبت للإعداد، يحتاج إلى ملف js: utility.combobox.js

(function ($) {
 //1.تحديد طريقة التوسيع الخاصة بجافا سكريبت
 $.fn.combobox = function (options, param) {
 if (typeof options == 'string') {
  return $.fn.combobox.methods[options](this, param);
 }
 //2.دمج المعلمات المرسلة عند النداء مع المعلمات الافتراضية
 options = $.extend({}, $.fn.combobox.defaults, options || {});
 //3.إضافة القيمة الافتراضية
 var الهدف = $(this);
 الهدف.attr('valuefield', options.valueField);
 الهدف.attr('textfield', options.textField);
 الهدف.empty();
 var option = $('<option></option>');
 option.attr('value', '');
 option.text(options.placeholder);
 target.append(option);
 //4.تحديد ما إذا كان يحتوي قائمة المعلمات المرسلة من المستخدم على مجموعة البيانات data، إذا كان كذلك، لا تحتاج إلى إرسال AJAX من الخلفية، وإلا أرسل AJAX من الخلفية للحصول على البيانات
 if (options.data) {
  init(الهدف، options.data);
 }
 else {
  //var param = {};
  options.onBeforeLoad.call(الهدف، options.param);
  if (!options.url) return;
  if (typeof options.param == "string") {
  options.param = JSON.parse(options.param);
  }
  $.getJSON(options.url, options.param, function (البيانات) {
  init(الهدف، البيانات);
  });
 }
 function init(الهدف، البيانات) {
  $.each(data, function (i, item) {
  var option = $('<option></option>');
  option.attr('value', item[options.valueField]);
  option.text(item[options.textField]);
  target.append(option);
  });
  options.onLoadSuccess.call(target);
 }
 target.unbind("change");
 target.on("change", function (e) {
  if (options.onChange)
  return options.onChange(target.val());
 });
 }
 //5.إذا كان المعطى هو نص، فهذا يعني أن تم استدعاء الطريقة.
 $.fn.combobox.methods = {
 getValue: function (jq) {
  return jq.val();
 },
 setValue: function (jq, param) {
  jq.val(param);
 },
 load: function (jq, url) {
  $.getJSON(url, function (data) {
  jq.empty();
  var option = $('<option></option>');
  option.attr('value', '');
  option.text('الرجاء اختيار');
  jq.append(option);
  $.each(data, function (i, item) {
   var option = $('<option></option>');
   option.attr('value', item[jq.attr('valuefield')]);
   option.text(item[jq.attr('textfield')]);
   jq.append(option);
  });
  });
 }
 });
 //6.قائمة المعلمات الافتراضية
 $.fn.combobox.defaults = {
 url: null,
 param: null,
 data: null,
 valueField: 'value',
 textField: 'text',
 placeholder: 'الرجاء اختيار',
 onBeforeLoad: function (param) { },
 onLoadSuccess: function () { },
 onChange: function (value) { }
 });
 // هذا الجزء هو الجديد، يتم استدعاء طريقة التعبئة بعد إكمال التعبئة المادية للصفحة
 $(document).ready(function () {
 $('select').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 });
 });
})(jQuery);

هذا الملف JS تم أخذه من مقال سابق للكاتب https://ar.oldtoolbag.com/article/92595.htm

ثم يتم استدعاء الأمام

<div class="col-xs-2">
  @Bootstrap.SelectBox("sel", null, null, "/Home/GetDept", null, "Name", "Id")
  </div>

خلاصة

حتى الآن، نسخة التعبئة الأولية الأولى لـ BootstrapHelper قد تم إنشاؤها بشكل أساسي، وتشمل المكونات الرئيسية التالية:

بالطبع، هناك مشاركة الرموز المصدر التي تحبونها.عنوان الرمز المصدر

إذا كنت تعتقد أن هذا المقال يمكن أن يساعدك، يرجى الترويج له.

هذا هو نهاية محتوى هذا المقال، آمل أن يساعدك في تعلمك، وأتمنى أن تدعموا وتصفقوا لتعليمات النمط.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، يرجى إلى أن يكون المالك الأصلي، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت، ولم يكن لدى هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى تغيير # إلى @) لإبلاغنا، وتقديم الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشتبه في حقوق النسخ على الفور.

تعليمية الأساس
أنت قد تعجبك