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>扩展方法实例</param> /// <param>文本框标签的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>扩展方法实例</param> /// <param>文本框标签的id</param> /// <param>文本框标签的默认值</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>扩展方法实例</param> /// <param>文本框标签的id</param> /// <param>文本框标签的默认值</param> /// <param>显示日期的格式</param> /// <param>日期的最小值</param> /// <param>日期的最大值</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>扩展方法实例</param> /// <param>文本框标签的id</param> /// <param>文本框标签的默认值</param> /// <param>显示日期的格式</param> /// <param>日期的最小值</param> /// <param>日期的最大值</param> /// <param>日期控件的浏览模式</param> /// <param>是否显示清空按钮</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'"); if(!string.IsNullOrEmpty(id)) { sb.Append("id='").Append(id).Append("' "); } if (value != null) { sb.Append("value='").Append(value.ToString()).Append("' "); } sb.Append("/>").Append("<span>") .Append("<span></span>") .Append("</span>"); tag.InnerHtml = sb.ToString(); return MvcHtmlString.Create(tag.ToString()); } } }
然后我们的cshtml页面只需要引用我们的js和css
<link href="https://www.jb51.net/~/Content/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" /> <script src="https://www.jb51.net/~/Content/bootstrap-datetimepicker/js/moment-with-locales.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <script src="https://www.jb51.net/~/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, 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> /// <param>扩展方法实例</param> /// <param>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>扩展方法实例</param> /// <param>id</param> /// <param>value</param> /// <param>样式</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>扩展方法实例</param> /// <param>id</param> /// <param>value</param> /// <param>样式</param> /// <param>行数</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>扩展方法实例</param> /// <param>id</param> /// <param>value</param> /// <param>样式</param> /// <param>行数</param> /// <param>列数</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()); } } }
只支持几个最简单的参数rows和cols，如果你的项目有一些特殊的需求，比如需要初始化成富文本编辑框，你也可以自己去改进。
使用方法
<div> @Bootstrap.TextAreaBox("id", "", "", 3, 5) </div>
这里有一个问题要提一下，就是我们直接这样写，得到的结果却是：
