서문 : 이전 기사는 부트 스트랩 펠퍼 캡슐화에 대한 몇 가지 기본 지식을 소개 하며이 기사는 계속 개선되고 있습니다. HTMLHELPER 방법을 언급 하면서이 블로거는 먼저 일반적으로 사용되는 일부 양식 구성 요소를 캡슐화합니다. Bootstraphelper 캡슐화의 중요성이 무엇인지에 대한 이전 의견에서 너무 많은 논의가 있었으며, 그것에 대해 너무 걱정하고 싶지 않습니다. 요컨대, 모든 것이 이익과 손실이 있으며, 선택한 방법에 따라 다릅니다. 관심이 있으시면 살펴볼 수 있습니다. 관심이 없다면 블로거의 "농담"이라고 말할 수 있습니다.
Bootstraphelper 시리즈 기사 카탈로그
C# Advanced Series- 자체 htmlhelper 구성 요소 단계별 캡슐화 : bootstraphelper
C# Advanced Series- 자체 HTMLHELPER 구성 요소 단계별 캡슐화 : Bootstraphelper (II)
C# Advanced Series- 자체 HTMLHELPER 구성 요소 단계별로 캡슐화 : BootStraphelper (3 : 소스 코드 포함)
1. 새로운 제네릭 부트 스트랩퍼를 추가하십시오
이전 기사에서 블로거는 htmlhelper를 상속하기 위해 Bootstraphelper 일반 유형 만 정의했습니다. Lamada를 사용하여 구성 요소를 정의해야 할 필요성을 고려하기 때문에 Blogger는 Bootstraphelper Generic 유형을 추가했습니다. 그래서 부트 스트랩퍼는 이렇게되었습니다.
System.Collections.generic 사용 사용 시스템 사용; System.Web; System.Web 사용; System.Web.MVC 사용; System.Web.Routing 사용; 네임 스페이스 BootstrapElper : System.Mvc.htmlhelper {/// <Summally> /// 초기에 새로운 인스턴스를 사용하여 새로운 인스턴스를 사용하여 BoottrOpelper를 사용합니다. 데이터 컨테이너. /// </summary> /// <param name = "viewContext"> viewContainer </param> /// <param name = "ViewDataconTainer"> viewDataconTainer </param> public bootstraphelper (ViveContext viewContext, iviewDatacontainer) : base (vasecontext, viewDataconTainer)} {} // // 지정된 뷰 컨텍스트, ViewDatacontainer 및 Route Collection이있는 Bootstraphelper 클래스의 새로운 인스턴스. /// </summary> /// <param name = "viewContext"> view context </param> /// <param name = "viewDataconTainer"> view data container </param> /// <param name = "RouteEcollection"> Route Collection </param> public bootstraphelper (viewContext viewContext, viewDatacOntainer) : iviewDatacOntainer viewDatacOltainer. Base (ViewContext, ViewDataconTainer, RouteCollection) {}} /// <summary> ///는 부트 스트랩 컨트롤이 강력하게 입력 된 뷰에서 지원된다는 것을 나타냅니다. /// </summary> /// <typeparam name = "tmodel"> </typeparam> public class 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"> Route Collection. </param> public bootstraphelper (ViewContext ViewContext, iviewDatacontainer ViewDataconTainer, RouteCollection RouteCollection) : Base (ViewContext, ViewDataconTainer, RouteCollection) {}}}부트 스트랩 객체는 또한 일반 객체로 정의됩니다.
공개 초록 클래스 BootstraPwebViewPage <TModel> : System.Web.mvc.webViewPage <TModel> {// cshtml 페이지에 사용되는 변수 public bootstraphelper <tmodel> bootstrap {get; 세트; } /// <summary> /// 부트 스트랩 객체 초기화 /// </summary> public override void inithelpers () {base.inithelpers (); bootstrap = new bootstraphelper <tmodel> (ViewContext, this); } public override void execute () {// 새 notimplementedException (); }}이것의 의미는 cshtml 페이지에서 @bootstrap.textboxfor (x => x.name)를 사용하는 것입니다. 이것은 나중에 소개됩니다. 여기에 예표를 놓아 봅시다.
2. TextBoxExtensions
TextBoxExtensions.cs의 구현 코드는 다음과 같습니다.
System.Collections.generic 사용; System.linq 사용; System.linq.expressions 사용; System.Wefrection 사용; System.Web 사용; System.Web.MVC 사용; System.Web.mvc.html 사용을 사용하여 System.linq; /// by using the specified HTML The name of the helper and form field, return the text box tag /// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">The name attribute value of the form element</param> /// <returns>Return input type='text' tag</returns> public static MvcHtmlString TextBox(this bootstraphelper html, String name) {return inputextensions.helper (html, inputtype.text, null, 이름, null, false, null); } /// <summary> /// 지정된 html을 사용하여 도우미 및 양식 필드의 이름을 사용하여 텍스트 상자 레이블 /// </summary> // <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "name> retory value </param> // // <retly valse" type = 'text'tag </returns> public static mvchtmlstring textbox (이 bootstraphelper html, 문자열 ID, 문자열 이름) {return inputextensions.helper (html, inputtype.text, id, null, false, null); } /// <summary> /// 지정된 html 헬퍼와 양식 필드 이름 /// </summary> /// <param name = "html"> extension method instance </param> // <param name = "name"> 단일 요소 이름 값 </param> // <value valling valse </param> // // // in value " tag </returns> public static mvchtmlstring textbox (이 bootstraphelper html, 문자열 ID, 문자열 이름, 객체 값) {return inputextensions.helper (html, inputtype.text, id, value, false, null); } /// <summary> /// 지정된 html 헬퍼와 양식 필드 이름 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "name"> 단일 요소 이름 값 </param> // <valk value "> 양식 value </param> // name = "placeholder"> bootstrap의 프롬프트 입력 값 </param> /// <returns> return input type = 'text'tag </returns> public static mvchtmlstring textbox (this bootstraphelper html, 문자열 ID, 문자열 이름, 객체 값, 문자열 <문자열) if (! string.isnullorempty (자리 표시 자)) {attributes.add ( "자리 표시 자", 자리 표시 자); } return inputextensions.helper (html, inputtype.text, id, 이름, 값, 거짓, 속성); } /// <summary> /// 지정된 html 헬퍼 및 양식 필드 이름 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "name"> 단일 요소 이름 값 </param> // <vale </param> ///param> // 이름 = "htmlattributes"> 추가 속성 </param> /// <returns> return input type = 'text'tag </returns> public static mvchtmlstring textbox (이 bootstraphelper html, 문자열 ID, 객체 값, 객체 htmlattributes) {ictionary <string> arvutions = bootstraphelper.anonymousobjecttohtmlattributes (htmlattributes); inputextensions.helper (html, inputtype.text, id, name, value, false, attributes); } /// <summary> /// 지정된 html을 사용하여 도우미 및 양식 필드의 이름을 사용하여 텍스트 상자 레이블 /// </summary> // <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "name"> 양식 요소의 이름 속성 <// param name = "value valess the valess of the form extribute value </param name =". name = "placeholder"> 부트 스트랩과 함께 제공되는 텍스트 상자의 프롬프트 입력 값 </param> /// <param name = "htmlattributes"> 추가 속성 </param> /// <returns> return input type = 'text'tag </return ' htmlattributes) {idictionary <string, object> attributes = bootstraphelper.anonymousObjectToHtMlattributes (htmlattributes); if (! string.isnullorempty (자리 표시 자)) {attributes.add ( "자리 표시 자", 자리 표시 자); } return inputextensions.helper (html, inputtype.text, id, 이름, 값, 거짓, 속성); } public static mvchtmlstring textboxfor <tmodel, tproperty> (이 bootstraphelper <tmodel> html, expression <func <tmodel, tproperty >> expression) {var model = (tmodel) html.viewdata.model; 문자열 속성 이름; 객체 값; inputextensions.getValueByExpression <tmodel, tproperty> (표현식, 모델, out 속성 이름, OUT 값); return inputextensions.helper (html, inputtype.text, propertyname, propertyname, value, false, null); }}}inputextensions.cs
System.collections.generic 사용; System.linq 사용; System.linq.expressions 사용; System.Wefrection 사용; System.Web 사용; System.Web.MVC 사용; 네임 스페이스 BootStraPextensions {// <요약> // BootStrap Form in Problic Static in Public Static Class inPuteTctring inputextles 도우미 (bootstraphelper html, inputtype inputtype, 문자열 ID, 문자열 이름, 객체 값, bool ischeck, vidictionary <string, object> htmlattributes) {// tagbuilder tag = new tagbuilder ( "input")의 이름을 정의합니다. if (htmlattributes == null) {htmlattributes = new Dictionary <String, object> (); } // if (! string.isnullorEmpty (name)) {htmlattributes.add ( "name", name); } // if (! string.isnullorempty (id)) {htmlattributes.add ( "id", id); } // if (value! = null) {htmlattributes.add ( "value", value.toString ()); } // 입력 유형 태그 추가 태그 추가 // 기본 스타일 태그 추가 .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> /// 형식 라디오 태그 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> 입력 </param> ///param> // /// <param name = "labelClass"> 레이블 태그 스타일 </param> /// <param name = "ischeck"> 선택 여부 </param> /// <param name = "isdisabled"> disable </param> /// <param name = "aattributes"> 엑스트라 태그 </param> // <return Radio Tag </returns> publatic mvchtmldring checkbox (bootstraphelper html, inputtype inputtype, 문자열 ID, 문자열 이름, 객체 값, 문자열 텍스트, 문자열 labelClass, bool ischeck, bool isdisabled, idictionary <string, object> htmlattributes) {// tagbuilder tag = new tagbuilder ( "레이블"); 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 ( "disabled"); } sbinput.append ( " />"); if (! string.isnullorEmpty (text)) {sbinput.append (text); } tag.innerhtml = sbinput.toString (); tag.mergeattributes (htmlattributes); return mvchtmlstring.create (tag.toString ()); } // 표현식을 통해 현재 속성 값을 가져옵니다 public static void getValueByexpression <tmodel, tproperty> (expression <func <tmodel, tproperty >> 표현, tmodel 모델, 문자열 속성 이름, 객체 값) {memberexpression body = (memberexpression) expression.body; 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 (model, null); }}}}1. 프로젝트의 모든 부트 스트랩 기반 텍스트 상자에 클래스 = "form-control"스타일이 있으므로 텍스트 상자를 캡슐화 할 때 레이블에 직접 배치됩니다. 물론, 프로젝트에서 이것을 사용할 필요가 없거나 텍스트 상자 스타일을 사용자 정의 한 경우 여기에 자신의 스타일을 쓸 수도 있으므로 텍스트 상자를 선언 할 때 마다이 스타일을 추가 할 필요가 없습니다.
2. TextBoxfor () 메소드는 Lamada의 사용을 결합하여 텍스트 상자를 생성합니다. 위에 선언 된 일반적인 부트 스트랩 펠퍼 타입 객체는 편리합니다. Lamada의 속성 이름 및 속성 값은 반사 및 제네릭을 통해 읽습니다. 여기에는 하나의 방법 만 정의됩니다. 다른 과부하가 필요한 경우 새로운 방법을 직접 추가 할 수 있습니다.
3. 사용할 때 또 다른 문제가 발생했습니다. Bootstraphelper는 HTMLHELPER 유형에 상속되므로 MVC에 원래 캡슐화 된 일부 HTMLHELPER 확장 방법 중 일부는 부트 스트랩 객체에 직접 호출 될 수 있습니다. 따라서 많은 오버로드가 복제 될 수 있고 다음과 같은 해당 오버로드를 찾을 수 없습니다.
이러한 방식으로 다음과 같은 오류가 쉽게 발생합니다.
따라서 문제가 발생하므로 문제를 해결할 방법을 찾아야합니다. 블로거가 생각한 한 가지 솔루션은 다음과 같습니다. HTML이보기의 Web.config에서 객체가있는 네임 스페이스를 주석하십시오. 예를 들어:
이런 식으로 위의 문제를 해결하고 다음과 같은 효과를 실행할 수 있습니다.
위의 네임 스페이스를 언급 한 후 더 이상 CSHTML 페이지에서 HTML 변수의 관련 확장 방법을 사용할 수 없습니다. 자신의 도우미가 충분하다면 기본 확장 방법이 없으면 큰 문제가되지 않아야합니다.
3. Radio -Extensions 및 CheckBoxExtensions
Bootstrap의 라디오 및 확인란 구성 요소와 관련하여 블로거는 http://v3.bootcss.com/css/의 작문 방법을 언급하고 다음과 같이 캡슐화했습니다.
Radio -extensions.cs
System.Collections.generic; System.Web; System.Web 사용; System.Web; System.Web.MVC 사용 사용 속성 </param> /// <returns> 반환 라디오 태그 </returns> public static mvchtmlstring radio (이 bootstraphelper html, 문자열 이름) {return radio (html, null, name, null, null, null, null, false, false, null); } /// <summary> /// 양식 라디오 태그를 반환 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <returns> return </returns> public mvchtper radipper radio html, 문자열 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 = "name"> name attribute </param> /// <param name = "ischeck"</param> // // // // // rindrine tag </returns> public static mvchtmlstring radio (이 bootstraphelper html, 문자열 ID, 문자열 이름, bool ischeck) {return radio (html, id, nam, null, null, null, ischeck, false, null); } /// <summary> /// 양식 라디오 태그를 반환 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "value" MVCHTMLSTRING RAD } /// <summary> /// return form radio tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "value"> 입력 </param> // <Returns> 반환 라디오 태그 </returns> public static mvchtmlstring radio (이 bootstraphelper html, 문자열 ID, 문자열 이름, 개체 값, 문자열 텍스트) {return radio (html, id, 이름, 이름, vale, null, false, false, null); } /// <summary> /// return form radio tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "value"> 입력 </param> // <param name = "ischeck"> 선택 여부 </param> /// <returns> 반환 라디오 태그 </returns> public static mvchtmlstring radio (이 bootstraphelper html, 문자열 ID, 문자열 이름, 객체 값, 문자열 텍스트, bool ischeck) {return radio (html, id, name, value, text, null, ischeck, vals, null); } /// <summary> /// return form radio tag /// </summary> /// <param name = "html"> 확장 메소드 예 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "value"> 텍스트 </param> // <param name = "labelClass"> 레이블 태그 스타일 </param> /// <returns> 반환 라디오 태그 </returns> public static mvchtmlstring radio (이 bootstraphelper html, 문자열 이름, 객체 값, 문자열 텍스트, 문자열 labelclass) {return radio (html, id, name, value, text, labelclass, false, fally, null); } /// <summary> /// return form radio tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "value"> 입력 </param> // <param name = "text"> name = "labelClass"> 레이블 태그 스타일 </param> /// <param name = "ischeck"> 선택 여부 </param> /// <returns> return Radio Tag </returns> public static mvchtmlstring radio (이 bootstraphelper html, 문자열 ID, 문자열 값, 문자열 텍스트, bool ischclass, bool ischclass) ID, 이름, 값, 텍스트, 레이블 클래스, ischeck, false, null); } /// <summary> /// return form radio tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "value"> 입력 </param> // <param name = "labelClass"> 레이블 스타일 </param> /// <param name = "ischeck"> 선택 되었습니까 </param> /// <param name = "isdisabled"> disable </param> // <returns> return radio tag </returns> public mvchtmlstring radio (이 부트 스트래피트 html, 문자열, 끈, string). ischeck, bool isdisabled) {return radio (html, id, 이름, 값, 텍스트, 레이블 클래스, ischeck, isdisabled, null); } /// <summary> /// Radio 태그를 형성하기 위해 반환 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> 입력 </param> // // param> // /// <param name = "labelClass"> 레이블 스타일 </param> /// <param name = "ischeck"> 상관 </param> /// <param name = "isdisabled"> disable </param> /// <param name = "Oattributes"> extra tag </param> /// return radio tag> public stattring radio html, 문자열 ID, 문자열 이름, 객체 값, 문자열 텍스트, 문자열 labelClass, bool ischeck, bool isdisabled, object aattributes) {idictionary <string, object> htmlattributes = null; if (Oattributes! = null) {htmlattributes = bootstraphelper.anonymousObjectToHtMlattributes (Oattributes); } else {htmlattributes = new Dictionary <String, Object> (); } return inputextensions.checkbox (html, inputtype.radio, id, name, value, text, labelclass, ischeck, isdisabled, htmlattributes); }}}checkboxextensions.cs
System.Collections.generic; System.Web; System.Web 사용; System.Web; System.Web.MVC 사용 사용 name = "name"> name attribute </param> /// <returns> return checkbox tag </returns> public static mvchtmlstring checkbox (이 bootstraphelper html, 문자열 이름) {return checkbox (null, null, null, null, false, false, null); } /// <summary> /// 양식 확인란 태그 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <returns> returns> returns> publch tats> returns> returns> returns> return "> bootstraphelper html, 문자열 ID, 문자열 이름) {return checkbox (html, id, null, null, null, false, false, null); } /// <summary> /// 양식 확인란 태그 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "ischeck"> param // // returns e eplace // return boce " tag </returns> public static mvchtmlstring checkbox (이 bootstraphelper html, 문자열 ID, 문자열 이름, bool ischeck) {return checkbox (html, id, nam, null, null, ischeck, false, null); } /// <summary> /// return form checkbox tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> // <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "value" mvchtmlstring checkbox (이 bootstraphelper html, 문자열 ID, 문자열 이름, 객체 값) {return checkbox (html, id, value, null, null, false, false, null); } /// <summary> /// return form checkbox tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> <param> // // // // /// <returns> 반환 확인란 태그 </returns> public static mvchtmlstring checkbox (이 bootstraphelper html, 문자열 ID, 문자열 이름, 객체 값, 문자열 텍스트) {return checkbox (html, id, 이름, 값, 텍스트, null, false, false, null); } /// <summary> /// return form checkbox tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> 입력 </param> // /// <param name = "ischeck"> 선택 여부 </param> /// <returns> returns checkbox tag </returns> public static mvchtmlstring checkbox (이 bootstraphelper html, 문자열 ID, 문자열 이름, 문자열 텍스트, bool ischeck) {html, id, vales, text, null, ischeck); } /// <summary> /// return form checkbox tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> 입력 </param> // /// <param name = "text"> name = "labelClass"> lade tag style </param> /// <returns> return checkbox tag </returns> public mvchtmlString checkbox (이 bootstraphelper html, 문자열 ID, 문자열 이름, 객체 값, 문자열 텍스트, 문자열 labelClass) {html, id, 텍스트, 텍스트, 텍스트, wall, 거짓); } /// <summary> /// return form checkbox tag /// </summary> /// <param name = "html"> 확장 메소드 예 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> 입력 </param> // // param> // /// <param name = "labelClass"> 레이블 스타일 </param> /// <param name = "ischeck"> 확인 여부 </param> /// <returns> return checkbox tag </returns> public static mvchtmlstring checkbox (이 bootstraphelper html, 문자열 ID, 객체 값, 문자열 텍스트, 문자열, bool ischeck). 이름, 가치, 텍스트, 레이블 클래스, ischeck, false, null); } /// <summary> /// return form checkbox tag /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> 입력 </param> // /// <param name = "labelClass"> 레이블 태그 스타일 </param> // <param name = "ischeck"> 선택 되었습니까 </param name = "isdisabled"> disable </param> /// <returns> return checkbox tag </returns> public mvchtmlstring checkelper html, string, string, string, string, string, string, string, string, string valess </returns> public mvchtmlstring checkelper LabelClass, bool ischeck, bool isdisabled) {return checkbox (html, id, name, value, text, labelclass, ischeck, isdisabled, null); } /// <summary> /// 양식 확인란 태그 /// </summary> /// <param name = "html"> 확장 메소드 인스턴스 </param> /// <param name = "id"> id </param> // <param name = "name"> name attribute </param> /// <param name = "text"> <param> // // // // // ///param> // // /// <param name = "labelClass"> 레이블 스타일 </param> /// <param name = "labelClass"> 레이블 스타일 </param 이름 = "ischeck"> 선택 되었습니까 </param> /// <param name = "isdisabled"> disable </param> /// <param name = "oattributes"> replace> // replace tag " public static mvchtmlstring checkbox (이 bootstraphelper html, 문자열 ID, 문자열 이름, 객체 값, 문자열 텍스트, 문자열 labelClass, bool ischeck, bool isdisabled, object aattributes) {idictionary <string, object> htmlattributes = null; if (Oattributes! = null) {htmlattributes = bootstraphelper.anonymousObjectToHtMlattributes (Oattributes); } else {htmlattributes = new Dictionary <String, Object> (); } return inputextensions.checkbox (html, inputtype.checkbox, id, name, value, text, labelclass, ischeck, isdisabled, htmlattributes); }}}블로거는 라벨과 확인란을 정리하고 호출 할 때 해당 레이블 텍스트를 전달하고 다음과 같이 사용합니다.
<div> @bootstrap.radio ( "aa", "bb", "cc", "dd", null, true, false, null) </div> <div> @bootstrap.radio ( "FD", "CC", "CC", "CC", "France", "Radio-inline", False, Null) @Bootstrap.radio ( "radio-inline", "CC", "CC", "UK", "Radio-inline", True, False, Null) </div> <div> @bootstrap.checkbox ( "FD", "CC2", "CC", "France", "CheckBox-inline", True, Null) @bootstrap.checkbox ( "dfer", "CC" "," "," ",", "" false, null) @bootstrap.checkbox ( "erer", "cc2", "cc", "italian", "checkbox-inline", true, false, null) </div>
얻은 결과 :
4. ButtOnextensions
부트 스트랩의 버튼 스타일과 관련하여 부트 스트랩의 공식 웹 사이트에 자세한 지침이 있습니다. 예를 들어, 일반적인 버튼 유형에는 일반 버튼, 제출 버튼 및 재설정 버튼이 포함됩니다. 일반적인 버튼 스타일은 주로 다음과 같습니다.
또한 버튼의 크기도 분류됩니다.
이를 기반으로 다음과 같이 부트 스트랩 유형 버튼을 캡슐화했습니다.
buttonextensions.cs
System.Collections.generic 사용; System.Web; System.Web; System.Web.MVC 사용 사용 /// </summary> /// <param name = "html"> HTML 헬퍼 인스턴스는이 메소드에 의해 확장됩니다. </param> /// <param name = "text"> 버튼에 표시된 텍스트. </param> /// <param name = "icon"> 아이콘 CSS 클래스. </param> /// <returns> 부트 스트랩 버튼 요소. </returs> public static mvchtmlstring 버튼 (이 bootstraphelper html, 문자열 텍스트, 문자열 아이콘) {return button (html, 텍스트, 아이콘, null); } /// <summary> /// 지정된 HTML 헬퍼 및 양식 필드 이름을 사용하여 텍스트 부트 스트랩 버튼 요소를 반환합니다. /// </summary> /// <param name = "html"> HTML 헬퍼 인스턴스는이 메소드에 의해 확장됩니다. </param> /// <param name = "text"> 버튼에 표시된 텍스트. </param> /// <param name = "icon"> 아이콘 CSS 클래스. </param> /// <param name = "type"> 버튼 유형. </param> /// <returns> 부트 스트랩 버튼 요소. </returs> public static mvchtmlstring 버튼 (이 bootstraphelper html, 문자열 텍스트, 문자열 아이콘, ButtonType 유형) {return button (html, 텍스트, 아이콘, 유형, null); } /// <summary> /// 지정된 HTML 헬퍼 및 양식 필드 이름을 사용하여 텍스트 부트 스트랩 버튼 요소를 반환합니다. /// </summary> /// <param name = "html"> HTML 헬퍼 인스턴스는이 메소드에 의해 확장됩니다. </param> /// <param name = "text"> 버튼에 표시된 텍스트. </param> /// <param name = "icon"> 아이콘 CSS 클래스. </param> /// <param name = "htmlattributes"> 요소를 설정할 html 속성을 포함하는 객체입니다. </param> /// <returns> 부트 스트랩 버튼 요소. </returs> public static mvchtmlstring 버튼 (이 bootstraphelper html, 문자열 텍스트, 문자열 아이콘, 객체 htmlattributes) {return button (html, 텍스트, 아이콘, buttontype.button, htmlattributes); } /// <summary> /// 지정된 HTML 헬퍼 및 양식 필드 이름을 사용하여 텍스트 부트 스트랩 버튼 요소를 반환합니다. /// </summary> /// <param name = "html"> HTML 헬퍼 인스턴스는이 메소드에 의해 확장됩니다. </param> /// <param name = "text"> 버튼에 표시된 텍스트. </param> /// <param name = "icon"> 아이콘 CSS 클래스. </param> /// <param name = "type"> 버튼 유형. </param> /// <param name = "htmlattributes"> 요소를 설정할 html 속성을 포함하는 객체입니다. </param> /// <returns> 부트 스트랩 버튼 요소. </returs> public static mvchtmlstring 버튼 (이 bootstraphelper html, 문자열 텍스트, 문자열 아이콘, 버튼 타입, 개체 htmlattributes) {return button (html, 텍스트, 아이콘, 유형, buttonclass.default, null); } /// <summary> /// 지정된 HTML 헬퍼 및 양식 필드 이름을 사용하여 텍스트 부트 스트랩 버튼 요소를 반환합니다. /// </summary> /// <param name = "html"> HTML 헬퍼 인스턴스는이 메소드에 의해 확장됩니다. </param> /// <param name = "text"> 버튼에 표시된 텍스트. </param> /// <param name = "icon"> 아이콘 CSS 클래스. </param> /// <param name = "cssclass"> 버튼 스타일. </param> /// <returns> 부트 스트랩 버튼 요소. </returs> public static mvchtmlstring 버튼 (이 bootstraphelper html, 문자열 텍스트, 문자열 아이콘, buttonclass cssclass) {return button (html, 텍스트, 아이콘, cssclass, null); } /// <summary> /// 지정된 HTML 헬퍼 및 양식 필드 이름을 사용하여 텍스트 부트 스트랩 버튼 요소를 반환합니다. /// </summary> /// <param name = "html"> HTML 헬퍼 인스턴스는이 메소드에 의해 확장됩니다. </param> /// <param name = "text"> 버튼에 표시된 텍스트. </param> /// <param name = "icon"> 아이콘 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">图标的css类。 </param> /// <param name="type">按钮类型。 </param> /// <param name="cssClass">按钮样式。 </param> /// <returns>一个Bootstrap Button元素。 </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> /// 通过使用指定的HTML 帮助器和窗体字段的名称，返回文本Bootstrap Button 元素。 /// </summary> /// <param name="html">扩展方法实例。 </param> /// <param name="text">显示在按钮上的文本。 </param> /// <param name="icon">图标的css类。 </param> /// <param name="type">按钮类型。 </param> /// <param name="cssClass">按钮样式。 </param> /// <param name="htmlAttributes">一个对象，其中包含要为该元素设置的HTML 特性。 </param> /// <returns>一个Bootstrap Button元素。 </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按钮样式/// </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按钮类型/// </summary> public enum ButtonType { /// <summary> /// 普通按钮/// </summary> Button, /// <summary> /// 提交按钮/// </summary> Submit, /// <summary> /// 重置按钮/// </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>5. 요약
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.