English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

自分自身のHtmlHelperコンポーネントBootstrapHelperを一歩一歩で封装する（三）

前書き：前の二つの記事では基本的なフォームコンポーネントを封装したが、この記事ではさらにbootstrapに基づく他のコンポーネントを封装する。前の記事とは異なり、この記事ではいくつかのコンポーネントには特定のjsファイルのサポートが必要です。

BootstrapHelperシリーズの文章目次

C#の進階シリーズ——自分自身のHtmlHelperコンポーネントを段階的に封装する：BootstrapHelper

C#の進階シリーズ——自分自身のHtmlHelperコンポーネントを段階的に封装する：BootstrapHelper（二）

C#進化シリーズ——自分自身のHtmlHelperコンポーネントを一つずつエンブレースする：BootstrapHelper（三：ソースコード付き）

一、NumberBoxExtensions

NumberBoxExtensionsは、bootstrapスタイルの数字テキストボックスで、以前にブログ主が紹介した自増器数字コンポーネントspinnerに基づいてエンブレースされたものです。spinnerコンポーネントについて詳しく知りたい場合は、以下のURLを参照してください：https://ja.oldtoolbag.com/article/88490.htm里面介绍的第二个组件。

通过之前的介绍我们知道，自增组件spinner的初始化不需要写任何的js代码，直接通过配置html里面的data属性即可实现它的初始化，这样给我们的封装就带来了很大的方便，我们只需要将常用的初始化参数作为扩展方法的参数传进来，然后在后台变成相应的data属性返回到前端。

废话不多说，先将封装的源码摆上来。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
 public static class NumberBoxExtensions
 {
 /// <summary>
 /// 数字テキストボックスの生成}}
 /// </summary>
 /// 扩展方法实例扩展方法实例扩展方法实例扩展方法实例扩展方法实例扩展方法实例

id、valueを除いて、自増分の初期化に必要な主要なパラメータはmin、max、step、ruleなどで、それぞれコンポーネントのdata-min、data-max、data-step、data-ruleなどのパラメータ。


非常に簡単に使用できます。まず、対応するページに関連するjsとcssファイルを参照し、cshtmlで以下のように呼び出します：


@Bootstrap.NumberTextBox(null, "1", 1, 10, 2, null)


結果を得ます：




これにより、毎回大量のHTMLコードをコピーするよりも便利ですか？少しでも興味を引かれたかもしれませんか？


二、DateTimeBoxExtensions


上記の数字コンポーネントが基盤としてありますので、次に時間コンポーネントをパッケージ化する必要があります。ブログ主もdata属性を使って初期化するつもりですが、文書を何度も見ながら、datetimepickerにはdata属性の初期化方法が内蔵されていないことが判明しました。どうすることもできず、ブログ主がdata属性の初期化を行うしかありませんでした。


1、初期設定


新しいファイルを作成します：bootstrap-datetimepicker-helper.jsに以下のようのコードがあります。


既に上記の方法が通じないので、改善する必要があります。data()メソッドには、小文字に変換されないようにするパラメータはありますか？一通り探してみましたが、答えを見つけることができませんでした。最終的には、ブログ主が独自に改造することに決め、JavaScriptコードがこんな感じになりました：
 var datetimedefault = {
 locale: 'zh',-CN', //
 });
 $.each($(".date"), function (index, item) {
 var data = $(item).data();
 var param = $.extend({}, datetimedefault, data || {});
 $(item).datetimepicker(param);
 });
});



その後、HTMLコードはこんな感じで書かれます


<div class='input-group date' data-format="YYYY-MM-DD" data-maxDate="2017-01-10" data-minDate="2010-01-10">
 <input type='text' class="form-control" />
 <span class="input-group-addon">
  <span class="glyphicon glyphicon-calendar"></span>
 </span>
</div>



全く問題が無いと思っていたようですが、ブログ主も何の問題もないと思っていました。しかし思い通りにはなりませんでした！ここでブログ主が考慮していなかった点が一つあります。それはJqueryのdata()メソッドで取得する属性名がすべて小文字に変換されることです。つまり、HTMLで書いたdata-




maxDateですが、data()メソッドで得られた結果はmaxdateになりました。以下の図を参照してください：


2datetimepickerを初期化した際にJavaScriptエラーが発生しました。この方法は通じません。


、改善案


既に上記の方法が通じないので、改善する必要があります。data()メソッドには、小文字に変換されないようにするパラメータはありますか？一通り探してみましたが、答えを見つけることができませんでした。最終的には、ブログ主が独自に改造することに決め、JavaScriptコードがこんな感じになりました：
 var datetimedefault = {
 format: 'YYYY',-MM-DD',//日付のフォーマット化、日付のみ表示
 locale: 'zh',-CN', //
 maxDate: '2017-01-01',//
 minDate: '2010-01-01', //最小の日付
 viewMode: 'days',
 defaultDate: false,
 disabledDates: false,
 enabledDates: false,
 });
 $.each($(".date"), function (index, item) {
 var data = $(item).data();
 $.each(data, function (key, value) {
  for (i in datetimedefault) {
  if (key == i.toLowerCase()) {
   datetimedefault[i] = value;
   break;
  }
  }
 });
 //var param = $.extend({}, datetimedefault, data || {});
 $(item).datetimepicker(datetimedefault);
 });
});



原理はdata()メソッドで得られた結果と、datetimedefaultの属性名を小文字に変換したものを比較し、一致すれば、htmlのdata属性をデフォルトの属性で上書きします。何度もデバッグしてみましたが、特に問題は見つかりませんでした。


このようにコードを書くと、上記の問題を解決できますが、datetimedefault変数に十分なデフォルトパラメータを含める必要があります。これにより、覆盖する目的を達成できます。もちろん、プロジェクトでは一般的に修正するのは数パラメータだけですが、ここでは変化する必要のある一般的なデフォルト属性を追加するだけで十分です。


以上の理論的な基盤があると、DataTimeBoxの封裝も簡単です。コードを直接見てみましょう。


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
 public static class DateTimeBoxExtensions
 {
 /// <summary>
 /// 生成日期控件
 /// </summary>
 /// 扩展方法实例扩展方法实例扩展方法实例扩展方法实例

そのcshtmlページは、私たちのjsとcssを参照するだけで十分です


<link href="~/Content/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="~/Content/bootstrap-datetimepicker/js/moment-with-locales.js"></script>
<script src="~/Content/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="~/Content/bootstrap-datetimepicker/js/bootstrap-datetimepicker-helper.js"></script>



その後、直接使用


<div class="col-xs-3">
  @Bootstrap.DateTimeBox("starttime", null, null, null, null, null, null)
  </div>
  <div class="col-xs-3">
  @Bootstrap.DateTimeBox("endtime", null, null, null, null, null, null)
  </div>



結果を得る




三、TextareExtensions


textareaテキストエリアのエンキャップメントは比較的簡単です。なぜなら、それ自身の構造はTextBoxとほぼ同じだからです。エンキャップメントのソースコードを直接提供します。


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
 public static class TextareExtensions
 {
 /// <summary>
 /// textareaテキストエリア
 /// </summary>
 /// 扩展方法实例扩展方法实例扩展方法实例扩展方法实例

rowsとcolsという非常に基本的なパラメータのみをサポートしています。もしプロジェクトに特別な要件がある場合（例えば、リッチテキストエディタとして初期化する必要がある場合など）、自分で改善することもできます。


使用方法


<div>
  @Bootstrap.TextAreaBox("id", "", "", 3, 5)
 </div>


ここで一つ問題を挙げておきますが、私たちが直接このように書くと、得られる結果は以下の通りです：




私たちのcols属性が機能していないように見えますが、実際には、あなたのタグにclass='form'が付いている場合、それが原因です。-control'スタイルがある場合、それがdiv全体を満たすことになります。対処方法も単純で、例えばdivの上に処理を行うことができます：


 <div> @Bootstrap.TextAreaBox("", "", "", 3, 5) </div>




cols属性が機能していない場合は、実際にはパラメータ内のcolsを取り除くことを検討することができます。


第4章、SelectExtensions


また、迷うselectのドロップダウンリストに到達しました。なぜ迷うのかというと、パッケージ化する際に考えるべき多くの問題があります。例えば：


<optgroup>と<option>はどう処理するか、静的optionの値はどうバックエンドに伝えるか、元のselectをパッケージ化するか、あるいは特定のコンポーネント（例えばselect）に基づいたパッケージ化をするか2）のselectメソッドやイベントはどう処理するかなど


後で考え直してみると、パッケージ化の目的は何か？使用がより便利になるためですよね。もし封入が固すぎたら、使用が便利になるでしょうか？幸いにも、最もシンプルなselectに直接パッケージ化しました。ブロガーは以下のようにするつもりです：


静的optionの場合、原生的selectタグを直接書きます；動的optionの場合、対応するURLをバックエンドに渡し、データを取得してoptionを作成します。パッケージ化されたコードは以下の通りです：


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
 public static class SelectExtensions
 {
 /// <summary>
 /// selectタグを返します
 /// </summary>
 /// 扩展方法实例标签id扩展方法实例标签id扩展方法实例标签id扩展方法实例标签id扩展方法实例标签id

然后前端使用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将调用时候传过来的参数和default参数合并
 options = $.extend({}, $.fn.combobox.defaults, options || {});
 //3添加默认值
 var target = $(this);
 target.attr('valuefield', options.valueField);
 target.attr('textfield', options.textField);
 target.empty();
 var option = $('<option></option>);
 option.attr('value', '');
 option.text(options.placeholder);
 target.append(option);
 //4判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则发送ajax从后台取数据
 if (options.data) {
  init(target, options.data);
 }
 else {
  //var param = {};
  options.onBeforeLoad.call(target, options.param);
  if (!options.url) return;
  if (typeof options.param == "string") {
  options.param = JSON.parse(options.param);
  }
  $.getJSON(options.url, options.param, function (data) {
  init(target, data);
  });
 }
 function init(target, data) {
  $.each(data, function (i, item) {
  var option = $('<option></option>);
  option.attr('value', item[options.valueField]);
  option.text(item[options.textField]);
  target.append(option);
  });
  options.onLoadSuccess.call(target);
 }
 target.unbind("change");
 target.on("change", function (e) {
  if (options.onChange)
  return options.onChange(target.val());
 });
 }
 //5.如果传过来的是字符串，代表调用方法。
 $.fn.combobox.methods = {
 getValue: function (jq) {
  return jq.val();
 },
 setValue: function (jq, param) {
  jq.val(param);
 },
 load: function (jq, url) {
  $.getJSON(url, function (data) {
  jq.empty();
  var option = $('<option></option>);
  option.attr('value', '');
  option.text('請選擇');
  jq.append(option);
  $.each(data, function (i, item) {
   var option = $('<option></option>);
   option.attr('value', item[jq.attr('valuefield')]);
   option.text(item[jq.attr('textfield')]);
   jq.append(option);
  });
  });
 }
 });
 //6.默认参数列表
 $.fn.combobox.defaults = {
 url: null,
 param: null,
 data: null,
 valueField: 'value',
 textField: 'text',
 placeholder: '請選擇',
 onBeforeLoad: function (param) { },
 onLoadSuccess: function () { }
 onChange: function (value) { }
 });
 //このセクションは、ページの初期化が完了した後に初期化メソッドを呼び出す新規セクションです
 $('document').ready(function () {
 $('select').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 })
 });
})(jQuery);



このjsファイルは、ブログ主の以前の記事https:から来ています//ja.oldtoolbag.com/article/92595.htm


次に、フロントエンドが呼び出します


<div class="col-xs-2">
  @Bootstrap.SelectBox("sel", null, null, "/Home/GetDept", null, "Name", "Id")
  </div>



5. 総括


これで、BootstrapHelperの最初のバージョンの包装は基本的には完了しました。包装された主要コンポーネントは以下の通りです：




もちろん、皆さんが最も好きなソースコードの共有もあります。ソースコードのアドレス


この記事があなたに役立ったら、ぜひ推薦してください。


これでこの記事のすべての内容が終わりです。皆さんの学習に役立つことを願っています。また、呐喊ガイドを多くの人に支持していただけると嬉しいです。
		
声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。また、人間による編集は行われていません。著作権侵害を疑う内容がある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）
基礎教程
おすすめ