Pendahuluan: Artikel sebelumnya memperkenalkan beberapa pengetahuan dasar tentang merangkum bootstraphelper, dan artikel ini terus ditingkatkan. Mengacu pada metode htmlhelper, blogger ini pertama -tama akan merangkum beberapa komponen bentuk yang umum digunakan. Ada terlalu banyak diskusi di komentar sebelumnya tentang apa pentingnya enkapsulasi bootstraphelper, dan saya tidak ingin terlalu khawatir tentang hal itu. Singkatnya, semuanya memiliki keuntungan dan kerugian, itu tergantung pada bagaimana Anda memilih. Jika Anda tertarik, Anda bisa melihatnya. Jika Anda tidak tertarik, Anda bisa mengatakan "lelucon" oleh blogger.
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. Tambahkan bootstraphelper generik baru
Dalam artikel sebelumnya, blogger hanya mendefinisikan tipe biasa Bootstraphelper untuk mewarisi htmlhelper. Karena mempertimbangkan kebutuhan untuk menggunakan Lamada untuk mendefinisikan komponen, blogger menambahkan jenis generik bootstraphelper. Jadi Bootstraphelper menjadi seperti ini.
menggunakan sistem; menggunakan System.collections.generic; menggunakan System.linq; menggunakan System.web; menggunakan System.Web.mvc; menggunakan System.web.Routing; namespace bootstrapextensions {class public bootstraphelper: System.web.mvc.htmlhelper {class public Bootstraphelper: System.web.mvc.htmlhelper {/// <sumarize> CLEXIFIFIFIFIFIFIed wadah. /// </summary> /// <param name = "viewContext"> viewContainer </param> /// <param name = "viewDatacontainer"> viewDatacontainer </param> bootstraphelper (viewcontext viewContext, iviewDatacontainer): base (viewcontext/viewcontext, iviewDatacontainer): base (viewcontext/viewcontex Instance baru dari kelas bootstraphelper dengan konteks tampilan yang ditentukan, viewDatacontainer, dan koleksi rute. /// </summary> /// <param name="viewContext">View context</param> /// <param name="viewDataContainer">View data container</param> /// <param name="routeCollection">Route collection</param> public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection) : Base (ViewContext, ViewDataContainer, RouteCollection) {}} /// <summary> /// menunjukkan bahwa kontrol bootstrap didukung dalam tampilan yang sangat diketik. /// </summary> /// <typeparam name = "tmodel"> </yypeparam> bootstraphelper kelas publik <tmodel>: bootstraphelper {/// <summary> /// inisialisasi konteks baru. /// </summary> /// <param name = "viewContext"> Lihat konteks. </param> /// <param name = "viewDatacontainer"> Lihat wadah data. </param> bootstraphelper publik (viewContext viewContext, iviewDatacontainer): base (viewContext, viewDatacontainer) {} /// <summary> /// inisialisasi instance baru dari Koleksi dan Konteks CLOUGGE, CDATA/CLOUGGE.] /// </summary> /// <param name = "viewContext"> Lihat konteks. </param> /// <param name = "viewDatacontainer"> Lihat wadah data. </param> /// <param name = "routeCollection"> Koleksi rute. </param> Bootstraphelper publik (ViewContext ViewContext, IViewDataContainer ViewDataContainer, RouteCollection RouteCollection): Base (ViewContext, ViewDataContainer, RoutEcollection) {}}}Objek Bootstrap kami juga didefinisikan sebagai objek generik
Publik Abstrak Kelas BootstrapWebViewPage <Tmodel>: System.web.mvc.WebViewPage <Tmodel> {// Variabel yang digunakan dalam halaman Cshtml Bootstraphelper Public <tmodel> bootstrap {get; mengatur; } /// <summary> /// inisialisasi objek bootstrap /// </summary> override public void inithelpers () {base.inithelpers (); Bootstrap = bootstraphelper baru <tmodel> (viewContext, this); } public override void execute () {// lempar notimplementedException baru (); }}Arti dari ini adalah menggunakan @bootstrap.textboxfor (x => x.name) di halaman cshtml. Ini diperkenalkan nanti, mari kita taruh bayangan di sini.
2. TextBoxExtensions
Kode implementasi TextBoxExtensions.cs adalah sebagai berikut:
menggunakan System; menggunakan System.Collections.Generic; menggunakan System.linq; menggunakan System.linq.Expressions; menggunakan System.Reflection; menggunakan System.web; menggunakan System.web.mvc; menggunakan System.web.mvc.html/BootStrap Bootstrapbox {/// <summary> // Boottrap dari Texpbox {// <ringkasan>///pextbox {// <ringkasan> ///pextbox {// <ringkasan> ///pextbox {// <ringkasan> ///sextbox {// <ringkasan ///sextbox {// <ringkasan ///spextbox <summary> /// Dengan menggunakan html yang ditentukan nama helper dan bidang formulir, kembalikan tag kotak teks /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "name"> Name Atribut dari elemen formulir </param> /// <par Param name "> TOPE = 'TAGRET' TOK 'TEXT </Param> /// <ch Returns> Returns Input =' TOPE = 'TAGE =' TAGET 'TAGRET </Param> /// <params name = name"> Name Atribute dari Form Element </Param> /// <ch Returns> Return Input =' TextBox (html bootstraphelper ini, nama string) {return inputextensions.helper (html, inputType.text, null, name, null, false, null); } /// <summary> /// Dengan menggunakan html yang ditentukan nama bidang helper dan formulir, kembalikan label kotak teks /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> ID </param> // <param name = "name"> Name "> NAME"> NAME ATRIPUT ATRIPUT = ID "> ID </Param> // <Param name"> type = 'text' tag </ returns> public static mvchtmlString TextBox (html bootstraphelper ini, ID string, nama string) {return inputextensions.helper (html, inputType.text, id, name, null, false, null); } /// <summary> /// Returns the text box tag by using the specified HTML helper and form field name /// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">Single element name attribute value</param> /// <param name="value">Form element value</param> /// <returns>Returns input type='text' TAG </ Returns> public static mvchtmlString TextBox (html bootstraphelper ini, id string, nama string, nilai objek) {return inputextensions.helper (html, inputType.text, id, name, value, false, null); } /// <summary> /// Mengembalikan tag kotak teks dengan menggunakan helper html dan nama bidang bentuk yang ditentukan /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "name"> Name elemen tunggal nilai atribut </param> // <param> name = "nilai"> NAME "> NAME PARINT" PARAM> PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM NOLEH NOLET </PARAM> name="placeholder">Bootstrap's prompt input value</param> /// <returns>Return input type='text' tag</returns> public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name, object value, string placeholder) { IDictionary<string, object> attributes = new Dictionary<string, object>(); if (! string.isnullorEmpty (placeholder)) {atributes.add ("placeholder", placeholder); } return inputextensions.helper (html, inputType.text, id, nama, nilai, false, atribut); } /// <summary> /// Mengembalikan tag kotak teks dengan menggunakan helper html dan nama bidang bentuk yang ditentukan /// </summary> /// <param name = "html"> contoh metode yang diperluas </param> // <param name = "name"> Name elemen tunggal nilai atribut </param> // <param> name = "value"> Name "> Name Element Single Name Nilai </param> // <param> <param name =" name " name = "htmlattributes"> atribut tambahan </param> /// <returns> returns input type = 'Text' tag </ returns> public static mvchtmlString TextBox (htmLattributes bootstraphelper ini, IDICTIONS, NAMA STRING, Object HTMLATtributes) {IDICTICTIONS, STRING STRING = Objek = Obyek = Objection = Objection = Objectraphibutes = IDICTICTER </IDICTION, OBDAT STRING = Objectraphelper,/IDICTICE, STRINGNARY, STRINGNARYS = Object HTMLATtributes) < Bootstraphelper.anonymousObjecttoHtmlattributes (htmlattributes); return inputextensions.helper (html, inputType.text, id, name, value, false, atribute); } /// <summary> /// Dengan menggunakan html yang ditentukan nama bidang helper dan formulir, kembalikan label kotak teks /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> // <param name = "name"> NAMA Nilai Nilai Nilai Formulir </Param>/Param Name = "NAME"> NAMA NAMA NOVET FORMULIM NAVET </param> <param> name="placeholder">The prompt input value of the text box that comes with the bootstrap</param> /// <param name="htmlAttributes">Extra attributes</param> /// <returns>Return input type='text' tag</returns> public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name, object value, string placeholder, object htmlattributes) {idiksi <string, object> atribut = bootstraphelper.anonymousObjectToHtmlattributes (htmlattributes); if (! string.isnullorEmpty (placeholder)) {atributes.add ("placeholder", placeholder); } return inputextensions.helper (html, inputType.text, id, nama, nilai, false, atribut); } public static mvchtmlString TextBoxfor <tmodel, tproperty> (bootstraphelper <tmodel> html ini, ekspresi <func <tmodel, tproperty >> ekspresi) {var model = (tmodel) html.viewdata.model; String PropertiDyName; nilai objek; Inputextensions.getValueebyExpression <tmodel, tproperty> (ekspresi, model, keluar properti, nilai keluar); return inputextensions.helper (html, inputType.text, propertieName, propertieName, value, false, null); }}}Inputextensions.cs
Menggunakan Sistem; Menggunakan System.Collections.Generic; menggunakan System.linq; menggunakan System.linq.Expressions; menggunakan System.Reflection; menggunakan System.web; menggunakan System.web.mvc; namespace bootstrapextension {/// <summary> //////bootstrap Bootstrap Formulir elemen input Metode ekstensi Metode Extension Method Collection // </ringkaian MvchtmlString helper (bootstraphelper html, inputType inputType, string ID, string name, nilai objek, bool ischeck, idiksi <string, objek> htmlattributes) {// tentukan nama tag tagBuilder tag = tagBuilder baru ("input"); if (htmlattributes == null) {htmlattributes = kamus baru <string, object> (); } // tambahkan nama if (! String.isnullorempty (name)) {htmlattributes.add ("name", name); } // Tambahkan ID if (! String.isNullorEmpty (id)) {htmLattributes.add ("id", id); } // Tambahkan nilai if (value! = Null) {htmlattributes.add ("value", value.toString ()); } // Tambahkan tag tipe input.mergeattribute ("type", htmlhelper.getInputTypestring (inputType)); // Tambahkan tag gaya default.addcssclass ("Form-Control"); tag.mergeattributes (htmlattributes); if (inputType == inputType.radio || inputType == inputType.checkbox) {if (ischeck) tag.mergeattribute ("checked", "checked"); } return mvchtmlstring.create (tag.toString ()); } /// <summary> /// kembalikan tag radio formulir /// </summary> /// <param name = "html"> contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> // <param> name "> name name ="> name </param> </param> </Param name = "name"> name </param name = "> /// <param name = "labelClass"> Gaya tag label </param> /// <param name = "isCheck"> apakah itu dipilih </param> /// <param name = "isDisabled"> nonaktifkan </param> // <param name = "oattributes"> tag ekstra </param> ////// <param name = "oAttributes"> Tag ekstra </param> /// <parpribute Returns </return RAUSIONS " Kotak centang (bootstraphelper html, inputType inputType, string ID, string name, nilai objek, teks string, string labelClass, bool ischeck, bool isDisabled, idiksi <string, objek> htmlattributes) {// tentukan nama tag tagbuilder tag = tagbuilder newbuilder) {// tentukan nama tag tag = tagbuilder tag = newbuilder ("label (" label ("label (" tag label ( / if (! string.isnullorEmpty (labelClass)) {htmlattributes.add ("class", labelClass); } System.Text.StringBuilder SBInput = new System.Text.StringBuilder (); var strinputType = htmlhelper.getInputTypestring (inputType); sbinput.append ("<input type = '"). append (strinputType) .Append ("'"); if (! string.isnullorEmpty (name)) {sbinput.append ("name = '") .Append (name) .Append ("'"); } if (! string.isnullorEmpty (id)) {sbinput.append ("id = '") .Append (id) .Append ("'"); } if (value! = null) {sbinput.append ("value = '") .append (value.toString ()). append ("'"); } if (isCheck) {sbInput.append ("checked = 'checked'"); } if (isDisabled) {sbinput.append ("Disable"); } sbinput.append (" />"); if (! string.isnullorEmpty (teks)) {sbinput.append (teks); } tag.innerHtml = sbinput.toString (); tag.mergeattributes (htmlattributes); return mvchtmlstring.create (tag.toString ()); } // Dapatkan nilai properti saat ini melalui ekspresi public static void getValueebyExpression <tmodel, tproperty> (ekspresi <func <tmodel, tproperty>> ekspresi, model tmodel, keluar string properti, keluar nilai objek) {MemerberExpression body = (memaberexpression) expression.body; var lamadaname = (body.member adalah propertyinfo)? body.member.name: null; PropertiDyName = lamadaname; nilai = null; System.reflection.propertyInfo [] lstPropertyInfo = typeof (tmodel) .getProperties (bindingflags.public | bindingflags.instance); var ofind = lstPropertyInfo.firstordefault (x => x.name == lamadaname); if (ofind! = null) {value = ofind.getValue (model, null); }}}}1. Mempertimbangkan bahwa semua kotak teks kotak teks berbasis bootstrap dalam proyek memiliki gaya class = "Form-Control", jadi ketika merangkum kotak teks, ditempatkan langsung di label. Tentu saja, jika proyek Anda tidak perlu menggunakan ini, atau Anda telah menyesuaikan gaya kotak teks, Anda juga dapat menulis gaya Anda sendiri di sini, sehingga Anda tidak perlu menambahkan gaya ini setiap kali Anda mendeklarasikan kotak teks.
2. Metode TextBoxFor () menggabungkan penggunaan Lamada untuk menghasilkan kotak teks. Objek tipe Bootstraphelper generik yang dinyatakan di atas berguna. Nama atribut dan nilai atribut di Lamada dibaca melalui refleksi dan obat generik. Hanya satu metode yang didefinisikan di sini. Jika kelebihan beban lain diperlukan, Anda dapat menambahkan metode baru sendiri.
3. Masalah lain ditemui saat menggunakannya. Karena bootstraphelper mewarisi ke tipe htmlhelper, beberapa metode ekstensi htmlhelper yang awalnya dienkapsulasi dalam MVC juga dapat dipanggil langsung untuk objek bootstrap kami. Oleh karena itu, banyak kelebihan beban dapat digandakan dan kelebihan beban yang sesuai tidak dapat ditemukan, seperti:
Dengan cara ini, kesalahan berikut dengan mudah disebabkan:
Jadi, karena masalahnya muncul, kita perlu menemukan cara untuk menyelesaikannya. Salah satu solusi yang dipikirkan oleh blogger adalah: mengomentari namespace di mana objek HTML di web.config tampilan. Misalnya:
Dengan cara ini, kita dapat menyelesaikan masalah di atas dan menjalankan efek berikut:
Setelah mengomentari namespace di atas, kami tidak akan lagi dapat menggunakan metode ekstensi yang relevan dari variabel HTML di halaman CSHTML. Jika penolong Anda sendiri sudah cukup, itu seharusnya tidak menjadi masalah besar tanpa metode ekstensi asli.
3. Radioeksensi dan Centang Kotak Exextensions
Mengenai komponen radio dan kotak centang di bootstrap, blogger merujuk pada metode penulisan di http://v3.bootcss.com/css/ dan dikapsulasi sebagai berikut:
Radioextensions.cs
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace BootstrapExtensions{ public static class RadioExtensions { /// <summary> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">name Atribut </param> /// <mreturns> Return Radio Tag </returns> Radio MVCHTMLString statis publik (html bootstraphelper ini, nama string) {return Radio (html, null, name, null, null, null, false, false, null); } /// <summary> /// Return the form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <returns>Return the radio tag</returns> public static MvcHtmlString Radio(this BootstrapHelper html, ID string, nama string) {return radio (html, id, name, null, null, null, null, false, false, null); } /// <summary> /// Return the form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="isCheck">Whether it is selected</param> /// <returns>Return the radio TAG </ Returns> Radio MVCHTMLString statis public (html bootstraphelper ini, ID string, nama string, bool ischeck) {return Radio (html, id, nama, null, null, null, ischeck, false, null); } /// <summary> /// Return the form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <returns>Return the radio tag</returns> public static MVCHTMLString Radio (html bootstraphelper ini, ID string, nama string, nilai objek) {return radio (html, id, nama, nilai, null, null, false, false, null); } /// <summary> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <Returns> Return Radio Tag </returns> public static MVChTMLString Radio (html bootstraphelper ini, ID string, nama string, nilai objek, teks string) {return radio (html, id, nama, nilai, teks, null, false, false, null); } /// <summary> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name = "isCheck"> apakah itu dipilih </param> /// <mrught> RETURN RADIO TAG </returns> public static mvchtmlString Radio (bootstraphelper html ini, ID string, nama string, nilai objek, teks string, bool ischeck) {Return Radio (html, id name, name, value, value, Nilai } /// <summary> /// return Form Radio tag /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> Atribut </param> // <paramer nama = "name"> name </name "/PARK =" PARAM> "PARAM> </PARAM // <PARAM> </PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARK/PARAM/PARK/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/TEPPS = <param name="labelClass">Label tag style</param> /// <returns>Return radio tag</returns> public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, string labelClass) { return Radio(html, id, name, value, text, labelClass, false, false, null); } /// <summary> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="text"> name="labelClass">Style of label tag</param> /// <param name="isCheck">Whether to select</param> /// <returns>Return radio tag</returns> public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool isCheck) { return Radio(html, id, nama, nilai, teks, labelclass, ischeck, false, null); } /// <summary> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name = "labelClass"> Gaya label </param> /// <param name = "isCheck"> apakah itu dipilih </param> /// <param name = "isDisabled"> Disable </param> /// <Returns> Return Label </returns> public MVChtmlString Radio, String, String, String, String, String, String, String, String, String, String, String, String, String, String, String Name, String, String, String, String, String, String Name, String, String, String Label, String Label, String, String Label, String, String Label, String, ischeck, bool isDisabled) {return Radio (html, id, nama, nilai, teks, labelClass, ischeck, isDisabled, null); } /// <summary> /// Kembali ke bentuk tag radio /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> // <paramer nama = "name"> name = "name"> name </param> </param> /// <param name="labelClass">style of label</param> /// <param name="isCheck">whether</param> /// <param name="isDisabled">disable</param> /// <param name="oAttributes">extra tag</param> /// <returns>return radio tag</returns> public static MvcHtmlString Radio(this BootstrapHelper HTML, ID String, Nama String, Nilai Objek, Teks String, String LabelClass, Bool Ischeck, Bool ISDisabled, Object Oattributes) {Idictionary <String, Object> htmLattributes = null; if (oattributes! = null) {htmlattributes = bootstraphelper.anonymousObjectToHtmlattributes (oattributes); } else {htmlattributes = kamus baru <string, object> (); } return inputextensions.checkbox (html, inputType.radio, id, nama, nilai, teks, labelClass, ischeck, isDisabled, htmlattributes); }}}CHECKBOXEXTENSIONS.CS
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace BootstrapExtensions{ public static class CheckBoxExtensions { /// <summary> /// Returns the form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">name Atribut </param> /// <mroteiurs> Returns Checkbox Tag </returns> Public static mvchtmlString centang (bootstraphelper html, nama string) {return centang (html, null, name, null, null, false, false, null); } /// <summary> /// Return the form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <returns>Return the CheckBox tag</returns> public static MvcHtmlString CheckBox(this Html bootstraphelper, id string, nama string) {return centang kotak (html, id, name, null, null, null, false, false, null); } /// <summary> /// kembalikan tag kotak centang formulir /// </summary> /// <param name = "html"> contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name atribut </param> // <paramer name = "ISCHECK"> NAME ATRIBUT </param> // <param> AT/PARAM ATRIBUT </Param> TAG </ Returns> PUBLIK MVCHTMLSTBOX CHECKST (HTML Bootstraphelper ini, ID String, Nama String, Bool Ischeck) {Return centang (html, id, nama, null, null, ischeck, false, null); } /// <summary> /// Return form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <returns>Return CheckBox tag</returns> public static MVCHTMLSTRING CHECKBOX (html bootstraphelper ini, ID string, nama string, nilai objek) {return centang kotak (html, id, nama, nilai, null, null, false, false, null); } /// <summary> /// return form Form Tag kotak /// </summary> /// <param name = "html"> contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> //// <param>//param name = "name"> name attribute </param> //// <param> name = "name" name = "name = param =" param = "param =" name = "name =" name = "name =" name = "name =" name = "name" name = "name" name = "name" name = "name" name = "name" name = "name" name = "name" /// <Returns> Tag kotak centang Return </returns> Public static mvchtmlString centang (html bootstraphelper ini, ID string, nama string, nilai objek, string teks) {return centang (html, id, nama, nilai, teks, null, false, false, null); } /// <summary> /// return Form centang tag /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> // <param> name "> name name ="> name </param> </param> </param name = "name =" name = "name"> name = "name" /// <param name="isCheck">Whether it is selected</param> /// <returns>Returns CheckBox tag</returns> public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, bool isCheck) { return CheckBox(html, id, name, value, text, null, isCheck, false, null); } /// <summary> /// return form Form Tag kotak /// </summary> /// <param name = "html"> contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> // <param> pex name "> name </name"> name = "name =" name = "name =" name "> </param name =" name " /// <param name="text"> name="labelClass">Label tag style</param> /// <returns>Return CheckBox tag</returns> public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, string labelClass) { return CheckBox(html, id, name, value, text, labelClass, false, false, null); } /// <summary> /// return Form centang tag /// </summary> /// <param name = "html"> Contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> // <param> name "> name name ="> name </param> </param> </param name = "name =" name = "name"> name = "name" /// <param name = "labelClass"> Gaya label </param> /// <param name = "isCheck"> apakah akan memeriksa </param> // <returns> tag kotak centang </returns> public static mvchtmlString, centang bootstraphelper html ini, ID string, nilai string, nilai string, string name, string name, string name string, string string name, string TEXTSCHLASE (string name string, string TEXTCHLASS (NAMA TEKST STRING, STRING STRING TEKSTRECKCKECK) nama, nilai, teks, labelclass, ischeck, false, null); } /// <summary> /// return form Form Tag kotak /// </summary> /// <param name = "html"> contoh metode ekstensi </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> // <param> pex name "> name </name"> name = "name =" name = "name =" name "> </param name =" name " /// <param name="labelClass">Style of label tag</param> /// <param name="isCheck">Is it selected</param> /// <param name="isDisabled">Disable</param> /// <returns>Return CheckBox tag</returns> public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool ischeck, bool isDisabled) {return centang kotak (html, id, nama, nilai, teks, labelClass, ischeck, isDisabled, null); } /// <summary> /// kembali ke tag kotak centang formulir /// </summary> /// <param name = "html"> contoh metode ekstensi </param> // <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param> "name" name = "name =" PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM/PARAM NOVET/PARAM/PARAM NOLE </PARAM> /// <param name = "labelClass"> Gaya label </param> /// <param name = "labelClass"> Gaya label </param> /// <param name = "isCheck"> apakah itu dipilih </param> // <param name = "isDisabled"> disable </param> // <param name = "oattribed"> disable </param> // <param name = "oattrib"> Disable </param> // <param name = "oattrib"> Disable </param> // <param name = "oattrib"> Disable </param> // <param name = "oattrib"> Disable </param> // <param name = "oattrib"> extra -tag </Param> TAG </ Returns> Public Static MVCHTMLSTRING CHECKBOX (HTML Bootstraphelper ini, ID String, Nama String, Nilai Objek, Teks String, String LabelClass, Bool Ischeck, Bool isDisabled, Object Oattributes) {Idictionary <String, Object> htmLattributes = null; if (oattributes! = null) {htmlattributes = bootstraphelper.anonymousObjectToHtmlattributes (oattributes); } else {htmlattributes = kamus baru <string, object> (); } return inputextensions.checkbox (html, inputType.checkbox, id, nama, nilai, teks, labelClass, ischeck, isDisabled, htmlattributes); }}}Blogger menyatukan label dan centang, dan melewati teks label yang sesuai saat menelepon, dan menggunakannya sebagai berikut:
<div> @Bootstrap.Radio("aa", "bb", "cc", "dd", null, true, false, null) </div> <div> @Bootstrap.Radio("fd", "cc", "cc", "CCC", "France", "radio-inline", true, false, null) @Bootstrap.Radio("dfer", "CC", "CC", "UK", "Radio-Inline", Benar, Salah, Null) </Div> <div> @bootstrap.checkbox ("fd", "cc2", "cc", "france", "-inline", true, false, null) @bootstrap.checkbox ("dfer", "ccc2, cc2, cc2, cc2, cc2," cccbox "," centang "," centang "," centang "," Benar, false, null) @bootstrap.checkbox ("erer", "cc2", "cc", "Italian", "centang-inline", true, false, null) </div>Hasil yang diperoleh:
4. Buttonextensions
Mengenai gaya tombol Bootstrap, ada instruksi terperinci di situs web resmi Bootstrap. Misalnya, tipe tombol umum termasuk tombol biasa, tombol kirim, dan tombol reset; Gaya tombol umum terutama sebagai berikut:
Selain itu, ukuran tombol juga diklasifikasikan:
Berdasarkan ini, kami telah merangkum tombol Tipe Bootstrap sebagai berikut
Buttonextensions.cs
menggunakan System; menggunakan System.Collections.Generic; menggunakan System.linq; menggunakan System.web; menggunakan System.web.mvc; namespace bootstrapextensions {public static class butonextensions {/// <summary> // return The Text Bootstrap Elemen Tombol dengan menggunakan helper helper dan bentuk Formulir Text. /// </summary> /// <param name = "html"> Instance helper html diperluas dengan metode ini. </param> /// <param name = "text"> Teks ditampilkan pada tombol. </param> /// <param name = "icon"> Ikon CSS Class. </param> /// <roistles> elemen tombol bootstrap. </returns> tombol public static MVChTMLString (html bootstraphelper ini, string teks, ikon string) {tombol return (html, teks, ikon, null); } /// <summary> /// kembalikan elemen tombol bootstrap teks dengan menggunakan helper html dan nama bidang bentuk yang ditentukan. /// </summary> /// <param name = "html"> Instance helper html diperluas dengan metode ini. </param> /// <param name = "text"> Teks ditampilkan pada tombol. </param> /// <param name = "icon"> Ikon CSS Class. </param> /// <param name = "type"> Jenis tombol. </param> /// <roistles> elemen tombol bootstrap. </returns> tombol public static MVChTmlString (html bootstraphelper ini, teks string, ikon string, tipe buttontype) {return tombol (html, teks, ikon, type, null); } /// <summary> /// kembalikan elemen tombol bootstrap teks dengan menggunakan helper html dan nama bidang bentuk yang ditentukan. /// </summary> /// <param name = "html"> Instance helper html diperluas dengan metode ini. </param> /// <param name = "text"> Teks ditampilkan pada tombol. </param> /// <param name = "icon"> Ikon CSS Class. </param> /// <param name = "htmlattributes"> Objek yang berisi atribut HTML untuk mengatur elemen. </param> /// <roistles> elemen tombol bootstrap. </returns> tombol mvchtmlstring statis public (html bootstraphelper ini, string teks, ikon string, objek htmlattributes) {tombol return (html, teks, ikon, buttontype.button, htmlattributes); } /// <summary> /// kembalikan elemen tombol bootstrap teks dengan menggunakan helper html dan nama bidang bentuk yang ditentukan. /// </summary> /// <param name = "html"> Instance helper html diperluas dengan metode ini. </param> /// <param name = "text"> Teks ditampilkan pada tombol. </param> /// <param name = "icon"> Ikon CSS Class. </param> /// <param name = "type"> Jenis tombol. </param> /// <param name = "htmlattributes"> Objek yang berisi atribut HTML untuk mengatur elemen. </param> /// <roistles> elemen tombol bootstrap. </returns> Tombol mvchtmlstring statis public (html bootstraphelper ini, teks string, ikon string, tipe buttontype, objek htmlattributes) {tombol return (html, teks, ikon, type, buttonclass.default, null); } /// <summary> /// kembalikan elemen tombol bootstrap teks dengan menggunakan helper html dan nama bidang bentuk yang ditentukan. /// </summary> /// <param name = "html"> Instance helper html diperluas dengan metode ini. </param> /// <param name = "text"> Teks ditampilkan pada tombol. </param> /// <param name = "icon"> Ikon CSS Class. </param> /// <param name = "cssclass"> Gaya tombol. </param> /// <roistles> elemen tombol bootstrap. </returns> Tombol mvchtmlstring statis publik (html bootstraphelper ini, teks string, ikon string, cssclassclass) {tombol return (html, teks, ikon, cssclass, null); } /// <summary> /// kembalikan elemen tombol bootstrap teks dengan menggunakan helper html dan nama bidang bentuk yang ditentukan. /// </summary> /// <param name = "html"> Instance helper html diperluas dengan metode ini. </param> /// <param name = "text"> Teks ditampilkan pada tombol. </param> /// <param name = "icon"> Ikon CSS Class. </param> /// <param name = "cssclass"> Gaya tombol. </param> /// <param name="htmlAttributes"> An object containing the HTML attributes to set for the element. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass, object htmlAttributes) { return Button(html, text, icon, ButtonType.Button, cssClass, null); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="type">button type. </param> /// <param name="cssClass">Button style. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass) { return Button(html, text, icon, type, cssClass, null); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">Extension method instance. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="type">button type. </param> /// <param name="cssClass">Button style. </param> /// <param name="htmlAttributes"> An object containing the HTML attributes to set for the element. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass, object htmlAttributes, ButtonSize size = ButtonSize.nm) { TagBuilder tag = new TagBuilder("button"); IDictionary<string, object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); attributes.Add("type", type.ToString().ToLower()); tag.AddCssClass("btn btn-" + cssClass.ToString().ToLower()); tag.MergeAttributes(attributes); TagBuilder span = new TagBuilder("span"); span.AddCssClass(icon.Substring(0, icon.IndexOf('-')) + " " + icon); if (size != ButtonSize.nm) { tag.AddCssClass("btn-" + size.ToString()); } span.Attributes.Add("aria-hidden", "true"); tag.InnerHtml = span.ToString() + text; return MvcHtmlString.Create(tag.ToString()); } } /// <summary> /// bootstrap button style/// </summary> public enum ButtonClass { /// <summary> /// // // </summary> Default, /// <summary> /// // // </summary> Primary, /// <summary> /// // // </summary> Success, /// <summary> /// /// </summary> Info, /// <summary> /// /// </summary> Warning, /// <summary> /// /// </summary> Danger, /// <summary> /// // // </summary> Link } /// <summary> /// bootstrap button type//// </summary> public enum ButtonType { /// <summary> /// Normal button/// </summary> Button, /// <summary> /// Submit button/// </summary> Submit, /// <summary> /// Reset button/// </summary> Reset } public enum ButtonSize { lg, nm, sm, xs }}1、将按钮的类型、样式、大小定义成了枚举类型，这样使用起来更加方便；
2、生成按钮必须的参数有text和icon，保证按钮的基本构成。
3、使用
<div>@Bootstrap.Button("测试按钮", "glyphicon-ok",ButtonClass.Primary)@Bootstrap.Button("提交", "glyphicon-ok", ButtonType.Submit, ButtonClass.Success, null, ButtonSize.lg) </div>五、总结
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。