C#進階系列——一步一步封裝本身的HtmlHelper組件：BootstrapHelper（三：附源碼）

時間 2019-11-06

標籤 c# 進階系列一步封裝本身 htmlhelper 組件 bootstraphelper 源碼欄目 C# 简体版

原文原文鏈接

前言：以前的兩篇封裝了一些基礎的表單組件，這篇繼續來封裝幾個基於bootstrap的其餘組件。和上篇不一樣的是，這篇的有幾個組件須要某些js文件的支持。javascript

本文原創地址：http://www.cnblogs.com/landeanfen/p/5842030.htmlcss

BootstrapHelper系列文章目錄html

1、NumberBoxExtensions

NumberBoxExtensions是一個基於bootstrap風格的數字文本框，基於以前博主介紹的自增器數字組件spinner去作的封裝，不瞭解spinner組件的園友能夠看看http://www.cnblogs.com/landeanfen/p/5461849.html裏面介紹的第二個組件。前端

經過以前的介紹咱們知道，自增組件spinner的初始化不須要寫任何的js代碼，直接經過配置html裏面的data屬性便可實現它的初始化，這樣給咱們的封裝就帶來了很大的方便，咱們只須要將經常使用的初始化參數做爲擴展方法的參數傳進來，而後在後臺變成相應的data屬性返回到前端。java

廢話很少說，先將封裝的源碼擺上來。jquery

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BootstrapExtensions
{
    public static class NumberBoxExtensions
    {
        /// <summary>
        /// 生成數字文本框
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <returns>返回數字文本框</returns>
        public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id)
        {
            return NumberTextBox(html, id, null, null, null, null, null);
        }

        /// <summary>
        /// 生成數字文本框
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <param name="value">文本框的value值</param>
        /// <returns>返回數字文本框</returns>
        public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value)
        {
            return NumberTextBox(html, id, value, null, null, null, null);
        }

        /// <summary>
        /// 生成數字文本框
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="value">文本框的value值</param>
        /// <param name="min">自增加的最小值</param>
        /// <param name="max">自增加的最大值</param>
        /// <returns>返回數字文本框</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 name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <param name="value">文本框的value值</param>
        /// <param name="min">自增加的最小值</param>
        /// <param name="max">自增加的最大值</param>
        /// <returns>返回數字文本框</returns>
        public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max)
        {
            return NumberTextBox(html, id, value, min, max, null, null);
        }

        /// <summary>
        /// 生成數字文本框
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <param name="value">文本框的value值</param>
        /// <param name="min">自增加的最小值</param>
        /// <param name="max">自增加的最大值</param>
        /// <param name="step">每次自增的數字</param>
        /// <returns>返回數字文本框</returns>
        public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max, int? step)
        {
            return NumberTextBox(html, id, value, min, max, step, null);
        }

        /// <summary>
        /// 生成數字文本框
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <param name="value">文本框的value值</param>
        /// <param name="min">自增加的最小值</param>
        /// <param name="max">自增加的最大值</param>
        /// <param name="step">每次自增的數字</param>
        /// <param name="rule">自增規則</param>
        /// <returns>返回數字文本框</returns>
        public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max, int? step, SpinningRule? rule)
        {
            TagBuilder tag = new TagBuilder("div");
            tag.MergeAttribute("class", "input-group spinner");
            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='quantity'>");
            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='quantity' ");
            }
            sb.Append("/>");

            sb.Append("<span class='input-group-addon'>");
            sb.Append("<a href='javascript;;' class='spin-up' data-spin='up'><i class='fa fa-caret-up'></i></a>");
            sb.Append("<a href='javascript:;' class='spin-down' data-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
    {
        defaults,
        currency,
        quantity,
        percent,
        month,
        day,
        hour,
        minute,
        second,
    }
}

NumberBoxExtensions.cs

除去id、value，咱們自增組件初始化須要的參數主要有min、max、step、rule等，分別對應組件的data-min、data-max、data-step、data-rule等參數。git

使用至關簡單，首先在對應的頁面引用相關的js和css文件，而後在cshtml裏面這樣調用便可：github

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

獲得結果：ajax

這樣比咱們每次都去copy一大段html代碼要方便多了吧，你有沒有一絲心動呢~~bootstrap

2、DateTimeBoxExtensions

有了上面的數字組件做爲基礎，接下來就是封裝時間組件了。博主一樣打算使用data屬性去作初始化，但是找了半天文檔，datatimepicker裏面沒有自帶data屬性初始化的方式，沒辦法，只有博主本身去作data屬性的初始化了。

一、初始方案

咱們新建一個文件：bootstrap-datetimepicker-helper.js。裏面的代碼以下

$(function () {
    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，以下圖：

而後在初始化datetimepicker的時候就報了js異常。此法行不通。

二、改進方案

既然上面的方法行不通，那咱們就要改進啊，data()方法是否存在什麼參數可讓它不轉小寫的？找了一圈，沒找到啥答案。最後沒辦法，博主打算自行改造，因而js代碼變成了這樣：

$(function () {
    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>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">文本框標籤的id</param>
        /// <returns>返回呈現日期控件的html標籤</returns>
        public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id)
        {
            return DateTimeBox(html, id, null, null, null, null, null, null);
        }

        /// <summary>
        /// 生成日期控件
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">文本框標籤的id</param>
        /// <param name="value">文本框標籤的默認值</param>
        /// <returns>返回呈現日期控件的html標籤</returns>
        public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value)
        {
            return DateTimeBox(html, id, value, null, null, null, null, null);
        }

        /// <summary>
        /// 生成日期控件
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">文本框標籤的id</param>
        /// <param name="value">文本框標籤的默認值</param>
        /// <param name="format">顯示日期的格式</param>
        /// <param name="maxDate">日期的最小值</param>
        /// <param name="minDate">日期的最大值</param>
        /// <returns>返回呈現日期控件的html標籤</returns>
        public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, string minDate)
        {
            return DateTimeBox(html, id, value, format, maxDate, minDate, null, null);
        }

        /// <summary>
        /// 生成日期控件
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">文本框標籤的id</param>
        /// <param name="value">文本框標籤的默認值</param>
        /// <param name="format">顯示日期的格式</param>
        /// <param name="maxDate">日期的最小值</param>
        /// <param name="minDate">日期的最大值</param>
        /// <param name="viewMode">日期控件的瀏覽模式</param>
        /// <param name="showClear">是否顯示清空按鈕</param>
        /// <returns>返回呈現日期控件的html標籤</returns>
        public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, string minDate, string viewMode, 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());
        }
    }
}

DateTimeBoxExtensions.cs

而後咱們的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>

獲得結果

3、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>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <returns>html標籤</returns>
        public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id)
        {
            return TextAreaBox(html, id, null, null, null, null);
        }

        /// <summary>
        /// textarea文本域
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <param name="value">value</param>
        /// <param name="cssClass">樣式</param>
        /// <returns>html標籤</returns>
        public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass)
        {
            return TextAreaBox(html, id, value, cssClass, null, null);
        }

        /// <summary>
        /// textarea文本域
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <param name="value">value</param>
        /// <param name="cssClass">樣式</param>
        /// <param name="rows">行數</param>
        /// <returns>html標籤</returns>
        public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass, int? rows)
        {
            return TextAreaBox(html, id, value, cssClass, rows, null);
        }

        /// <summary>
        /// textarea文本域
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">id</param>
        /// <param name="value">value</param>
        /// <param name="cssClass">樣式</param>
        /// <param name="rows">行數</param>
        /// <param name="cols">列數</param>
        /// <returns>html標籤</returns>
        public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass, int? rows, int? cols)
        {
            TagBuilder tag = new TagBuilder("textarea");
            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());
        }
    }
}

TextAreaExtensions.cs

只支持幾個最簡單的參數rows和cols，若是你的項目有一些特殊的需求，好比須要初始化成富文本編輯框，你也能夠本身去改進。

使用方法

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

這裏有一個問題要提一下，就是咱們直接這樣寫，獲得的結果倒是：

貌似咱們的cols屬性沒有起做用，原來，只要你的標籤加了class='form-control'樣式，那它就會在滿撐整個div，解決的方法也很簡單，好比咱們能夠在div上面作些處理：

        <div class="col-xs-3">
            @Bootstrap.TextAreaBox("", "", "", 3, 5)
        </div>

既然cols屬性沒有起做用，其實參數裏面的cols能夠考慮去掉。

4、SelectExtensions

又到了糾結的select下拉框。爲何說它糾結呢，由於封裝它的時候要考慮不少問題，好比：

<optgroup>和<option>如何處理
靜態的option值如何傳到後臺
是封裝原始的select仍是封裝成基於某些組件（好比select2）的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>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">標籤id</param>
        /// <returns>select標籤</returns>
        public static MvcHtmlString SelectBox(this BootstrapHelper html, string id)
        {
            return SelectBox(html, id, null, null, null, null, null, null);
        }

        /// <summary>
        /// 返回select標籤
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">標籤id</param>
        /// <param name="value">標籤選中值</param>
        /// <returns>select標籤</returns>
        public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value)
        {
            return SelectBox(html, id, value, null, null, null, null, null);
        }

        /// <summary>
        /// 返回select標籤
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">標籤id</param>
        /// <param name="value">標籤選中值</param>
        /// <param name="cssClass">標籤樣式</param>
        /// <returns>select標籤</returns>
        public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass)
        {
            return SelectBox(html, id, value, cssClass, null, null, null, null);
        }

        /// <summary>
        /// 返回select標籤
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">標籤id</param>
        /// <param name="value">標籤選中值</param>
        /// <param name="cssClass">標籤樣式</param>
        /// <param name="url">請求數據的url</param>
        /// <param name="textField">顯示字段</param>
        /// <param name="valueField">值字段</param>
        /// <returns>select標籤</returns>
        public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string textField, string valueField)
        {
            return SelectBox(html, id, value, cssClass, url, null, textField, valueField);
        }

        /// <summary>
        /// 返回select標籤
        /// </summary>
        /// <param name="html">擴展方法實例</param>
        /// <param name="id">標籤id</param>
        /// <param name="value">標籤選中值</param>
        /// <param name="cssClass">標籤樣式</param>
        /// <param name="url">請求數據的url</param>
        /// <param name="param">請求的參數</param>
        /// <param name="textField">顯示字段</param>
        /// <param name="valueField">值字段</param>
        /// <param name="multiple">是否多選</param>
        /// <returns>select標籤</returns>
        public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string param, string textField, string valueField, bool multiple = false)
        {
            TagBuilder tag = new TagBuilder("select");
            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(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());
        }
    }
}

SelectExtensions.cs

而後前端使用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文件來源於博主以前的一篇文章http://www.cnblogs.com/landeanfen/p/5159911.html

而後前端調用

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

5、總結

至此，咱們BootstrapHelper第一個版本的封裝基本算是完成了，主要封裝的組件有以下幾個：

固然還有你們最喜歡源碼分享了。源碼地址

若是你以爲本文可以幫到你，請幫忙推薦吧。

本文原創出處：http://www.cnblogs.com/landeanfen/

歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。