Pendahuluan: Dua artikel sebelumnya merangkum beberapa komponen bentuk dasar, dan artikel ini terus merangkum beberapa komponen lain berdasarkan bootstrap. Berbeda dengan artikel sebelumnya, ada beberapa komponen dalam artikel ini yang membutuhkan dukungan untuk file JS tertentu.
Katalog Artikel Seri Bootstraphelper
C# Advanced Series - Encapsulate Komponen HTMLHELPER -nya sendiri Langkah demi Langkah: Bootstraphelper
C# Advanced Series - Encapsulate komponen HTMLHELPER Komponennya sendiri Langkah demi Langkah: Bootstraphelper (II)
C# Advanced Series - Encapsulate Komponen HTMLHELPER -nya sendiri Langkah demi Langkah: Bootstraphelper (3: dengan kode sumber)
1. NumberBoxExtensions
NumberBoxExtensions adalah kotak teks digital berdasarkan gaya bootstrap. Ini dienkapsulasi oleh Spinner, komponen digital pemacu diri yang diperkenalkan oleh blogger. Mereka yang tidak memahami komponen pemintal dapat melihat komponen kedua yang diperkenalkan di http://www.vevb.com/article/88490.htm.
Melalui pengantar sebelumnya, kita tahu bahwa inisialisasi pemintal komponen yang meningkat sendiri tidak memerlukan penulisan kode JS apa pun. Ini dapat diinisialisasi secara langsung dengan mengonfigurasi atribut data di HTML. Ini memberikan kenyamanan besar bagi enkapsulasi kami. Kita hanya perlu melewati parameter inisialisasi yang umum digunakan sebagai parameter dari metode ekstensi, dan kemudian mengubahnya menjadi atribut data yang sesuai di latar belakang dan mengembalikannya ke ujung depan.
Tanpa basa -basi lebih lanjut, letakkan kode sumber yang dienkapsulasi terlebih dahulu.
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace BootstrapExtensions{ public static class NumberBoxExtensions { /// <summary> /// Generate a number text box/// </summary> /// <param name="html">Extension method instance</param> /// <param name = "ID"> ID </param> /// <Returns> Kembalikan Kotak Teks Angka </eturns> Public Static MVChTMLString NumberTextBox (Bootstraphelper HTML ini, ID String) {Return NumberTextBox (html, ID, NULL, NULL, NULL, NULL); } /// <summary> /// Hasilkan kotak teks numerik /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> /// <param name = "id"> ID </param> // <param name = "value" Nilai kotak teks </param> /// </paramslxtm. Bootstraphelper html, ID string, nilai objek) {return numberTextBox (html, id, nilai, null, null, null); } /// <summary> /// menghasilkan kotak teks numerik /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "value"> Nilai kotak teks </param> // <param name = "Min"> Nilai minimum dari minimum diri sendiri </param> // <param = "min <Returns> Return The Numeric Text Box </returns> public static mvchtmlString numbertextBox (html bootstraphelper ini, nilai objek, int? Min, int? Max) {return numberTextBox (html, null, value, min, max, null, null); } /// <summary> /// menghasilkan kotak teks numerik /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> id </param> // <param name = "value" nilai teks </param> ///// <param> "Minum = Minum = Paramy-grow ' Mandiri </param> /// <mruence> Kembalikan Kotak Teks Angka </eturns> Public Static MVChTMLString NumberTextBox (Bootstraphelper html ini, ID String, Nilai Objek, int? Min, int? Max) {return numberextBox (html, id value, value, min, max, null, null, null); } /// <summary> /// Hasilkan kotak teks nomor /// </summary> /// <param name = "html"> contoh metode ekstensi </param> /// <param name = "id"> id </pam >/// <param name = "value"> Nilai kotak teks </param> ////// <param = "Min"> name = "max"> Maksimal Mendapatkan Diri </param> /// <param name = "Step"> Nomor Self-Growth </param> /// <mengurns> Kembalikan Kotak Teks Number </returns> public static MVChTmlString numberxtext, Min, Min, Min, Min, Min, Min, Min, Min, Min, Number, Min, Number, Min, Number, Min, Number, Number? Max, Step, Null); } /// <summary> /// Hasilkan kotak teks nomor /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "value"> Nilai kotak teks </param> // <param> <param name = "Minume"> Nilai diri dari kotak teks </param> // <param> <param = "min"> Minume "> Nilai Diri </Param> // <param> <param =" Minume "> Minume"> Nilai Diri </Param> ////// <param name = "Minume"> name="max">Maximum value of self-growth</param> /// <param name="step">Number of self-growth</param> /// <param name="step">Number of self-growth</param> /// <param name="rule">Self-growth rules</param> /// <returns>Return the number text box</returns> public static MvcHtmlString NumberTextBox(this Bootstraphelper HTML, ID String, Nilai Objek, Int? 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 '-step =' 2 'data-aturan =' kuantitas '> "); SB.Append ("<Input type = 'Text' class = 'Form-Control Text-Center'"); if (! string.isnullorempty (id)) {sb.append ("id = '"). append (id) .append ("'"); } if (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 (aturan! = null) {sb.append ("data-aturan = '"). append (aturan.toString ()). append ("'"); } else {sb.append ("data-aturan = 'kuantitas'"); } 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 {default, mata uang, kuantitas, persen, bulan, hari, jam, menit, kedua,}}Selain ID dan nilai, parameter yang diperlukan untuk inisialisasi komponen terutama adalah min, max, langkah, aturan, dll., Sesuai dengan data komponen-min, data-max, langkah data, aturan data dan parameter lainnya.
Penggunaan cukup sederhana. Pertama, lihat file JS dan CSS yang relevan di halaman yang sesuai, dan kemudian sebut seperti ini di CSHTML:
Salin kode sebagai berikut: @bootstrap.numberTextBox (null, "1", 1, 10, 2, null)
Dapatkan hasilnya:
Ini jauh lebih nyaman daripada menyalin sepotong besar kode HTML setiap saat. Apakah Anda merasa sedikit tersentuh?
2. DatetimeboxExtensions
Dengan komponen digital di atas sebagai dasar, langkah selanjutnya adalah merangkum komponen waktu. Blogger juga berencana untuk menggunakan atribut data untuk menginisialisasi itu, tetapi setelah mencari waktu yang lama, tidak ada cara untuk menginisialisasi atribut data dalam datatimePicker. Tidak mungkin, jadi blogger hanya akan menginisialisasi atribut data sendiri.
1. Rencana awal
Mari Buat File Baru: Bootstrap-DatetimePicker-Helper.js. Kode di dalamnya adalah sebagai berikut
$ (function () {var dateTimeDefault = {locale: 'zh-cn', // budaya Cina}; $ .each ($ (". Date"), function (index, item) {var data = $ (item) .data (); var param = $ .extend ({}, dateTimEdefault, data || {} ({{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{e. });});Kemudian tulis kode HTML seperti ini
<Div class = 'Input-Group Date' Data-format = "yyyy-mm-dd" data-maxdate = "2017-01-10" data-mindate = "2010-01-10"> <input type = 'Text'/> <span> <span> </span> <pan> </div>
Tampaknya tidak ada masalah, dan pada awalnya blogger berpikir tidak ada masalah. Tapi segalanya bertentangan dengan keinginan saya! Ada satu hal yang belum dipertimbangkan oleh blogger, yaitu, nama atribut yang diperoleh dengan metode data () di jQuery akan dikonversi menjadi huruf kecil. Dengan kata lain, data-maxdate yang ditulis dalam HTML, tetapi hasil yang diperoleh melalui metode data () menjadi maxDate, seperti yang ditunjukkan pada gambar di bawah ini:
Kemudian, ketika datetimePicker diinisialisasi, pengecualian JS dilaporkan. Metode ini tidak berhasil.
2. Rencana Peningkatan
Karena metode di atas tidak berfungsi, kita perlu memperbaikinya. Apakah ada parameter dalam metode data () yang dapat mencegahnya menjadi huruf kecil? Setelah mencari -cari, saya tidak dapat menemukan jawaban apa pun. Pada akhirnya, tidak mungkin, blogger berencana untuk mengubahnya sendiri, jadi kode JS menjadi seperti ini:
$ (function () {var datetimedefault = {format: 'yyyy-mm-dd', // formatting tanggal, hanya tanggal lokal: 'zh-cn', // maxDate budaya Cina: '2017-01-01', // fale-foal ',' 2010-01-01 ', // Tampilan Minimum, // FALUCE:' Days: '2010-01-01',//Minimum Date View: 'Days:' 2010-01-01 ',//Minimum Date View:' Days 'Days:' 2010-01-01 ',//Minimum Date View: Days:' FALUCE: '2010-01-01',//MINIMUM TANGGAL MINIMUM: 'FALUCE:' 2010-01 ', // enabledDates: false,}; $ .each ($ (". Tanggal"), fungsi (indeks, item) {var data = $ (item) .data (); $ .each (data, fungsi, nilai) {for (i di dateTimedefault) {if (key == i.tolowercase ()) {i. DateTimedefault) {if (key == i.tolowercase ()) {i.peTimedefault) {if (key == i.tolowercase ()) {dateTimedefault) {if (key == i.tolowercase ()) {i.; $ .Extend ({}, DateTimeDefault, Data || {});Prinsipnya adalah membandingkan hasil yang diperoleh dengan metode data () dengan nama atribut dari datetimedefault setelah konversi kecil. Jika hal yang sama benar, atribut data dalam HTML akan ditimpa. Setelah debugging beberapa kali, saya pada dasarnya tidak menemukan masalah.
Menulis kode seperti ini memang dapat menyelesaikan masalah kami di atas, tetapi variabel datetimedefault kami perlu berisi parameter default yang cukup untuk mencapai tujuan cakupan. Tentu saja, hanya ada beberapa parameter yang umumnya dimodifikasi dalam proyek, dan hanya beberapa atribut default yang sering kita ubah ditambahkan di sini.
Oke, dengan yang di atas sebagai dasar teoretis, DataTimebox kami akan dengan mudah dienkapsulasi. Cukup unggah kode.
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace BootstrapExtensions{ public static class DateTimeBoxExtensions { /// <summary> /// Generate date control/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id of Tag Kotak Teks </param> /// <Returns> Kembalikan Tag HTML yang membuat Kontrol Tanggal </returns> public static mvchtmlString datetimebox (bootstraphelper html ini, ID string) {return dateTimebox (html, id, null, null, null, null, null); } /// <summary> /// Hasilkan kontrol tanggal /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> ID tag kotak teks </param> // <param name = "value"> Nilai default tag kotak teks </param>/<p RETURNS <param name = "value" The Default Nilai kotak teks tag </param>//<p RETURNS <param name = "The Nilai default tag kotak teks </param>/<Param> MvchtmlString datetimebox (html bootstraphelper ini, id string, nilai objek) {return datetimebox (html, id, nilai, null, null, null, null); } /// <summary> /// Hasilkan Kontrol Tanggal /// </summary> /// <param name = "html"> contoh metode ekstensi </param> /// <param name = "id"> ID tag kotak teks </param> // <param name = "value"> Nilai default tag kotak teks </param> <param> <param = "FORMAT"> FORMAT "> FORMAT FORT"> FORMAT FORT "> FORMAT FORT"> FORMAT "> FORMAT"> FORMAT "> FORMAT"> FORMAT FORT "> FORMAT FORT"> name="format"> <param name="maxDate">Minimum value of date</param> /// <param name="minDate">Maximum value of date</param> /// <returns>Return the html tag that renders the date control</returns> public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, string mindate) {return DateTimebox (html, id, nilai, format, maxdate, mindate, null, null); } /// <summary> /// Hasilkan kontrol tanggal /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> /// <param name = "id"> id kotak teks label </param> // <param name = "value"> Nilai default label kotak teks </param> /// <param name = "value"> FORMAT "> FORMAT" FORMAT "> FORMAT"> FORMAT "FORMAT"> FORMAT "> name="maxDate">Minimum value of date</param> /// <param name="minDate">Maximum value of date</param> /// <param name="viewMode">Browse mode of date control</param> /// <param name="showClear">Does the clear button be displayed</param> /// <returns>Returns the html tag that renders the date control</returns> public static MvchtmlString datetimebox (html bootstraphelper ini, id string, nilai objek, format string, string maxDate, string mindate, string viewmode, bool? Showclear) {tagBuilder tag = tagBuilder baru ("div"); tag.mergeattribute ("kelas", "tanggal grup input"); 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 ("'"); } if (value! = null) {sb.append ("value = '"). append (value.toString ()). append ("'"); } sb.append ("/>"). append ("<span class = 'input-group-addon'>") .Append ("<span class = 'Glyphicon Glyphicon-Calendar'> </span>"). Laporan ("</span>"); tag.innerHtml = sb.toString (); return mvchtmlstring.create (tag.toString ()); }}}Kemudian halaman CSHTML kami hanya perlu merujuk JS dan CSS kami
<tautan href = "~/content/bootstrap-datetimePicker/css/bootstrap-datetimePicker.css" rel = "stylesheet"/> <script src = "~/content/bootstrap-datetimePicker/js/momen-with-locales.js"> </script> SRC = "~/Content/Bootstrap-DatetimePicker/JS/Bootstrap-DatetimePicker-Helper.js"> </script>
Kemudian gunakan secara langsung
<div> @bootstrap.datetimebox ("startTime", null, null, null, null, null) </div> <verv> @bootstrap.datetimebox ("endtime", null, null, null, null, null, null) </div>Mendapatkan hasil
3. TexTareExtensions
Enkapsulasi bidang teks TextArea relatif sederhana, karena strukturnya mirip dengan TextBox. Mari kita langsung memberikan kode sumber enkapsulasi.
Menggunakan Sistem; Menggunakan System.Collections.Generic; menggunakan System.linq; menggunakan System.web; menggunakan System.web.mvc; namespace bootstrapextensions {public static class textareExtensions {/// <rummary> /// field Textarea Methone // </ringkasan /////// <ringkasan /// PARUSTARA/PARACARA </Ringkasan </ringkasan /////////////ation </Paraml "PARUSTARA//PARACARA ///////////////////PARACARA. name = "id"> ID </param> /// <mrught> tag html </eturns> public static mvchtmlstring textareAbox (html bootstraphelper ini, string id) {return textareAbox (html, id, null, null, null); } /// <summary> /// bidang teks TextArea /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> id </param> // <param name = "value"> value </param> // <param name = "cssclass"> value </param> // <param name = "cssclass"> paramsclass "> value </param> // <param name =" cssclass "> paramclass"> paramclass </param> // <param name = "cssclass"> paramclass "> paramclass </param> </param name =" cssclass "> gode"> paramclass </param> // <param name = "cssclass” Static MVChTMLString TextAreAbox (HTML Bootstraphelper ini, ID String, Nilai Objek, String CSSClass) {Return TextAreAbox (html, ID, Nilai, CSSClass, NULL, NULL); } /// <summary> /// bidang teks TextArea /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> id </param> // <param name = "value"> value </param> // <param name = "cssclass"> NOMEL PARAMLASS "> </param> // <param name =" cssclass "> NOMECLASS"> PARAMCLASS "<" PARAMPLASS = "CSS"> NOMECLASS "> PARAMPLASS =" CSS NOMECLASS "> PARAMPLASS"> </PARAM // <PARIN PARIN NAME = "CSS"> rows</param> /// <returns>html tag</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> /// bidang teks TextArea /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> id </param> // <param name = "value"> value </param> // <param name = "cssclass"> NOMEL PARAMLASS "> </param> // <param name =" cssclass "> NOMECLASS"> PARAMCLASS "<" PARAMPLASS = "CSS"> NOMECLASS "> PARAMPLASS =" CSS NOMECLASS "> PARAMPLASS"> </PARAM // <PARIN PARIN NAME = "CSS"> Baris </param> /// <param name = "cols"> Jumlah kolom </param> /// <pr Returns> tag html </returns> public static mvchtmlString TextAreAbox (Tag Bootstraphelper, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Tag, Int? Int? tag.addcssclass ("Form-Control"); if (! string.isnullorEmpty (id)) {tag.mergeattribute ("id", id); } if (value! = null) {tag.mergeattribute ("value", value.toString ()); } if (! string.isnullorEmpty (cssclass)) {tag.addcssclass (csssclass); } if (baris! = null) {tag.mergeattribute ("baris", rows.toString ()); } if (cols! = null) {tag.mergeattribute ("cols", cols.tostring ()); } return mvchtmlstring.create (tag.toString ()); }}}Hanya beberapa baris parameter paling sederhana dan col yang didukung. Jika proyek Anda memiliki beberapa kebutuhan khusus, seperti menginisialisasi ke dalam kotak pengeditan teks yang kaya, Anda juga dapat memperbaikinya sendiri.
Cara menggunakan
<div> @bootstrap.textAreAbox ("id", "", "", 3, 5) </div>Ada pertanyaan untuk disebutkan di sini, yaitu, kami menulisnya secara langsung, tetapi hasilnya adalah:
Tampaknya atribut COLS kami tidak berfungsi. Ternyata selama tag Anda ditambahkan dengan gaya class = 'form-control', itu akan mengisi seluruh div, dan solusinya juga sangat sederhana. Misalnya, kita dapat melakukan beberapa pemrosesan pada div:
Salin kode sebagai berikut: <div> @bootstrap.textAreAbox ("", "", "", 3, 5) </Div>
Karena atribut COLS tidak berfungsi, col dalam parameter dapat dianggap dihapus.
4. Selectextensions
Saatnya ke kotak drop-down terpilih lagi. Mengapa Anda mengatakan itu kusut? Karena ada banyak masalah yang perlu dipertimbangkan saat merangkumnya, seperti:
Bagaimana cara menangani nilai opsi statis? Bagaimana cara meneruskannya ke latar belakang? Apakah itu dienkapsulasi Select asli atau dienkapsulasi ke dalam metode dan peristiwa terpilih berdasarkan komponen tertentu (seperti Select2)?
Kemudian, saya memikirkannya, apa tujuan enkapsulasi? Bukankah lebih nyaman untuk digunakan? Jika disegel terlalu keras, apakah akan lebih mudah digunakan? Untungnya, itu secara langsung dienkapsulasi ke dalam terpilih paling sederhana. Blogger bermaksud melakukan ini:
Jika ini adalah opsi statis, langsung tulis tag pilih asli; Jika itu adalah opsi dinamis, lewati URL yang sesuai ke latar belakang, dan hasilkan opsi setelah mendapatkan data. Kode yang dienkapsulasi adalah sebagai berikut:
Menggunakan Sistem; Menggunakan System.Collections.Generic; Menggunakan System.linq; Menggunakan System.Web; Menggunakan System.Web.MVC; Namespace Bootstrapextensions {Public Static Class SelectExtensions {/// <summary> // Metoden Param//Param </ringkasan </ringkasan /// <param name = "html"> Param/Param </ringkasan </ringkasan </ringkasan // <param name = "html"> Param/param </ringkasan </ringkasan </ringkasan // <param name = "html"> /// <Returns> Pilih tag </eturns> public static mvchtmlString selectbox (html bootstraphelper ini, id string) {return selectbox (html, id, null, null, null, null, null); } /// <summary> /// Return select tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">Tag id</param> /// <param name="value">Tag selected value</param> /// <returns>select tag</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, ID string, nilai objek) {return selectbox (html, id, value, null, null, null, null); } /// <summary> /// return pilih tag /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> tag id </param> // <param name = "value"> tag value </param> // <param> // <param name = "value"> tag value </param> // <paramer nama = "CSSS/CSSS"> tag PARAMET </param> // <param>/CSSS </CSSS '> TAG PARAMET </param> // <Param name = "CSSCLOMASS" Static MVChTMLString SelectBox (html bootstraphelper ini, ID string, nilai objek, string cssclass) {return selectbox (html, id, nilai, cssclass, null, null, null); } /// <summary> /// Return select tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">Tag id</param> /// <param name="value">Tag selected value</param> /// <param name="cssClass">Tag style</param> /// <param name="url">url for requesting data</param> /// <param name="url">url for requesting data</param> /// <param name="textField">Show field</param> /// <param name="valueField">Value field</param> /// <returns>select tag</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> /// return pilih tag /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> tag id </param> // <param name = "value"> tag value </param> // <param> // <param name = "value"> tag value </param> // <param>//csss name = "name paramass"> tag </param> // <param> "csssssssssSSSSSSSSSSSSSSSSSSSS url </param> /// <param name = "param"> Parameter yang diminta </param> /// <param name = "TextField"> Tampilkan bidang </param> /// <param name = "ValueField"> Bidang Nilai </param> // <param name = "VALUEFIELD"> Nilai Fields </param> /// <param name = "VALUEFIELD"> Value Fields </param>/params/param = "valueField"> Value Fields </param>/params// <param name = "VALUEFIELD"> Value Fields </param>/params/params = "ValuEfield"> Value Fields </param> <param> Name = "ValueField"> Name = "Multiple"> adalah pilihan ganda </param> /// <returns> SELECT TAG </returns> public static MVChTmlString SelectBox (Bootstraphelper html ini, ID String, Nilai Objek, String CSSClass, String URL, String Parl, String Textfield, String Valuefield, Bool, CSSSCLASS, String URL, String Parl, String Textfield, String Valuefield, Bool TagBuilder ("pilih"); tag.addcssclass ("Form-Control"); if (! string.isnullorEmpty (id)) {tag.mergeattribute ("id", id); } if (value! = null) {tag.mergeattribute ("value", value.toString ()); } if (! string.isnullorEmpty (cssclass)) {tag.addcssclass (csssclass); } if (! string.isnullorEmpty (url)) {tag.mergeattribute ("data-url", url); } if (! string.isnullorEmpty (param)) {tag.mergeattribute ("data-param", param); } if (! string.isnullorEmpty (param)) {tag.mergeattribute ("data-param", param); } if (! String.isnullorEmpty (valueField)) {tag.mergeattribute ("Data-Value-Field", ValueField); } if (! String.isnullorEmpty (TextField)) {tag.mergeattribute ("Data-Text-Field", TextField); } if (ganda) {tag.mergeattribute ("multipel", "multipel"); } return mvchtmlstring.create (tag.toString ()); }}}Kemudian front-end menggunakan JS untuk diinisialisasi, dan perlu ada utilitas file JS.ComboBox.js:
(function ($) {// 1. Tentukan metode ekstensi jQuery comboBox $ .fn.comBoBoX = function (options, param) {if (typeof options == 'string') {return $ .fn.combobox.methods [opsi] (ini, param);} // 2. Gabungkan parameter yang diteruskan saat panggilan dan default [ini, param); $ .fn.comBOBOX.Defaults, opsi || Option.text (Options.Placeholder); Options.onbeforeload.call (target, opsion.param); (item) {var option = $ ('Option> </option>'); Options.onChange) Options.onChange (target.val ()); url) {$ .getjson (url, function (data) {jq.empty (); var option = $ ('<option> </tiption>'); option.attr ('value', ''); option.text ('silakan pilih'); jq.append (opsi); $ .each (data, function, i, item) {var option = $ ($ (opsi '; item [jq.attr (valuefield ')]; }}; // 6. Default parameter list $.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: 'Please select', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } }; // Paragraf ini baru ditambahkan, dan metode inisialisasi $ (dokumen) .ready (function () {$ ('select'). Masing -masing (fungsi () {var $ comboBox = $ (ini); $ .fn.comBobox.call ($ comboBox, $ comboBox.data ());})}) ($ combox, $ comboBox.data ());})}) ($ combox, jojox.data ());File JS ini berasal dari artikel sebelumnya oleh blogger //www.vevb.com/article/92595.htm
Kemudian panggilan front-end
<div> @bootstrap.selectbox ("sel", null, null, "/home/getdept", null, "name", "id") </div>5. Ringkasan
Pada titik ini, versi pertama dari Bootstraphelper kami pada dasarnya telah selesai, dan komponen paket utama adalah sebagai berikut:
Tentu saja, semua orang paling menyukai kode sumber yang berbagi. Alamat kode sumber
Jika Anda pikir artikel ini dapat membantu Anda, mohon rekomendasikan.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.