原生html封装组件,一步一步封装自己的HtmlHelper组件BootstrapHelper（三）

前言：之前的两篇封装了一些基础的表单组件，这篇继续来封装几个基于bootstrap的其他组件。和上篇不同的是，这篇的有几个组件需要某些js文件的支持。

BootstrapHelper系列文章目录

一、NumberBoxExtensions

NumberBoxExtensions是一个基于bootstrap风格的数字文本框，基于之前博主介绍的自增器数字组件spinner去做的封装，不了解spinner组件的园友可以看看https://www.jb51.net/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

{

///

/// 生成数字文本框

///

/// 扩展方法实例

/// id

/// 返回数字文本框

public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id)

{

return NumberTextBox(html, id, null, null, null, null, null);

}

///

/// 生成数字文本框

///

/// 扩展方法实例

/// id

/// 文本框的value值

/// 返回数字文本框

public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value)

{

return NumberTextBox(html, id, value, null, null, null, null);

}

///

/// 生成数字文本框

///

/// 扩展方法实例

/// 文本框的value值

/// 自增长的最小值

/// 自增长的最大值

/// 返回数字文本框

public static MvcHtmlString NumberTextBox(this BootstrapHelper html, object value, int? min, int? max)

{

return NumberTextBox(html, null, value, min, max, null, null);

}

///

/// 生成数字文本框

///

/// 扩展方法实例

/// id

/// 文本框的value值

/// 自增长的最小值

/// 自增长的最大值

/// 返回数字文本框

public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max)

{

return NumberTextBox(html, id, value, min, max, null, null);

}

///

/// 生成数字文本框

///

/// 扩展方法实例

/// id

/// 文本框的value值

/// 自增长的最小值

/// 自增长的最大值

/// 每次自增的数字

/// 返回数字文本框

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);

}

///

/// 生成数字文本框

///

/// 扩展方法实例

/// id

/// 文本框的value值

/// 自增长的最小值

/// 自增长的最大值

/// 每次自增的数字

/// 自增规则

/// 返回数字文本框

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("");

sb.Append("

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("");

sb.Append("