序文：前の2つの記事は、いくつかの基本的なフォームコンポーネントをカプセル化し、この記事はブートストラップに基づいて他のいくつかのコンポーネントをカプセル化し続けています。前の記事とは異なり、この記事には、特定のJSファイルのサポートが必要なコンポーネントがいくつかあります。
ブートストラフェルパーシリーズ記事カタログ
C＃Advancedシリーズ - 独自のhtmlhelperコンポーネントを段階的にカプセル化する
C＃Advancedシリーズ - 独自のhtmlhelperコンポーネントをステップバイステップにカプセル化する：bootstraphelper（ii）
C＃Advancedシリーズ - 独自のhtmlhelperコンポーネントを段階的にカプセル化する：bootstraphelper（3：ソースコードを使用）
1。numberboxextensions
NumberboxExtensionsは、ブートストラップスタイルに基づいたデジタルテキストボックスです。ブロガーが紹介した自己障害のデジタルコンポーネントであるSpinnerによってカプセル化されています。スピナーコンポーネントを理解していない人は、http：//www.vevb.com/article/88490.htmで導入された2番目のコンポーネントをチェックできます。
以前の紹介を通して、自己障害コンポーネントスピナーの初期化にはJSコードを書く必要がないことがわかります。 HTMLでデータ属性を構成することにより、直接初期化できます。これは、私たちのカプセル化に大きな利便性をもたらします。一般的に使用される初期化パラメーターを拡張メソッドのパラメーターとして渡し、バックグラウンドの対応するデータ属性に変換してフロントエンドに戻す必要があります。
これ以上苦労せずに、カプセル化されたソースコードを最初に配置します。
Systemを使用; System.Collections.Generic; System.linq;を使用してSystem.Web;を使用してSystem.web.mvc; namespace bootstrapextensions {/// <summary> ///番号テキストボックスを生成する/// </summary> /// name = "id"> id </param> /// <turnss> return the number text box </returns> public static mvchtmlstring numbertextbox（this bootstraphelper html、string id）{return numbertextbox（html、id、null、null、null、null）; } /// <summary> ///数値テキストボックスを生成する/// </summary> /// <param name = "html">拡張法の例bootstraphelper html、string id、object value）{return numbertextbox（html、id、value、null、null、null）; } /// <summary> ///数値テキストボックスを生成する/// </summary> /// <numers> return Numericテキストボックス</returns> public static mvchtmlstring numbertextbox（this bootstraphelper html、object value、int？min、int？max）{return numbertextbox（html、null、value、min、max、null、null）; } /// <summary> ///数値テキストボックスを生成する/// </summary> ///自己成長</param> /// <turns>番号テキストボックスを返します</returns> public static mvchtmlstring numbertextbox（this bootstraphelper html、string id、object value、int？min、int？max）{return numbertextbox（html、id、value、value、min、max、null、null、null、null）; } /// <summary> ///番号テキストボックスを生成する/// </summary> /// name = "max">最大自己成長</param> /// <param name = "step"> number self growth </param> /// returns </returns </returns> public static mvchtmlstring numbertextbox（このbootstraphelper html、string id、html、int？min、int？ min、max、step、null）; } /// <summary> ///数字テキストボックス/// </summary> /// <param name = "html">拡張メソッド例</param> ///自己成長</param> /// <param name = "step"> number self growth </param> /// <param name = "rule"> self growth rule </param> /// <numbers box </returns> public static mvchtmlstring numbertextbox（このboottraphelper html、int？ rule）{tagbuilder tag = new TagBuilder（ "div"）; tag.mergeattribute（ "class"、 "入力グループスピナー"）; tag.mergeattribute（ "data-trigger"、 "Spinner"）; System.Text.StringBuilder SB = new System.Text.StringBuilder（）; //SB.APPEND( "<input Type = 'text' class = 'form-control text-center' value = '1' data-min = '-10' data-max = '10 'data-step =' 2 'data-rule =' quanty '>"）; sb.append（ "<input type = 'text' class = 'form-control text-center'"）; if（！string.isnullorempty（id））{sb.append（ "id = '"）。append（id）.append（ "'"）; } if（value！= null）{sb.append（ "value = '"）。append（value.toString（））。append（ "'"）; } else {sb.append（ "value = '1'"）; } if（min！= null）{sb.append（ "data-min = '"）。append（min）.append（ "'"）; } if（max！= null）{sb.append（ "data-max = '"）。append（max）.append（ "'"）; } if（step！= null）{sb.append（ "data-step = '"）。append（step）.append（ "'"）; } if（rule！= null）{sb.append（ "data-rule = '"）。append（rule.tostring（））。append（ "'"）; } else {sb.append（ "data-rule = 'quanty'"）; } sb.append（ "/>"）; sb.append（ "<span class = 'input-group-addon'>"）; sb.append（ "<a href = 'javascript ;;' class = 'spin-up' spin = 'up'> <i class = 'fa fa-caret-up'> </i> </a>"）; sb.append（ "<a href = 'javascript：;' class = 'spin-down' spin = 'down'> <i class = 'fa fa-caret-down'> </i> </a>"）; sb.append（ "</span>"）; tag.innerhtml = sb.toString（）; return mvchtmlstring.create（tag.toString（））; }} public enum spinningrule {デフォルト、通貨、数量、パーセント、月、日、時間、秒、秒、}}}IDと値に加えて、コンポーネントの初期化に必要なパラメーターは、主にMIN、MAX、STEP、ルールなどであり、コンポーネントのデータミン、データマックス、データステップ、データルール、およびその他のパラメーターに対応しています。
使用は非常に簡単です。まず、対応するページの関連するJSおよびCSSファイルを参照してから、CSHTMLで次のように呼び出します。
コードを次のようにコピーします： @bootstrap.numbertextbox（null、 "1"、1、10、2、null）
結果を取得します：
これは、毎回HTMLコードの大きな部分をコピーするよりもはるかに便利です。少し感動していますか？
2。DateTimeBoxExtensions
上記のデジタルコンポーネントを基礎として、次のステップは時間コンポーネントをカプセル化することです。また、ブロガーはデータ属性を使用して初期化することを計画していますが、長い間検索した後、DataTimePickerのデータ属性を初期化する方法はありません。方法はありませんので、ブロガーは自分でデータ属性を初期化するだけです。
1。初期計画
新しいファイルを作成しましょう：bootstrap-datetimepicker-helper.js。内部のコードは次のとおりです
$（function（）{var dateTimedefault = {locale： 'zh-cn'、// chinese Culture}; $ .each（$（ "。日付"）、function（index、item）{var data = $（item）.data（）; var param = $ .extend（{}、{}、{}、{}、datetimedefault、date、$; {}）; }）;}）;次に、このようなHTMLコードを書きます
<div class = 'input-group date' data-format = "yyyy-mm-dd" data-maxdate = "2017-01-10" data-mindate = "2010-01-10"> <入力タイプ= 'テキスト'/> <span> </span> </span> </div>
問題はないようで、最初はブロガーは問題はないと考えていました。しかし、物事は私の願いに反しました！ブロガーが考慮していないこと、つまりjQueryのdata（）メソッドによって取得された属性名は小文字に変換されます。つまり、HTMLで記述されたデータマックスデートですが、データ（）メソッドを介して得られた結果は、下の図に示すように、最大値になります。
次に、DateTimePickerが初期化されると、JS例外が報告されます。この方法は機能しません。
2。改善計画
上記の方法は機能しないため、改善する必要があります。データ（）メソッドに小文字になるのを防ぐことができるパラメーターはありますか？回りを検索した後、答えが見つかりませんでした。最終的には、ブロガーは自分でそれを変換することを計画していたので、JSコードは次のようになりました。
$（function（）{var datetimedefault = {format： 'yyyy-mm-dd'、//日付フォーマット、日付ロケールのみ： 'zh-cn'、//中国文化maxdate： '2017-01-01'、//最大日付マインド： '2010-01-01'、 false、}; $ .each（ "。日付"）、function（index、item）{var data = $（item）.data（）; $ .each（key、value）{for（in dateTimedefault）{if（key == i.tolowercase（））{datetimedefault [i] = value; // $ .EXTEND（{}、dateTimeDefault、date || {}）;原則は、データ（）メソッドによって得られた結果を、小文字の変換後のDateTimedeFaultの属性名と比較することです。同じことが当てはまる場合、HTMLのデータ属性が上書きされます。数回デバッグした後、私は基本的に問題はありませんでした。
このようなコードを書くことは、実際に上記の問題を解決することができますが、DateTimedeFault変数は、カバレッジの目的を達成するために十分なデフォルトパラメーターを含める必要があります。もちろん、プロジェクトで一般的に変更されたパラメーターはごくわずかであり、変更する必要があることが多いデフォルトの属性のみがここに追加されます。
さて、上記を理論的根拠として、データタイムボックスは簡単にカプセル化されます。コードをアップロードするだけです。
Systemを使用; System.Collections.Generic; System.linq; System.Web;を使用してSystem.web.mvc; namespace bootstrapextensions {/// <summary> ///生成日付制御////// </summary> //テキストボックスタグ</param> /// <Returns>日付制御をレンダリングするHTMLタグを返します</returns> public static mvchtmlstring dateTimeBox（このブートストラフェルパーhtml、string id）{return datetimebox（html、id、null、null、null、null、null、null、null）; } /// <summary> ///生成日付制御/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id of text box tag </param> /// MVCHTMLSTRING DATETIMEBOX（This Bootstraphelper HTML、String ID、Object Value）{return DateTimeBox（HTML、ID、値、ヌル、ヌル、ヌル、ヌル）; } /// <summary> ///生成日付コントロール/// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id of text box label </param> /// <param name = "value">テキストボックスラベルのデフォルト値name = "format"> <param name = "maxdate">日付の最小値Mindate）{DateTimeBox（HTML、ID、Value、Format、MaxDate、Mindate、Null、Null）を返します。 } /// <summary> ///生成日付制御/// </summary> /// <param name = "html">拡張法の例name = "maxdate">日付の最小値MVCHTMLSTRING DATETIMEBOX（このブートストラフェルパーHTML、文字列ID、オブジェクト値、文字列形式、文字列MAXDATE、文字列MINDATE、BOOL？showClear）{tagbuilder tag = new TagBuilder（ "div"）; tag.mergeattribute（ "class"、 "input-group date"）; if（！string.isnullorempty（format））{tag.mergeattribute（ "data-format"、format）; } if（！string.isnullorempty（maxdate））{tag.mergeattribute（ "data-maxdate"、maxdate）; } if（！string.isnullorempty（mindate））{tag.mergeattribute（ "data-mindate"、mindate）; } if（！string.isnullorempty（viewmode））{tag.mergeattribute（ "data-viewmode"、viewmode）; } if（showclear！= null）{tag.mergeattribute（ "data-showclear"、showclear.tostring（））; } System.Text.StringBuilder SB = new System.Text.StringBuilder（）; sb.append（ "<input type = 'text' class = 'form-control'"）; if（！string.isnullorempty（id））{sb.append（ "id = '"）。append（id）.append（ "'"）; } if（value！= null）{sb.append（ "value = '"）。append（value.toString（））。append（ "'"）; } sb.append（ "/>"）。append（ "<span class = 'input-group-addon'>"）.append（ "<span class = 'glyphicon glyphicon-calendar'> </span>"）.append（ "</span>"）; tag.innerhtml = sb.toString（）; return mvchtmlstring.create（tag.toString（））; }}}次に、CSHTMLページはJSとCSSを参照するだけでいいです
<link href = "〜/content/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel = "styleSheet"/> <script src = "〜/content/boottrap-dateTimepicker/js/moment-with-locales.js src = "〜/content/bootstrap-datetimepicker/js/bootstrap-datetimepicker-helper.js"> </script>
次に、直接使用します
<div> @bootstrap.datetimebox（ "starttime"、null、null、null、null、null、null）</div> <div> @bootstrap.datetimebox（ "endtime、null、null、null、null、null）</div>
結果を取得します
3。TextAreExtensions
TextAreaテキストフィールドのカプセル化は比較的単純です。なぜなら、その構造はテキストボックスの構造と類似しているからです。カプセル化ソースコードを直接説明しましょう。
Systemを使用; System.Collections.Generic; System.linq; System.Web;を使用してSystem.web.mvc; namespace bootstrapextensions {/// <summary> /// textarea text field /// </summary> /// name = "id"> id </param> /// <Returns> htmlタグ</returns> public static mvchtmlstring textareabox（this bootstraphelper html、string id）{return textareabox（html、id、null、null、null）; } /// <summary> /// textarea text field /// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id </param> /// <param name = "value"> value </param> /// static mvchtmlString textareabox（このブートストラフェルパーhtml、string id、object value、string cssclass）{return textareabox（html、id、value、cssclass、null、null）; } /// <summary> /// textarea text field /// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id "> id </param> /// <param name =" value "> value </param> ///行</param> /// <Returns> htmlタグ</returns> public static mvchtmlString textareabox（このブートストラフェルパーhtml、文字列ID、オブジェクト値、文字列cssclass、int？rows）{return textareabox（html、id、value、cssclass、rows、null、null、null）; } /// <summary> /// textarea text field /// </summary> /// <param name = "html">拡張メソッドインスタンス</param> /// <param name = "id"> id "> id </param> /// <param name =" value "> value </param> ///行</param> /// <param name = "cols">列の数</param> /// <returns> htmlタグ</htmlタグ</htmlタグ</htmlタグ</htmlタグ</public static mvchtmlstring textareabox（このブートストラフェルパーhtml、文字列ID、オブジェクト値、文字列cssclass、int？ tag.addcssclass（ "form-control"）; if（！string.isnullorempty（id））{tag.mergeattribute（ "id"、id）; } if（value！= null）{tag.mergeattribute（ "value"、value.toString（））; } if（！string.isnullorempty（cssclass））{tag.addcssclass（cssclass）; } if（rows！= null）{tag.mergeattribute（ "rows"、rows.tostring（））; } if（cols！= null）{tag.mergeattribute（ "cols"、cols.toString（））; } return mvchtmlstring.create（tag.toString（））; }}}最も単純なパラメーターの行とColのみがサポートされています。プロジェクトには、リッチテキスト編集ボックスに初期化するなど、特別なニーズがある場合は、自分で改善することもできます。
使い方
<div> @bootstrap.textareabox（ "id"、 ""、 ""、3、5）</div>
ここに言及すべき質問があります。つまり、私たちはそれを直接書きますが、結果は次のとおりです。
私たちのcols属性は機能しないようです。タグがclass = 'form-control'スタイルで追加されている限り、div全体を埋め、ソリューションも非常にシンプルであることがわかります。たとえば、divで処理を行うことができます。
コードを次のようにコピーします：<div> @bootstrap.textareabox（ ""、 ""、 "、3、5）</div>
COLS属性は機能しないため、パラメーターのCOLSは削除されると見なすことができます。
4。selectExtensions
絡み合った選択のドロップダウンボックスをもう一度する時が来ました。なぜそれはもつれていると言うのですか？次のように、それをカプセル化するときに考慮すべき多くの問題があるからです。
静的オプション値を処理する方法は？それらを背景に渡す方法は？特定のコンポーネント（select2など）に基づいて、元の選択またはカプセル化された選択方法とイベントにカプセル化されていますか？
後で、私はそれについて考えました、カプセル化の目的は何ですか？使用する方が便利ではありませんか？密閉されている場合、使用するのは便利ですか？幸いなことに、それは最も単純な選択に直接カプセル化されました。ブロガーはこれを行うつもりです：
静的オプションの場合は、ネイティブ選択タグを直接書き込みます。動的オプションの場合は、対応するURLを背景に渡し、データを取得した後にオプションを生成します。カプセル化されたコードは次のとおりです。
System; System.collections.generic;を使用してSystem.linq; System.web;を使用してSystem.web.mvc; namespace bootstrapextensions {/// <summary> /// return Select tag //// </summary> /////// <パラマン= ">拡張メソッド< /// <Returns> select tag </returns> public static mvchtmlstring selectbox（this bootstraphelper html、string id）{return selectbox（html、id、null、null、null、null、null、null）; } /// <summary> /// return return select tag // html、string id、object value）{return selectbox（html、id、value、null、null、null、null）; } /// <summary> /// return return select tag // static mvchtmlstring selectbox（このbootstraphelper html、string id、object value、string cssclass）{return selectbox（html、id、value、cssclass、null、null、null）; } /// <summary> /// return Select tag //データの要求</param> /// <param name = "url"> url for data </param> /// <param name = "textfield"> show field </param> /// string url、string textfield、string valuefield）{return selectbox（html、id、value、cssclass、url、null、textfield、valuefield）; } /// <summary> /// return return select tag // url </param> /// <param name = "param">要求されたパラメーター</param> /// <param name = "textfield"> show fields </param> /// name = "multiple">は複数選択</param> /// <targs> select tag </returns> public static mvchtmlstring selectbox（このブートストラフェルパーHTML、ストリングID、オブジェクト値、文字列cssclass、文字列URL、文字列パラメーション、文字列テキストフィールド、文字列値フィールド、ブール= bool = false） tag.addcssclass（ "form-control"）; if（！string.isnullorempty（id））{tag.mergeattribute（ "id"、id）; } if（value！= null）{tag.mergeattribute（ "value"、value.toString（））; } if（！string.isnullorempty（cssclass））{tag.addcssclass（cssclass）; } if（！string.isnullorempty（url））{tag.mergeattribute（ "data-url"、url）; } if（！string.isnullorempty（param））{tag.mergeattribute（ "data-param"、param）; } if（！string.isnullorempty（param））{tag.mergeattribute（ "data-param"、param）; } if（！string.isnullorempty（valuefield））{tag.mergeattribute（ "data-value-field"、valuefield）; } if（！string.isnullorempty（textfield））{tag.mergeattribute（ "data-text-field"、textfield）; } if（multiple）{tag.mergeattribute（ "multiple"、 "multiple"）; } return mvchtmlstring.create（tag.toString（））; }}}その後、フロントエンドはJSを使用して初期化し、JSファイルutility.combobox.jsが必要です。
（function（$）{//1。jquery拡張法Combobox $ .fn.combobox = function（options、param）{if（typeof options == 'string'）{return $ .fn.combobox.methods [options]（this、param）;} // 2。 $。 Option.Text.PlaceHolder.// 4。 option.onbeLoad.call（option.param）; （I、varオプション> </option> '） （オプション）return。 $ .getJson（url、function（data）{jq.empty（）; var option = $（ '<option> </option>'）; option.attr（ 'value'、 ''）; option.text（ 'select'）; jq.append（option）; $。each（data、function（i、item）{var option = $（ '<option> <option> <option>項目['valuefield'）]; }}; // 6。デフォルトパラメーターリスト$ $ .fn.combobox.defaults = {url：null、param：null、null、null、null、valuefield： 'value'、textfield： 'text'、placeholder： 'select'、onbeforoad：function（param）{}、onloadsuccess：function（）{}、onchange（value）{}; //この段落は新しく追加され、初期化方法$（document）.ready（function（）{$（ 'select'）。exl（function（）{var $ combobox = $（this）; $ .fn.combobox.call（$ combobox、$ combox.data（）;}）}）;}）（jquery）;このJSファイルは、Blogger //www.vevb.com/article/92595.htmによる以前の記事からのものです
次に、フロントエンドコール
<div> @bootstrap.selectbox（ "sel"、null、null "/home/getDept"、null、 "name"、 "id"）</div>
5。概要
この時点で、Bootstraphelperの最初のバージョンが基本的に完了しており、メインパッケージコンポーネントは次のとおりです。
もちろん、誰もがソースコードを最も共有するのが好きです。ソースコードアドレス
この記事があなたを助けることができると思うなら、それをお勧めします。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。