序文:前の記事では、ブートストラフェルパーのカプセル化に関するいくつかの基本的な知識を紹介し、この記事は改善され続けています。 HTMLHELPERメソッドを参照すると、このブロガーは最初に一般的に使用されるフォームコンポーネントをカプセル化します。ブートストラフェルパーのカプセル化の重要性についての以前のコメントでは、あまりにも多くの議論がありました。私はそれについてあまり心配したくありません。要するに、すべてが利益と損失を抱えており、それはあなたがどのように選択するかに依存します。興味があれば、見てみましょう。興味がない場合は、ブロガーが「冗談」と言うことができます。
ブートストラフェルパーシリーズ記事カタログ
C#Advancedシリーズ - 独自のhtmlhelperコンポーネントを段階的にカプセル化する
C#Advancedシリーズ - 独自のhtmlhelperコンポーネントをステップバイステップにカプセル化する:bootstraphelper(ii)
C#Advancedシリーズ - 独自のhtmlhelperコンポーネントを段階的にカプセル化する:bootstraphelper(3:ソースコードを使用)
1.新しいジェネリックブートストラフェルパーを追加します
前の記事では、ブロガーはhtmlhelperを継承するためにブートストラフェルパーの通常のタイプを定義しました。ラマダを使用してコンポーネントを定義する必要性を検討しているため、ブロガーはブートストラフェルパージェネリックタイプを追加しました。したがって、ブートストラフェルパーはこのようになりました。
System; System.collections.generic;を使用してSystem.linq; System.web;を使用してSystem.web.mvc;を使用して使用します。System.web.mvc; namespace bootstrapextensions {public class bootstraphelper:system.web.mvc.htmlhelper {/// <サマリーを使用してください。データコンテナ。 /// </summary> /// <param name = "viewcontext"> viewcontainer </param> /// <param name = "Viewdatacontainer"> viewdatacontainer </param> public bootstraphelper(viewcontext viewcontext、iviewdatainer)指定されたビューコンテキスト、ViewDatacontainer、およびルートコレクションを備えたブートストラフェルパークラスの新しいインスタンス。 /// </summary> /// <param name = "ViewContext"> View Context </param> /// base(ViewContext、ViewDatacontainer、RouteCollection){}} /// <summary> /// Bootstrapコントロールが強力な型付けビューでサポートされていることを示します。 /// </summary> /// <TypeParamName = "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">ルートコレクション。 </param> public bootstraphelper(viewcontext viewcontext、iviewdatacontainer viewdatacontainer、routecollection routecollection):base(viewcontext、viewdatacontainer、routecollection){}}}}私たちのブートストラップオブジェクトは、一般的なオブジェクトとしても定義されています
public abstract class bootstrapwebviewpage <tmodel>:system.web.mvc.webviewpage <tmodel> {// cshtmlページで使用される変数public bootstraphelper <tmodel> bootstrap {get; get;セット; } /// <summary> /// bootstrapオブジェクトを初期化/// </summary> public override void inithelpers(){base.inithelpers(); bootstrap = new bootstraphelper <tmodel>(viewcontext、this); } public override void execute(){// new nuptimplementedexception(); }}これの意味は、CSHTMLページで @bootstrap.textboxfor(x => x.name)を使用することです。これは後で紹介されます。ここに予見をしましょう。
2。TextBoxExtensions
TextBoxextensions.csの実装コードは次のとおりです。
System; System.Collections.Generic; System.linq; System.linq.Expressions;を使用してSystem.Web;を使用してSystem.Web.Mvc.htmlを使用して使用する使用の使用を使用する///指定されたHTMLを使用してヘルパーとフォームフィールドの名前を使用して、テキストボックスタグを返します/// bootstraphelper html、string name){return inputextensions.helper(html、inputtype.text、null、name、null、false、null); } /// <summary> ///指定されたhtmlを使用してヘルパーとフォームフィールドの名前を使用することにより、テキストボックスラベル/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// type = 'text'タグ</returns> public static mvchtmlstring textbox(this bootstraphelper html、string id、string name){return inputextensions.helper(html、inputtype.text、id、name、null、fals、null); } /// <summary> ///指定されたHTMLヘルパーとフォームフィールド名を使用してテキストボックスタグを返します//// tag </returns> public static mvchtmlstring textbox(this bootstraphelper html、string id、string name、object value){return inputextensions.helper(html、inputtype.text、id、name、name、value、fals、null); } /// <summary> ///指定されたhtmlヘルパーとフォームフィールド名を使用してテキストボックスタグを返します//// 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)){astributes.add( "Placeholder"、Placeholder); } return inputextensions.helper(html、inputtype.text、id、name、value、false、属性); } /// <summary> ///指定されたHTMLヘルパーとフォームフィールド名を使用してテキストボックスタグを返します/// name = "htmlattributes"> extra属性</param> /// <rupters> returns input type = 'text' tag </returns> public static mvchtmlstring textbox(this bootstraphelper html(this bootstraphelper html)、このbootstraphelper html(this bootstraphelper html) bootstraphelper.anonymousobjecttohtmlattributes(htmlattributes); return inputextensions.helper(html、inputtype.text、id、name、value、false、属性); } /// <summary> ///指定されたhtmlを使用してヘルパーとフォームフィールドの名前を使用することにより、テキストボックスラベル/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// name = "Placeholder"> Bootstrapに付属のテキストボックスのプロンプト入力値htmlattributes){idictionary <string、object> attributes = bootstraphelper.anonyomousobjecttohtmlattributes(htmlattributes); if(!string.isnullorempty(placeholder)){astributes.add( "Placeholder"、Placeholder); } return inputextensions.helper(html、inputtype.text、id、name、value、false、属性); } public static mvchtmlstring textboxfor <tmodel、tproperty>(this bootstraphelper <tmodel> html、expression <func <tmodel、tproperty >> expression){var model =(tmodel)html.viewdata.model;文字列PropertyName;オブジェクト値。 inputextensions.getValueByExpression <tmodel、tproperty>(expression、Model、Out PropertyName、Out Value); return inputextensions.helper(html、inputtype.text、propertyname、propertyname、value、false、null); }}}inputextensions.cs
System; System.Collections.Generic; System.linq; System.linq.Expressions;を使用してSystem.Reflection;を使用してSystem.Web.Mvc; namespace bootstrapextensionsを使用して使用する使用{/// <サマリー> ///ブートストラップフォーム要素入力拡張メソッドコレクション////// Helper(Bootstraphelper HTML、inputType inputType、string id、string name、object value、bool ischeck、idictionary <string、object> htmlattributes){// tag tagbuilder tag = new tagbuilder( "input"); if(htmlattributes == null){htmlattributes = new Dictionary <String、object>(); } //名前を追加if(!string.isnullorempt(name)){htmlattributes.add( "name"、name); } // IDを追加if(!string.isnullorempty(id)){htmlattributes.add( "id"、id); } // value if(value!= null){htmlattributes.add( "value"、value.toString()); } //入力タイプtag.mergeattribute( "type"、htmlhelper.getinputtypestring(inputType)); //デフォルトのスタイルタグを追加します。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> ///フォームラジオタグを返します<param name = "labelclass">ラベルタグのスタイル</param> /// <param name = "ischeck">それが選択されているかどうか</param> /// <param name = "isdisabled">無効</param> /// <param name = "oattributes"> extraタグ</param> /// <リターンhtml、inputtype inputtype、文字列ID、文字列名、オブジェクト値、文字列テキスト、文字列ラベルクラス、bool ischeck、bool isdisabled、idictionary <string、object> htmlattributes){// tag tagbuilder tag = new tagbuilder( "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( "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 <func <tmodel、tproperty >>式、tmodel Model、out string propertyname、out object value){memberexpression body =(memberexpression.body.Body; var lamadaname =(body.member is propertyinfo)? body.member.name:null; propertyName = lamadaname; value = 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.プロジェクト内のすべてのブートストラップベースのテキストボックステキストボックスには、class = "form-control"スタイルがあることを考慮すると、テキストボックスをカプセル化するときにラベルに直接配置されます。もちろん、プロジェクトがこれを使用する必要がない場合、またはテキストボックススタイルをカスタマイズした場合は、ここに独自のスタイルを書くこともできるため、テキストボックスを宣言するたびにこれらのスタイルを追加する必要はありません。
2。TextBoxfor()メソッドは、Lamadaの使用を組み合わせてテキストボックスを生成します。上記で宣言された一般的なブートストラフェルパータイプのオブジェクトは、役立ちます。 Lamadaの属性名と属性値は、反射とジェネリックを読みます。ここでは1つのメソッドのみが定義されています。他のオーバーロードが必要な場合は、新しいメソッドを自分で追加できます。
3。使用すると別の問題が発生しました。 BootstraphelperはHTMLHELPERタイプに継承するため、元々MVCにカプセル化されたHTMLHELPER拡張メソッドの一部は、ブートストラップオブジェクトに直接呼び出されます。したがって、多くの過負荷が複製される可能性があり、次のような対応する過負荷は見つかりません。
このようにして、次のエラーは簡単に発生します。
したがって、問題が発生しているため、それを解決する方法を見つける必要があります。ブロガーが考えたソリューションの1つは、ビューのWeb.config内のHTMLオブジェクトがある名前空間をコメントしてください。例えば:
このようにして、上記の問題を解決し、次の効果を実行できます。
上記の名前空間にコメントした後、CSHTMLページのHTML変数の関連する拡張法を使用できなくなります。あなた自身のヘルパーで十分であれば、ネイティブの拡張方法がなければ大きな問題になってはなりません。
3。RadioExtensionsとチェックボックステンション
Bootstrapのラジオおよびチェックボックスコンポーネントに関して、ブロガーはhttp://v3.bootcss.com/css/の執筆方法を参照し、次のようにカプセル化しました。
RadioExtensions.cs
Systemを使用; System.Collections.generic; System.linq;を使用してSystem.web;を使用してSystem.web.mvc; namespace bootstrapextensions {/// <summary> /// Return Form Radio Tag ///// </summary> ///属性</param> /// <Returns> Return Radio Tag </returns> public static mvchtmlString Radio(This Bootstraphelper html、string name){Return Radio(html、null、name、null、null、null、null、fals、false、false、null); } /// <summary> ///フォームラジオタグを返しますhtml、string id、string name){return Radio(html、id、name、null、null、null、null、false、false、null); } /// <summary> ///フォームラジオタグを返しますtag </returns> public static mvchtmlstring Radio(This Bootstraphelper html、string id、string name、bool ischeck){return Radio(html、id、name、null、null、null、ischeck、false、null); } /// <summary> ///フォームラジオタグを返しますMVCHTMLSTRING RADIO(このブートストラフェルパーHTML、文字列ID、文字列名、オブジェクト値){RETURN RADIO(HTML、ID、NAME、VALUE、NULL、NULL、FALSE、FALSE、NULL); } /// <summary> ///フォームフォームラジオタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id "> id </param> /// <Returns Radio Tag </returns> public static mvchtmlstring Radio(このbootstraphelper html、string id、string name、object value、string text){return radio(html、id、name、value、text、null、false、fals、null); } /// <summary> ///フォームフォームラジオタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id "> id </param> /// <param name = "ischeck">それが選択されているかどうか</param> /// <returns> return Radio tag </returns> public static mvchtmlstring Radio(このブートストラフェルパーhtml、文字列ID、文字列名、オブジェクト値、文字列テキスト、ブールischeck){return Radio、id、null、ischeck、null、ischeck、null、ischeck、null、ischeck、null、null、ischeck、null、null、ischeck、 } /// <summary> ///フォームフォームラジオタグ/// </summary> /// <param name = "html">拡張メソッド例</param> /// <param name = "id"> id "> id </param> /// <param name =" name "> name属性</param> //// name = "labelclass"> labelタグスタイル</param> /// <Returns> Return Radio Tag </returns> public static MVChtmlString Radio(このブートストラフェルパーHTML、文字列ID、文字列名、オブジェクト値、文字列テキスト、文字列ラベルクラス) } /// <summary> ///フォームフォームラジオタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id "> id </param> /// <param name = "text"> name = "labelclass">ラベルタグのスタイル</param> /// <param name = "ischeck">選択するかどうか</param> /// <returns> returns </returns> public static mvchtmstringラジオ(このブートストラフェルパーhtml、文字列name、文字列値、文字列label(bool ischecheckecheckechechclass) id、name、value、text、labelclass、ischeck、false、null); } /// <summary> ///フォームフォームラジオタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id "> id </param> /// <param name = "labelclass">ラベルのスタイル</param> /// <param name = "ischeck"> selected </param> /// <param name = "isdisabled">無効</param> /// <returns> returns> returns> public static mvchtmlstring ladio(このboottraphelper html、sintring book、string book、string book、sring bool book、 ischeck、bool isdisabled){Return Radio(html、id、name、value、text、labelclass、ischeck、isdisabled、null); } /// <summary> ///フォームラジオタグ/// </summary> /// <param name = "html">拡張法インスタンス</param> /// <param name = "id"> id "> id </param> /// <param name = "labelclass">ラベルのスタイル</param> /// <param name = "ischeck"> </param> /// <param name = "isdisabled"> disable </param> /// <param name = "oattributes"> extra Tag </param> /// <返品id、string name、object value、string text、string labelclass、bool ischeck、bool isdisabled、object oattributes){idictionary <string、object> htmlattributes = null; if(oattributes!= null){htmlattributes = bootstraphelper.AnonyObjectToHtMlattributes(oattributes); } else {htmlattributes = new Dictionary <string、object>(); } return inputextensions.checkbox(html、inputtype.radio、id、name、value、text、labelclass、ischeck、isdisabled、htmlattributes); }}}Checkboxextensions.cs
System; System.collections.generic; system.linq; system.web;を使用してsystem.web.mvc; namespace bootstrapextensions {public static class checkboxextensions {/// <summary> ///を使用して、system.linqを使用して使用します。属性</param> /// <nuters> returnsチェックボックスタグ</returns> public static mvchtmlstringチェックボックス(このブートストラフェルパーHTML、文字列名){returnチェックボックス(名前、ヌル、ヌル、ヌル、null、fals、false、null); } /// <summary> ///フォームを返すチェックボックスタグ/// </summary> /// bootstraphelper html、string id、string name){return checkbox(html、id、name、null、null、false、false、null); } /// <summary> ///フォームを返すチェックボックスタグ/// </summary> /// tag </returns> public static mvchtmlstringチェックボックス(このbootstraphelper html、string id、string name、bool ischeck){returnチェックボックス(html、id、name、null、null、ischeck、false、null); } /// <summary> /// return formチェックボックスタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id "> id </param> /// MVCHTMLSTRINGチェックボックス(This Bootstraphelper HTML、String ID、String name、Object値){return Checkbox(HTML、ID、NAME、VALUE、NULL、NULL、false、false、null); } /// <summary> /// return formチェックボックスタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// /// returns> returnチェックボックスタグ</returns> public static mvchtmlstringチェックボックス(このブートストラフェルパーhtml、文字列ID、文字列名、オブジェクト値、文字列テキスト){return checkbox(id、name、value、text、null、fals、false、null); } /// <summary> /// return formチェックボックスタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "ischeck">それが選択されているかどうか</param> /// <returns> returns checkboxタグ</returns> public static mvchtmlstringチェックボックス(このブートストラフェルパーHTML、文字列ID、ストリング名、オブジェクト値、文字列テキスト、ブールisCheck) } /// <summary> /// return formチェックボックスタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "text"> name = "labelclass">ラベルタグスタイル</param> /// <returns> returnチェックボックスタグ</returns> public static mvchtmlstringチェックボックス(このブートストラフェルパーHTML、このブートストラフェルパーID、文字列名、オブジェクト値、文字列テキスト、文字列ラベルクラス) } /// <summary> /// return formチェックボックスタグ/// </summary> /// <param name = "html">拡張法の例</param> /// <param name = "labelclass">ラベルのスタイル</param> /// <param name = "ischeck">チェックするかどうか</param> /// <returns> returnチェックボックスタグ</returns> public static mvchtmlStringチェックボックス(このブートストラフェルパーHTML、文字列ID、文字列名、オブジェクト値、文字列notionチェック(HTCLASS、BOOL ISCHECK)値、テキスト、ラベルクラス、ischeck、false、null); } /// <summary> /// return formチェックボックスタグ/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "labelclass">ラベルタグのスタイル</param> /// <param name = "ischeck"> selected </param> /// <param name = "isdisabled"> disable </param> /// <returns> return checkboxタグ</returns> public static mvchtmlstring checkbold html、string id、string、sintring bool ischeck、bool isdisabled){return checkbox(html、id、name、value、text、labelclass、ischeck、isdisabled、null); } /// <summary> ///フォームに戻るチェックボックスタグ/// </summary> /// /// <param name = "labelclass">ラベルのスタイル</param> /// <param name = "labelclass">ラベルのスタイル</param> /// <param name = "ischeck">選択</param> /// <param name = "isdisabled"> disable </param> /// public static mvchtmlStringチェックボックス(このブートストラフェルパーhtml、文字列ID、文字列名、オブジェクト値、文字列テキスト、文字列ラベルクラス、ブールischeck、bool isdisabled、object oattributes){idictionary <string、object> htmlattributes = null; if(oattributes!= null){htmlattributes = bootstraphelper.AnonyObjectToHtMlattributes(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"、 "ccc" "、" france "、" ladioline "cc"、 "uk"、 "radio-inline"、true、false、null)</div> <div> @bootstrap.checkbox( "fd"、 "cc2"、 "cc"、 "france"、 "checkbox-inline" @bootstrap.checkbox( "erer"、 "cc2"、 "cc"、 "italian"、 "checkbox-inline"、true、false、null)</div>
得られた結果:
4。BUTONEXTENSIONS
Bootstrapのボタンスタイルについては、Bootstrapの公式Webサイトには詳細な指示があります。たとえば、一般的なボタンタイプには、通常のボタン、ボタンの送信、ボタンのリセットが含まれます。一般的なボタンスタイルは主に次のとおりです。
さらに、ボタンのサイズも分類されます。
これに基づいて、次のようにブートストラップタイプボタンをカプセル化しました
buttonextensions.cs
System; System.Collections.Generic; System.linq;を使用してSystem.Web;を使用してSystem.Web.mvc; namespace bootstrapextensions {public static class buttonextensions {/// <summary> ///を使用して、指定されたHTMLヘルパーとフォームフィールド名を使用してテキストブートストラップボタン要素を返します。 /// </summary> /// <param name = "html">この方法で拡張されたHTMLヘルパーインスタンス。 </param> /// <param name = "text">ボタンに表示されるテキスト。 </param> /// <param name = "icon">アイコンCSSクラス。 </param> /// <turnss>ブートストラップボタン要素。 </returns> public static mvchtmlStringボタン(このブートストラフェルパーhtml、文字列テキスト、文字列アイコン){returnボタン(html、テキスト、アイコン、null); } /// <summary> ///指定されたHTMLヘルパーとフォームフィールド名を使用して、テキストブートストラップボタン要素を返します。 /// </summary> /// <param name = "html">この方法で拡張されたHTMLヘルパーインスタンス。 </param> /// <param name = "text">ボタンに表示されるテキスト。 </param> /// <param name = "icon">アイコンCSSクラス。 </param> /// <param name = "type">ボタンタイプ。 </param> /// <turnss>ブートストラップボタン要素。 </returns> public static mvchtmlstringボタン(このブートストラフェルパーhtml、文字列テキスト、文字列アイコン、ボタンタイプタイプ){return button(html、text、icon、type、null); } /// <summary> ///指定されたHTMLヘルパーとフォームフィールド名を使用して、テキストブートストラップボタン要素を返します。 /// </summary> /// <param name = "html">この方法で拡張されたHTMLヘルパーインスタンス。 </param> /// <param name = "text">ボタンに表示されるテキスト。 </param> /// <param name = "icon">アイコンCSSクラス。 </param> /// <param name = "htmlattributes">要素に設定するHTML属性を含むオブジェクト。 </param> /// <turnss>ブートストラップボタン要素。 </returns> public static mvchtmlStringボタン(このブートストラフェルパーhtml、文字列テキスト、文字列アイコン、オブジェクトhtmlattributes){return button(html、text、icon、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> /// <turnss>ブートストラップボタン要素。 </returns> public static mvchtmlstringボタン(このブートストラフェルパーhtml、文字列テキスト、文字列アイコン、ボタンタイプタイプ、オブジェクトhtmlattributes){returnボタン(html、テキスト、アイコン、タイプ、ボタンクラス、デフォルト、null); } /// <summary> ///指定されたHTMLヘルパーとフォームフィールド名を使用して、テキストブートストラップボタン要素を返します。 /// </summary> /// <param name = "html">この方法で拡張されたHTMLヘルパーインスタンス。 </param> /// <param name = "text">ボタンに表示されるテキスト。 </param> /// <param name = "icon">アイコンCSSクラス。 </param> /// <param name = "cssclass">ボタンスタイル。 </param> /// <turnss>ブートストラップボタン要素。 </returns> public static mvchtmlstringボタン(このブートストラフェルパーhtml、文字列テキスト、文字列アイコン、ボタンクラスcssclass){return button(html、text、icon、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">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>5。概要
以上封装了几个常用的表单组件,还剩下几个留在下篇吧。上文只是一个初始版本,很多地方可能并不完善,如果有什么不当或者可以优化的地方,还望斧正。
The above is all the content of this article.みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。