คำนำ: บทความก่อนหน้านี้แนะนำความรู้พื้นฐานบางอย่างเกี่ยวกับการห่อหุ้ม bootstraphelper และบทความนี้ยังคงได้รับการปรับปรุง อ้างถึงวิธี HTMLHELPER บล็อกเกอร์นี้จะห่อหุ้มส่วนประกอบฟอร์มที่ใช้กันทั่วไป มีการพูดคุยกันมากเกินไปในความคิดเห็นก่อนหน้านี้เกี่ยวกับความสำคัญของการห่อหุ้ม bootstraphelper และฉันไม่ต้องการกังวลมากเกินไปเกี่ยวกับเรื่องนี้ ในระยะสั้นทุกอย่างมีผลกำไรและการสูญเสียมันขึ้นอยู่กับวิธีที่คุณเลือก หากคุณสนใจคุณสามารถดูได้ หากคุณไม่สนใจคุณสามารถพูดว่า "ตลก" โดยบล็อกเกอร์
แคตตาล็อกบทความ Bootstraphelper Series
C# Advanced Series - ห่อหุ้มส่วนประกอบ htmlhelper ของตัวเองทีละขั้นตอน: bootstraphelper
C# Advanced Series - ห่อหุ้มส่วนประกอบ HTMLHELPER ของตัวเองทีละขั้นตอน: BootStraPhelper (II)
C# Advanced Series - ห่อหุ้มส่วนประกอบ HTMLHELPER ของตัวเองทีละขั้นตอน: BootStraPhelper (3: ด้วยซอร์สโค้ด)
1. เพิ่ม bootstraphelper ทั่วไปใหม่
ในบทความก่อนหน้าบล็อกเกอร์ได้กำหนดประเภทสามัญ Bootstraphelper เพื่อสืบทอด Htmlhelper เนื่องจากเมื่อพิจารณาถึงความจำเป็นในการใช้ Lamada เพื่อกำหนดส่วนประกอบบล็อกเกอร์ได้เพิ่มประเภท Bootstraphelper ทั่วไป ดังนั้น Bootstraphelper จึงกลายเป็นเช่นนี้
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; การใช้ System.web.routing; namespace bootstrapextensions {คลาสสาธารณะ bootstraphelper: system.web.mvc.htmlhelper {// คอนเทนเนอร์. /// </summary> /// <param name = "viewContext"> viewContainer </param> /// <param name = "viewDatacontainer"> viewDatacontainer </param> public BootStraPhelper คลาส Bootstraphelper พร้อมบริบทมุมมองที่ระบุ ViewDatacontainer และเส้นทางการรวบรวมเส้นทาง /// </summary> /// <param name = "viewContext"> ดูบริบท </param> /// <param name = "viewDatacontainer"> ดูข้อมูลคอนเทนเนอร์ </param> /// <param name = "RouteCollection"> การรวบรวมเส้นทาง ฐาน (viewContext, viewDatacontainer, routecollection) {}} /// <summary> /// ระบุว่าการควบคุม bootstrap ได้รับการสนับสนุนในมุมมองที่พิมพ์อย่างรุนแรง /// </summary> /// <typeparam name = "tmodel"> </perparam> คลาสสาธารณะ bootstraphelper <tmodel>: bootstraphelper {/// <summary> /// เริ่มต้นอินสแตนซ์ใหม่ของ <! /// </summary> /// <param name = "viewContext"> ดูบริบท </param> /// <param name = "viewDatacontainer"> ดูคอนเทนเนอร์ข้อมูล </param> Public Bootstraphelper (ViewContext ViewContext, iviewDatacontainer): base (viewContext, viewDatacontainer) {} /// <summary> /// เริ่มต้นอินสแตนซ์ใหม่ของ <! /// </summary> /// <param name = "viewContext"> ดูบริบท </param> /// <param name = "viewDatacontainer"> ดูคอนเทนเนอร์ข้อมูล </param> /// <param name = "routecollection"> การรวบรวมเส้นทาง </param> public bootstraphelper (viewContext viewContext, iviewDatacontainer viewDatacontainer, routecollection routecollection): base (viewContext, viewDatacontainer, routecollection) {}}}}}}}}วัตถุ bootstrap ของเรายังถูกกำหนดให้เป็นวัตถุทั่วไป
บทคัดย่อระดับสาธารณะ BootstrapwebViewPage <Tmodel>: System.web.mvc.webViewPage <Tmodel> {// ตัวแปรที่ใช้ในหน้า cshtml public bootstraphelper <Tmodel> bootstrap {get; ชุด; } /// <summary> /// เริ่มต้นวัตถุ bootstrap /// </summary> โมฆะการแทนที่สาธารณะ INITHELPERS () {base.inithelpers (); bootstrap = ใหม่ bootstraphelper <Tmodel> (viewContext, this); } การแทนที่เป็นโมฆะ public encute () {// โยน notimplementedException ใหม่ (); -ความหมายของสิ่งนี้คือการใช้ @bootstrap.textboxfor (x => x.name) ในหน้า cshtml สิ่งนี้จะถูกนำมาใช้ในภายหลังมาวางข้อคาดการณ์ล่วงหน้าที่นี่
2. textboxextensions
รหัสการใช้งานของ textboxExtensions.cs มีดังนี้:
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.linq.expressions; การใช้ System.reflection; การใช้ System.web; การใช้ System.web.mvc; การใช้ System.web.mvc.html; namespace bootstrapextensions /// โดยใช้ HTML ที่ระบุชื่อของฟิลด์ตัวช่วยและฟอร์มให้ส่งคืนแท็กกล่องข้อความ /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "ชื่อ"> ชื่อแอตทริบิวต์ชื่อ Bootstraphelper HTML, ชื่อสตริง) {return inputextensions.helper (html, inputType.text, null, ชื่อ, null, false, null); } /// <summary> /// โดยใช้ HTML ที่ระบุชื่อของฟิลด์ตัวช่วยและฟอร์มที่ระบุให้ส่งคืนป้ายกำกับกล่องข้อความ /// </summary> /// <param name = "html"> method method </param> /// <param = "id"> id </param> // <param type = 'text' แท็ก </returns> public Static mvchtmlstring textbox (bootstraphelper html, รหัสสตริง, ชื่อสตริง) {return inputextensions.helper (html, inputtype.text, id, ชื่อ, null, false, false, null); } /// <summary> /// ส่งคืนแท็กกล่องข้อความโดยใช้ตัวช่วย HTML ที่ระบุและชื่อฟิลด์ฟิลด์ชื่อ /// </summary> /// <param name = "html"> อินสแตนซ์เมธอดส่วนขยาย </param> /// <param = "ชื่อ" แท็ก </returns> public static mvchtmlstring textbox (bootstraphelper html, รหัสสตริง, ชื่อสตริง, ค่าวัตถุ) {return inputextensions.helper (html, inputtype.text, id, ชื่อ, ค่า, เท็จ, null); } /// <summary> /// ส่งคืนแท็กกล่องข้อความโดยใช้ตัวช่วย HTML ที่ระบุและชื่อฟิลด์ฟิลด์ /// </summary> /// <param name = "html"> method method Extension </param> // <param = "name"> ค่าแอตทริบิวต์ชื่อองค์ประกอบเดียว </param> // name = "placeholder"> ค่าอินพุตพรอมต์ของ Bootstrap </param> /// <return> return type = 'text' แท็ก </returns> public Static mvchtmlstring textbox (bootstraphelper html, id <string string, string, string if (! string.isnullorEmpty (ตัวยึด)) {attributes.add ("ตัวยึดตำแหน่ง", ตัวยึดตำแหน่ง); } return inputextensions.helper (html, inputtype.text, id, ชื่อ, ค่า, เท็จ, แอตทริบิวต์); } /// <summary> /// ส่งคืนแท็กกล่องข้อความโดยใช้ตัวช่วย HTML ที่ระบุและชื่อฟิลด์ฟิลด์ /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param = "ชื่อ"> name = "htmlattributes"> แอตทริบิวต์พิเศษ </param> /// <return> ส่งคืนประเภทอินพุต = 'text' แท็ก </returns> สาธารณะ mvchtmlstring ข้อความ (bootstraphelper html, id สตริง, ชื่อสตริง, ค่าวัตถุ bootstraphelper.anonymousobjecttohtmlattributes (htmlattributes); return inputextensions.helper (html, inputtype.text, id, ชื่อ, ค่า, เท็จ, แอตทริบิวต์); } /// <summary> /// โดยใช้ HTML ที่ระบุชื่อของฟิลด์ตัวช่วยและฟอร์มให้ส่งกลับป้ายกำกับกล่องข้อความ /// </summary> /// <param name = "html"> method method method </param> /// <param = "ชื่อ"> ค่าแอททริบิว name = "placeholder"> ค่าอินพุตพรอมต์ของกล่องข้อความที่มาพร้อมกับ bootstrap </param> /// <param name = "htmlattributes"> แอตทริบิวต์พิเศษ </param> /// <returs> return type = 'text' tag </returns> public Strings htmlattributes) {idictionary <string, object> attributes = bootstraphelper.anonymousobjecttohtmlattributes (htmlattributes); if (! string.isnullorEmpty (ตัวยึด)) {attributes.add ("ตัวยึดตำแหน่ง", ตัวยึดตำแหน่ง); } return inputextensions.helper (html, inputtype.text, id, ชื่อ, ค่า, เท็จ, แอตทริบิวต์); } สาธารณะ mvchtmlstring textboxfor <tmodel, tproperty> (bootstraphelper <tmodel> html, นิพจน์ <func <tmodel, tproperty >> นิพจน์) {var model = (tmodel) html.viewdata.model; String PropertyName; ค่าวัตถุ; inputextensions.getValueByExpression <tmodel, tproperty> (นิพจน์, โมเดล, ออกคุณสมบัติ, ค่าออก, ค่าออก); return inputextensions.helper (html, inputtype.text, propertyName, propertyName, ค่า, เท็จ, null); -inputextensions.cs
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.linq.expressions; การใช้ System.reflection; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {/// <summary> /// Bootstrap Helper (Bootstraphelper HTML, inputType inputType, id สตริง, ชื่อสตริง, ค่าวัตถุ, bool ischeck, idictionary <สตริง, วัตถุ> htmlattributes) {// กำหนดชื่อของแท็กแท็กแท็กแท็ก = tagbuilder ใหม่ ("อินพุต"); if (htmlattributes == null) {htmlattributes = พจนานุกรมใหม่ <string, object> (); } // เพิ่มชื่อถ้า (! string.isnullorEmpty (ชื่อ)) {htmlattributes.add ("ชื่อ", ชื่อ); } // เพิ่ม ID if (! string.isnullorEmpty (id)) {htmlattributes.add ("id", id); } // เพิ่มค่าถ้า (value! = null) {htmlattributes.add ("value", value.toString ()); } // เพิ่ม typ type อินพุต mergeattribute ("type", htmlhelper.getInputTypestring (inputType)); // เพิ่มแท็กสไตล์เริ่มต้น addcssclass ("form-control"); tag.mergeattributes (htmlattributes); if (inputType == inputType.radio || inputType == inputType.checkbox) {ถ้า (ischeck) tag.mergeattribute ("ตรวจสอบ", "ตรวจสอบ"); } ส่งคืน mvchtmlstring.create (tag.toString ()); } /// <summary> /// ส่งคืนฟอร์มวิทยุแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์เมธอดส่วนขยาย </param> /// <param name = "id"> id </param> /// <param name = "param> ////////////////////////////// <param name = "labelclass"> รูปแบบของแท็กป้ายกำกับ </param> /// <param name = "ischeck"> ไม่ว่าจะถูกเลือก </param> /// <param name = "iSdisabled"> ปิดการใช้งาน </param> /// <param name = "Oattributes" HTML, inputType inputType, id สตริง, ชื่อสตริง, ค่าวัตถุ, ข้อความสตริง, สตริง labelclass, bool ischeck, bool iSdisabled, idictionary <สตริง, วัตถุ> htmlattributes) {// กำหนดชื่อของแท็กแท็กแท็กแท็กแท็กแท็ก if (! string.isnullorEmpty (labelclass)) {htmlattributes.add ("คลาส", labelclass); } system.text.stringBuilder sbinput = ใหม่ system.text.stringBuilder (); var strinputType = htmlhelper.getInputTypestring (inputType); sbinput.append ("<อินพุต type = '") ผนวก (strinputType) .append ("'"); if (! string.isnullorEmpty (ชื่อ)) {sbinput.append ("name = '") .append (ชื่อ) .append ("'"); } if (! string.isnullorempty (id)) {sbinput.append ("id = '") .append (id) .append ("'"); } if (value! = null) {sbinput.append ("value = '") .append (value.toString ()). ผนวก ("" "); } if (ischeck) {sbinput.append ("checked = 'checked'"); } if (isDisabled) {sbinput.append ("ปิดใช้งาน"); } sbinput.append (" />"); if (! string.isnullorEmpty (ข้อความ)) {sbinput.append (ข้อความ); } tag.innerhtml = sbinput.toString (); tag.mergeattributes (htmlattributes); ส่งคืน mvchtmlstring.create (tag.toString ()); } // รับค่าคุณสมบัติปัจจุบันผ่านการแสดงออกสาธารณะคงที่คงที่คงที่ getValueByExpression <tmodel, tproperty> (นิพจน์ <func <tmodel, tproperty >> นิพจน์, โมเดล tmodel, ออกมาชื่อสตริง, ค่าวัตถุออก) var lamadaname = (body.member เป็น PropertyInfo)? body.member.name: null; PropertyName = lamadaname; ค่า = 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 (โมเดล, null); -1. การพิจารณาว่ากล่องข้อความกล่องข้อความที่ใช้ bootstrap ทั้งหมดในโครงการมีรูปแบบ class = "form-control" ดังนั้นเมื่อห่อหุ้มกล่องข้อความมันจะถูกวางไว้ในฉลากโดยตรง แน่นอนหากโครงการของคุณไม่จำเป็นต้องใช้สิ่งนี้หรือคุณได้ปรับแต่งสไตล์กล่องข้อความคุณสามารถเขียนสไตล์ของคุณเองได้ที่นี่เพื่อที่คุณจะได้ไม่จำเป็นต้องเพิ่มสไตล์เหล่านี้ทุกครั้งที่คุณประกาศกล่องข้อความ
2. เมธอด textboxfor () รวมการใช้ Lamada เพื่อสร้างกล่องข้อความ วัตถุประเภท bootstraphelper ทั่วไปที่ประกาศไว้ข้างต้นมีประโยชน์ ชื่อแอตทริบิวต์และค่าแอตทริบิวต์ใน LaMada จะอ่านผ่านการสะท้อนและทั่วไป มีการกำหนดวิธีเดียวเท่านั้นที่นี่ หากจำเป็นต้องมีการโอเวอร์โหลดอื่น ๆ คุณสามารถเพิ่มวิธีการใหม่ด้วยตัวเอง
3. พบปัญหาอื่นเมื่อใช้งาน เนื่องจาก bootstraphelper สืบทอดไปยังประเภท htmlhelper วิธีการขยาย Htmlhelper บางส่วนที่ห่อหุ้มใน MVC สามารถเรียกได้โดยตรงสำหรับวัตถุ bootstrap ของเรา ดังนั้นการโอเวอร์โหลดจำนวนมากอาจซ้ำกันและไม่สามารถพบโอเวอร์โหลดที่สอดคล้องกันได้เช่น:
ด้วยวิธีนี้ข้อผิดพลาดต่อไปนี้เกิดขึ้นได้ง่าย:
ดังนั้นเนื่องจากปัญหาเกิดขึ้นเราต้องหาวิธีแก้ปัญหา ทางออกหนึ่งที่บล็อกเกอร์คิดคือ: แสดงความคิดเห็นเนมสเปซที่วัตถุ HTML ใน web.config ของมุมมอง ตัวอย่างเช่น:
ด้วยวิธีนี้เราสามารถแก้ปัญหาข้างต้นและเรียกใช้เอฟเฟกต์ต่อไปนี้:
หลังจากแสดงความคิดเห็นเกี่ยวกับเนมสเปซข้างต้นเราจะไม่สามารถใช้วิธีการขยายที่เกี่ยวข้องของตัวแปร HTML ในหน้า CSHTML ได้อีกต่อไป หากผู้ช่วยของคุณเองก็เพียงพอแล้วก็ไม่ควรเป็นปัญหาใหญ่หากไม่มีวิธีการขยายแบบดั้งเดิม
3. RadioExtensions และ CheckBoxExtensions
เกี่ยวกับส่วนประกอบวิทยุและช่องทำเครื่องหมายใน Bootstrap บล็อกเกอร์อ้างถึงวิธีการเขียนใน http://v3.bootcss.com/css/ และห่อหุ้มไว้ดังนี้:
Radioextensions.cs
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {คลาสคงที่ระดับสาธารณะ radioextensions {/// <summary> /// ชื่อ <//////// แอตทริบิวต์ </param> /// <turns> ส่งคืนแท็กวิทยุส่งคืน </returns> วิทยุ mvchtmlstring สาธารณะ (Bootstraphelper html, ชื่อสตริง) {return reado (html, null, ชื่อ, null, null, null, null, null, false, false, false, null); } /// <summary> /// ส่งคืนฟอร์มวิทยุแท็ก /// </summary> /// <param name = "html"> method method method </param> /// <param name = "id"> id </param> /// <param name = "name"> ชื่อ HTML, String ID, ชื่อสตริง) {return Radio (HTML, ID, ชื่อ, NULL, NULL, NULL, NULL, FALSE, FALSE, NULL); } /// <summary> /// ส่งคืนฟอร์มวิทยุแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "name"> ชื่อ แท็ก </returns> วิทยุ mvchtmlstring สาธารณะ (Bootstraphelper html, รหัสสตริง, ชื่อสตริง, bool ischeck) {return reado (html, id, ชื่อ, null, null, null, ischeck, false, null); } /// <summary> /// ส่งคืนฟอร์มวิทยุแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "name"> ชื่อ MVCHTMLSTRING RADIO (BootStraPhelper HTML, ID สตริง, ชื่อสตริง, ค่าวัตถุ) {return Radio (HTML, ID, ชื่อ, ค่า, ค่า, NULL, NULL, FALSE, FALSE, NULL); } /// <summary> /// ส่งคืนแท็กวิทยุฟอร์ม /// </summary> /// <param name = "html"> อินสแตนซ์เมธอดส่วนขยาย </param> /// <param name = "id"> id </param> /// <param name = "name"> ชื่อ <returns> ส่งคืนแท็กวิทยุ </returns> วิทยุ MVCHTMLString สาธารณะ (BootStraPhelper HTML นี้, รหัสสตริง, ชื่อสตริง, ค่าวัตถุ, ข้อความสตริง) {return Radio (HTML, ID, ชื่อ, ค่า, ข้อความ, โมฆะ, เท็จ, เท็จ, null); } /// <summary> /// ส่งคืนแท็กวิทยุฟอร์ม /// </summary> /// <param name = "html"> อินสแตนซ์เมธอดส่วนขยาย </param> /// <param name = "id"> id </param> /// <param name = "name"> ชื่อ <param name = "ischeck"> ไม่ว่าจะถูกเลือก </param> /// <กลับ> ส่งคืนแท็กวิทยุ </returns> วิทยุ MVCHTMLString สาธารณะ (Bootstraphelper HTML, รหัสสตริง, ชื่อสตริง, ค่าสตริง, bool ischeck) } /// <summary> /// ส่งคืนแท็กวิทยุแบบฟอร์ม /// </summary> /// <param name = "html"> ตัวอย่างวิธีการขยายตัวอย่าง </param> /// <param name = "id"> id </param> /// <param name = "name"> ชื่อ <param name = "labelclass"> รูปแบบแท็กฉลาก </param> /// <returs> ส่งคืนแท็กวิทยุส่งคืน </returns> วิทยุ mVchtmlstring สาธารณะ (Bootstraphelper html นี้, รหัสสตริง, ชื่อสตริง, ค่าสตริง, สตริง labelclass) } /// <summary> /// ส่งคืนแท็กวิทยุฟอร์ม /// </summary> /// <param name = "html"> อินสแตนซ์เมธอดส่วนขยาย </param> /// <param name = "id"> id </param> /// <param name = "name"> ชื่อ <param name = "text"> name = "labelclass"> รูปแบบของแท็กป้ายกำกับ </param> /// <param name = "ischeck"> ไม่ว่าจะเลือก </param> /// <turns> แท็กวิทยุส่งคืน </returns> mvchtmlstring วิทยุ (bootstraphelper html ID, ชื่อ, ค่า, ข้อความ, labelclass, ischeck, false, null); } /// <summary> /// ส่งคืนแท็กวิทยุฟอร์ม /// </summary> /// <param name = "html"> อินสแตนซ์เมธอดส่วนขยาย </param> /// <param name = "id"> id </param> /// <param name = "name"> ชื่อ <param name = "labelclass"> สไตล์ของป้ายกำกับ </param> /// <param name = "isCheck"> มันถูกเลือก </param> /// <param name = "IsDisabled"> ปิดการใช้งาน </param> /// ischeck, bool isdisabled) {return radio (html, id, ชื่อ, ค่า, ข้อความ, labelclass, ischeck, isdisabled, null); } /// <summary> /// กลับไปที่รูปแบบวิทยุแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param = "id"> id </param> /// <param name = "param> /////////////////////////////////// <param name = "labelclass"> รูปแบบของป้ายกำกับ </param> /// <param name = "ischeck"> ไม่ว่าจะเป็น </param> /// <param name = "IsDisabled"> ปิดใช้งาน </param> /// <param name = "Oattributes"> tag extra </param> /// ID, ชื่อสตริง, ค่าวัตถุ, ข้อความสตริง, สตริง labelclass, bool ischeck, bool isDisabled, object oattributes) {idictionary <string, object> htmlattributes = null; if (oattributes! = null) {htmlattributes = bootstraphelper.anonymousobjecttohtmlattributes (oattributes); } else {htmlattributes = พจนานุกรมใหม่ <string, object> (); } return inputextensions.checkbox (html, inputtype.radio, id, ชื่อ, ค่า, ข้อความ, labelclass, ischeck, isdisabled, htmlattributes); -CheckBoxExtensions.cs
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {checkboxextensions คลาสคงที่สาธารณะ {/// <summary> /// ส่งกลับแท็ก NAME = "NAME"> NAME ATTRIBUTE </param> /// <returs> แท็กช่องทำเครื่องหมายส่งคืน </returns> ช่องทำเครื่องหมาย mVCHTMLString สาธารณะ (BootStraPhelper HTML ชื่อสตริง) {ช่องทำเครื่องหมายส่งคืน (HTML, NULL, NAME, NULL, NULL } /// <summary> /// ส่งคืนแท็กช่องทำเครื่องหมายฟอร์ม /// </summary> /// <param name = "html"> วิธีการขยายวิธีการ </param> /// <param name = "id"> id </param> /// <param = "name"> ชื่อ BootStraPhelper HTML, String ID, ชื่อสตริง) {ช่องทำเครื่องหมายส่งคืน (HTML, ID, ชื่อ, NULL, NULL, NULL, FALSE, FALSE, NULL); } /// <summary> /// ส่งคืนช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "ชื่อ" แท็ก </returns> ช่องทำเครื่องหมายสาธารณะคงที่ MVCHTMLSTRING (BootStraPhelper HTML, รหัสสตริง, ชื่อสตริง, บูล ischeck) {ช่องทำเครื่องหมายส่งคืน (HTML, ID, ชื่อ, NULL, NULL, ISCHECK, FALSE, NULL); } /// <summary> /// ส่งคืนช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "name"> ชื่อ ช่องทำเครื่องหมาย MVCHTMLString (BootStraPhelper HTML, ID สตริง, ชื่อสตริง, ค่าวัตถุ) {ช่องทำเครื่องหมายส่งคืน (HTML, ID, ชื่อ, ค่า, ค่า, โมฆะ, NULL, FALSE, FALSE, NULL); } /// <summary> /// ส่งคืนช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// param = "ชื่อ" /// <turns> แท็กกล่องกาเครื่องหมายส่งคืน </returns> ช่องทำเครื่องหมายสาธารณะคงที่ MVCHTMLString (BootStraPhelper HTML, รหัสสตริง, ชื่อสตริง, ค่าวัตถุ, ข้อความสตริง) {ช่องทำเครื่องหมายส่งคืน (HTML, ID, ชื่อ, ค่า, ข้อความ, null, เท็จ, เท็จ, null); } /// <summary> /// ส่งคืนช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param = "id"> id </param> /// <param name = "param> ////////////////////////////// <param name = "ischeck"> ไม่ว่าจะถูกเลือก </param> /// <return> แท็กช่องทำเครื่องหมายส่งคืน </returns> สาธารณะ mVCHTMLString สาธารณะสาธารณะ } /// <summary> /// ส่งคืนช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param = "id"> id </param> /// <param name = "param> ////////////////////////////// <param name = "text"> name = "labelclass"> รูปแบบแท็กฉลาก </param> /// <returs> แท็กกล่องกาเครื่องหมายส่งคืน </returns> ช่องทำเครื่องหมายสาธารณะคงที่ mvchtmlstring สาธารณะ } /// <summary> /// ส่งคืนช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> ตัวอย่างวิธีการขยายตัวอย่าง </param> /// <param name = "id"> id </param> /// <param name = "param> ///////////////////////////////////// th show <param name = "labelclass"> รูปแบบของป้ายกำกับ </param> /// <param name = "isCheck"> ไม่ว่าจะตรวจสอบ </param> /// <return> แท็กกล่องกาเครื่องหมายส่งคืน </return> public mvchtmlstring ช่องทำเครื่องหมาย (BOOTSTRAPHELPER HTML ค่า, ข้อความ, labelclass, ischeck, false, null); } /// <summary> /// ส่งคืนช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param = "id"> id </param> /// <param name = "param> ////////////////////////////// <param name = "labelclass"> สไตล์ของแท็กป้ายกำกับ </param> /// <param name = "ischeck"> มันถูกเลือก </param> /// <param name = "isDisabled"> ปิดใช้งาน </param> /// บูล ischeck, บูล iSdisabled) {ช่องทำเครื่องหมายส่งคืน (HTML, ID, ชื่อ, ค่า, ข้อความ, labelclass, ischeck, isDisabled, null); } /// <summary> /// กลับไปที่ช่องทำเครื่องหมายฟอร์มแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์เมธอดขยาย </param> /// <param = "id"> id </param> /// <param = "param>/param) /// <param name = "labelclass"> สไตล์ของป้ายกำกับ </param> /// <param name = "labelclass"> รูปแบบของป้ายกำกับ </param> /// <param name = "isCheck"> มันเลือก </param> /// <param = "isDisabled"> disable </param> // ช่องทำเครื่องหมายสาธารณะคงที่ MVCHTMLSTRING (BootStraPhelper HTML นี้, รหัสสตริง, ชื่อสตริง, ค่าวัตถุ, ข้อความสตริง, สตริง labelclass, bool ischeck, บูล iSdisabled, Object Oattributes) if (oattributes! = null) {htmlattributes = bootstraphelper.anonymousobjecttohtmlattributes (oattributes); } else {htmlattributes = พจนานุกรมใหม่ <string, object> (); } return inputextensions.checkbox (html, inputtype.checkbox, id, ชื่อ, ค่า, ข้อความ, labelclass, ischeck, isdisabled, htmlattributes); -บล็อกเกอร์นำฉลากและช่องทำเครื่องหมายเข้าด้วยกันและส่งข้อความฉลากที่เกี่ยวข้องเมื่อโทรและใช้ดังนี้:
<div> @bootstrap.radio ("aa", "bb", "cc", "dd", null, true, false, null) </div> <div> @bootstrap.radio ("fd", "cc", "cc", "ccc", "France" "CC", "UK", "Radio-inline", true, false, null) </div> <div> @bootstrap.checkbox ("fd", "cc2", "cc", "ฝรั่งเศส", "ccc2", true, false, null) @bootstrap.checkbox ( @bootstrap.checkbox ("erer", "cc2", "cc", "อิตาลี", "ช่องทำเครื่องหมายอินไลน์", จริง, เท็จ, เท็จ) </div>ได้รับผลลัพธ์:
4. buttonextensions
เกี่ยวกับรูปแบบปุ่มของ bootstrap มีคำแนะนำโดยละเอียดในเว็บไซต์ทางการของ Bootstrap ตัวอย่างเช่นประเภทปุ่มทั่วไปรวมถึงปุ่มธรรมดาส่งปุ่มและปุ่มรีเซ็ต รูปแบบปุ่มทั่วไปมีดังนี้:
นอกจากนี้ขนาดของปุ่มยังถูกจัดประเภท:
จากสิ่งนี้เราได้ห่อหุ้มปุ่มประเภท bootstrap ดังต่อไปนี้
buttonextensions.cs
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {buttonextensions คลาสคงที่สาธารณะ {/// <summary> /// ส่งกลับองค์ประกอบปุ่ม bootstrap ข้อความที่ระบุ /// </summary> /// <param name = "html"> อินสแตนซ์ HTML Helper ที่ขยายโดยวิธีนี้ </param> /// <param name = "text"> ข้อความที่แสดงบนปุ่ม </param> /// <param name = "ไอคอน"> คลาสไอคอน CSS </param> /// <returs> องค์ประกอบปุ่ม bootstrap </returns> ปุ่ม MVCHTMLSTRING สาธารณะคงที่ (BootStraPhelper HTML, ข้อความสตริง, ไอคอนสตริง) {ปุ่มส่งคืน (HTML, ข้อความ, ไอคอน, NULL); } /// <summary> /// ส่งคืนองค์ประกอบปุ่ม Bootstrap ข้อความโดยใช้ชื่อ HTML HELPER และชื่อฟิลด์ฟอร์มที่ระบุ /// </summary> /// <param name = "html"> อินสแตนซ์ HTML Helper ที่ขยายโดยวิธีนี้ </param> /// <param name = "text"> ข้อความที่แสดงบนปุ่ม </param> /// <param name = "ไอคอน"> คลาสไอคอน CSS </param> /// <param name = "type"> ประเภทปุ่ม </param> /// <returs> องค์ประกอบปุ่ม bootstrap </returns> ปุ่ม MVCHTMLSTRING สาธารณะคงที่ (BootStraPhelper HTML, ข้อความสตริง, ไอคอนสตริง, ประเภท buttonType) {ปุ่มส่งคืน (HTML, ข้อความ, ไอคอน, ประเภท, null); } /// <summary> /// ส่งคืนองค์ประกอบปุ่ม Bootstrap ข้อความโดยใช้ชื่อ HTML HELPER และชื่อฟิลด์ฟอร์มที่ระบุ /// </summary> /// <param name = "html"> อินสแตนซ์ HTML Helper ที่ขยายโดยวิธีนี้ </param> /// <param name = "text"> ข้อความที่แสดงบนปุ่ม </param> /// <param name = "ไอคอน"> คลาสไอคอน CSS </param> /// <param name = "htmlattributes"> วัตถุที่มีแอตทริบิวต์ HTML เพื่อตั้งค่าสำหรับองค์ประกอบ </param> /// <returs> องค์ประกอบปุ่ม bootstrap </returns> ปุ่ม MVCHTMLString สาธารณะคงที่ (BootStraPhelper HTML, ข้อความสตริง, ไอคอนสตริง, วัตถุ htmlattributes) {ปุ่มส่งคืน (HTML, ข้อความ, ไอคอน, buttonType.button, htmlattributes); } /// <summary> /// ส่งคืนองค์ประกอบปุ่ม Bootstrap ข้อความโดยใช้ชื่อ HTML HELPER และชื่อฟิลด์ฟอร์มที่ระบุ /// </summary> /// <param name = "html"> อินสแตนซ์ HTML Helper ที่ขยายโดยวิธีนี้ </param> /// <param name = "text"> ข้อความที่แสดงบนปุ่ม </param> /// <param name = "ไอคอน"> คลาสไอคอน CSS </param> /// <param name = "type"> ประเภทปุ่ม </param> /// <param name = "htmlattributes"> วัตถุที่มีแอตทริบิวต์ HTML เพื่อตั้งค่าสำหรับองค์ประกอบ </param> /// <returs> องค์ประกอบปุ่ม bootstrap </returns> ปุ่ม MVCHTMLSTRING สาธารณะแบบคงที่ (BootStraPhelper HTML นี้ข้อความสตริงไอคอนสตริงประเภทปุ่มปุ่ม htmlattributes วัตถุ) {ปุ่มส่งคืน (HTML, ข้อความ, ไอคอน, ประเภท, buttonclass.default, null); } /// <summary> /// ส่งคืนองค์ประกอบปุ่ม Bootstrap ข้อความโดยใช้ชื่อ HTML HELPER และชื่อฟิลด์ฟอร์มที่ระบุ /// </summary> /// <param name = "html"> อินสแตนซ์ HTML Helper ที่ขยายโดยวิธีนี้ </param> /// <param name = "text"> ข้อความที่แสดงบนปุ่ม </param> /// <param name = "ไอคอน"> คลาสไอคอน CSS </param> /// <param name = "cssclass"> รูปแบบปุ่ม </param> /// <returs> องค์ประกอบปุ่ม bootstrap </returns> ปุ่ม MVCHTMLString สาธารณะคงที่ (HTML bootStraPhelper, ข้อความสตริง, ไอคอนสตริง, ปุ่ม CSSCLASS) {ปุ่มส่งคืน (HTML, ข้อความ, ไอคอน, CSSCLASS, NULL); } /// <summary> /// ส่งคืนองค์ประกอบปุ่ม Bootstrap ข้อความโดยใช้ชื่อ HTML HELPER และชื่อฟิลด์ฟอร์มที่ระบุ /// </summary> /// <param name = "html"> อินสแตนซ์ HTML Helper ที่ขยายโดยวิธีนี้ </param> /// <param name = "text"> ข้อความที่แสดงบนปุ่ม </param> /// <param name = "ไอคอน"> คลาสไอคอน CSS </param> /// <param name = "cssclass"> รูปแบบปุ่ม </param> /// <param name = "htmlattributes"> วัตถุที่มีแอตทริบิวต์ HTML เพื่อตั้งค่าสำหรับองค์ประกอบ </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>五、总结
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น