带验证的mvc razor 文本框扩展组件

在做 mvc 3 razor有时候，有大量的数据需要验证．当然也有ＪＱ的验证插件和系统的一些方法．本文主要讲自定的一个一组件

预浏效果如下

这个组件的基本原理是用JS做为外挂验证,加以CSS美化其功能

首先我们要做的是美化这个文本框的样式,比如说有默认样式 焦点,成功,失败几种样式,以及旁边的 tooltip 提示样式

CSS如下

 1 .webUITooltip{background:url(images/wBottomLeft.gif) no-repeat 0 bottom;overflow:hidden;position:absolute;top:-8px}
 2 .webUITooltip .webUITooltipRight{background:url(images/wBottomRight.gif) no-repeat right bottom}
 3 .webUITooltip .webUITooltipTop{background:url(images/wTopLeft.gif) no-repeat 0 0}
 4 .webUITooltip .webUITooltipTopRight{background:url(images/wTopRight.gif) no-repeat right 0;padding:12px 14px 14px 19px;overflow:hidden;font:normal 12px/1.6 '\5b8b\4f53'}
 5 .webUITooltips{background:url(images/yBottomLeft.gif) no-repeat 0 bottom}
 6 .webUITooltips .webUITooltipRight{background:url(images/yBottomRight.gif) no-repeat right bottom}
 7 .webUITooltips .webUITooltipTop{background:url(images/yTopLeft.gif) no-repeat 0 0}
 8 .webUITooltips .webUITooltipTopRight{background:url(images/yTopRight.gif) no-repeat right 0}
 9 .webUITxtBox{border:1px solid #ccc;height:18px;line-height:16px;width:160px;text-indent:4px;background:#fff}
10 .webUITxtBox.onerror{background:#FEEAEB url(images/rpple.gif) repeat-x 0 bottom}
11 .webUITxtBox.onfocus{background:#DFEEFD;border-color:#359AFF}
12 .webUITxtBox.onSuccess{border-color:#41CE33;background:#E7FDE5}
13 .webUITooltipTips,.webUISuccess,.webUIError{font:normal 12px/20px '\5b8b\4f53';text-indent:25px;overflow:hidden;height:20px;background:url(images/ico.gif) no-repeat;white-space:nowrap}
14 .webUITooltipTips{background-position:0 -20px}
15 .webUIError{background-position:0 -40px}
16 .webUILabelFor{display:none}
17 textarea{overflow:auto}

有用到的JS代码

/* 
    说明：WebUI 文本框（自定义多重验证，Tootip）
    作者：DEVIN
    主页：http://www.21v.org
    版权：Devin!JS 2.0 Bate (C) Skyline Co.,Ltd  2011.11.28 
*/
String.prototype.format = function () {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function (m, i) {
        return args[i];
    });
};
String.prototype.trim = function () {
    return this.replace(/(^\s*)|(\s*$)/g, "");
};
if (!Array.indexOf) {
    Array.prototype.indexOf = function (Object) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == Object) {
                return i;
            }
        }
        return -1;
    };
};
var Textbox = function (ini) {
    this.Type = ini.Type || null;
    this.Container = ini.Container || null;
    this.Properties = ini.Properties || null;
    this.Style = ini.Style || null;
    this.CSS = ini.CSS || null;
    this.Verification = ini.Verification || null;
    this.Id = this.Properties.id || this.Properties.Id || '';
    this.Value = '';
    this.Callback = ini.Callback || null;
    Textbox.Controls = Textbox.Controls || [];
    Textbox.Regexs = Textbox.Regexs || [];
    Textbox.Zindex = Textbox.Zindex || 666;
    Textbox.Tooltips = Textbox.Tooltips || [];
    Textbox.Zindex--;
    Textbox.IsValid = Textbox.IsValid || false;
    Textbox.GetURL = Textbox.GetURL || '';
    this.init();
};
Textbox.GetControl = function (c) {
    var x = eval('({0})'.format(c));
    for (var o in x) {
        return o ? o : '';
    }
};
Textbox.AddEvent = function (o, a, b) {
    o.attachEvent ? o.attachEvent('on' + a, function () {
        b.call(o)
    }) : o.addEventListener(a, b, false)
};
Textbox.Validation = function () {
    Textbox.IsValid = true;
    var $ = this.prototype;
    var s = [];
    for (var i = 0; i < Textbox.Regexs.length; i++) {
        var r = Textbox.Regexs[i];
        var id = Textbox.GetControl(Textbox.Controls[i]);
        var tx = document.getElementById(id);
        var er = document.getElementById('__' + id);
        var index = -1;
        for (var j = 0; j < r.length; j++) {
            var reg = r[j];
            if (reg.Regex.test(tx.value)) {
                continue;
            }
            index = index > -1 ? index : j;
            Textbox.IsValid = false;
        }
        s.push('{0}={1}'.format(id, escape(tx.value)));

        var __ = r[index];
        var c = tx.className;
        c = c.replace(/\s*(onfocus|onerror|onSuccess)/, '');
        if (index != -1) {
            tx.className = c + ' onerror';
            er.innerHTML = $.tools.Error.format(__.Error);
        } else {
            tx.className = c + ' onSuccess';
            er.innerHTML = $.tools.Success.format('输入正确');
        }
    }
    Textbox.GetURL = s.join('&');
};
Textbox.Getpos = function (o) {
    var x = 0, y = 0;
    o = typeof (o) == 'string' ? document.getElementById(o) : o;
    if (!o) {
        return { 'x': x, 'y': y }
    }
    x = o.offsetWidth + 10;
    do {
        x += o.offsetLeft;
        y += o.offsetTop
    }
    while ((o = o.offsetParent))
    {
        return { 'x': x, 'y': y }
    }
};
Textbox.ReSize = function () {
    for (var i = 0; i < Textbox.Tooltips.length; i++) {
        var o = Textbox.Tooltips[i];
        var pos = Textbox.Getpos(o);
        var m = document.getElementById('__' + o.id);
        if (!m) return;
        m.style.left = pos.x + 'px';
        m.style.top = pos.y + 'px';
    }
};
Textbox.prototype = {
    objs: [],
    attr: function (o, tx, val) {
        if (!val) {
            return o && o.getAttribute(tx);
        }
        o.setAttribute(tx, val);
        return o;
    },
    setstyle: function (ob) {
        for (var o in this.Style) {
            ob.style[o] = this.Style[o];
        }
    },
    getobj: function () {
        var $ = this;
        $.Id = $.Properties && $.Properties.id || '__{0}'.format(Math.ceil(Math.random() * 100000));
        var node;
        var o = document.getElementById($.Id);
        node = o ? o.parentNode : document.getElementById($.Container) ? document.getElementById($.Container) : document.body;
        if (!o) {
            o = document.createElement($.Type == 'textarea' ? 'textarea' : 'input');
            if ($.Type != 'textarea') {
                $.attr(o, 'type', $.Type);
            }
            for (var c in $.Properties) {
                if (c == 'type') {
                    continue;
                }
                $.attr(o, c, $.Properties[c]);
            }
            $.setstyle(o);
            $.attr(o, 'id', $.Id);
            $.attr(o, 'name', $.Id);
            o.className = ($.CSS && $.CSS.Normal && !$.CSS.Normal.empty() ? $.CSS.Normal : '') + ' webUITxtBox';
            node && node.appendChild(o);
        }
        var pos = Textbox.Getpos(o);
        $.gettip($.Id, pos, node);
        return o;
    },
    gettip: function (id, pos, ob) {
        id = '__' + id;
        var o = document.getElementById(id);
        if (!o) {
            o = document.createElement('div');
            this.attr(o, 'id', id);
            ob && ob.appendChild(o);
        }
        o.style.cssText = 'position:absolute;left:{0}px;top:{1}px;z-index:{2}'.format(pos.x, pos.y, Textbox.Zindex);
        return o;
    },
    tooptip: {
        Normal: 'Normal',
        Error: 'Error',
        Tooltip: 'Tooltip',
        Success: 'Success'
    },
    tools: {
        ErrorTip: '<div class="webUITooltip webUITooltips" style="width:{width}px"><div class="webUITooltipRight"><div class="webUITooltipTop"><div class="webUITooltipTopRight">{0}</div></div></div></div>',
        Normal: '<div class="webUITooltipTips">{0}</div>',
        Tooltip: '<div class="webUITooltip" style="width:{width}px"><div class="webUITooltipRight"><div class="webUITooltipTop"><div class="webUITooltipTopRight">{0}</div></div></div></div>',
        Success: '<div class="webUISuccess">{0}  </div>',
        Error: '<div class="webUIError">{0}</div>',
        width: 150
    },
    getverif: function (html, t, index) {
        var $ = this;
        if (!$.Verification && $.Verification.Regex.length < 1 || $.Verification == '') {
            return;
        }
        var width = $.Verification.Width ? $.Verification.Width : $.tools.width;
        width = width >= 459 ? 459 : width <= 100 ? 100 : $.tools.width;
        html = html.format($.Verification[index].Normal);
        html = html.replace("{width}", width);
        var d = document.getElementById('__' + $.Id);
        if (!d) return;
        d.style.display = 'block';
        d.innerHTML = html;
    },
    settooltip: function (t, html) {
        var $ = this;
        html = $.tools[t].format(html);
        var to = document.getElementById('__' + $.Id);
        if (!to) return;
        to.style.display = 'block';
        to.innerHTML = html;
        var o = document.getElementById($.Id);
        if (!o) return;
        var c = o.className;
        var er = c.replace(/\s*(onfocus|onerror|onSuccess)/, '');
        var cl = er + (t == $.tooptip.Error ? ' onerror' : t == $.tooptip.Success ? ' onSuccess' : t == $.tooptip.Tooltip ? ' onfocus' : '');
        o.className = cl;
    },
    init: function () {
        var $ = this;
        var o = $.getobj();
        var pos = Textbox.Getpos(o);
        Textbox.Tooltips.push(o);
        var __ = $.Verification;
        if (!__ || (!__ && __.length < 1)) {
            o.onblur = function () {
                $.Callback && $.Callback.call($, o.value);
            }
            return;
        }
        $.getverif($.tools.Normal, $.tooptip.Normal, 0);
        Textbox.Controls.push('{{0}:{1}}'.format($.Id, false));
        Textbox.Regexs.push(__);
        o.onfocus = function () {
            var tx = this.value.trim();
            for (var i = 0; i < __.length; i++) {
                var d = __[i];
                var reg = new RegExp(d.Regex);
                if (!reg.test(tx)) {
                    $.getverif($.tools.Tooltip.format(__[i].Tooltip), $.tooptip.Tooltip, i);
                    break;
                }
            }
            var c = this.className;
            c = c.replace(/\s*(onfocus|onerror|onSuccess)/, '') + ' onfocus';
            this.className = c;
        };
        o.onblur = function () {
            var c = this.className;
            var tx = this.value.trim();
            var er = c.replace(/\s*(onfocus|onerror|onSuccess)/, '');
            this.className = er;
            $.Value = tx;
            var v = true;
            for (var i = 0; i < __.length; i++) {
                var d = __[i];
                var reg = new RegExp(d.Regex);
                if (reg.test(tx)) {
                    $.getverif($.tools.Success.format(d.Success), $.tooptip.Success, i);
                } else {
                    $.getverif($.tools.Error.format(d.Error), $.tooptip.Error, i);
                    v = false;
                    break;
                }
            }
            this.className = er + (v ? ' onSuccess' : ' onerror');
            if (v) {
                $.Callback && $.Callback.call($, tx);
            }
        };
        Textbox.AddEvent(window, 'resize', Textbox.ReSize);
    }
};
Textbox.Type = {
    TextBox: 'text',
    Button: 'button',
    Password: 'password',
    Checkbox: 'checkbox',
    Radio: 'radio',
    ImageButton: 'image'
};
Textbox.loading = function () {
    Textbox.Tooltips = Textbox.Tooltips || [];
    var controls = [];
    var m = document.getElementsByTagName('input');
    var ar = document.getElementsByTagName('textarea');
    for (var i = 0; i < m.length; i++) {
        if (m[i].className.indexOf('webUITxtBox') != -1) {
            controls.push(m[i]);
        }
    }
    for (var i = 0; i < ar.length; i++) {
        if (ar[i].className.indexOf('webUITxtBox') != -1) {
            controls.push(ar[i]);
        }
    }
    for (var i = 0; i < controls.length; i++) {
        var o = controls[i];
        var index = Textbox.Tooltips.indexOf(o);
        if (index != -1) continue;
        var id = o.getAttribute('id');
        var vf = document.getElementById('__for' + id);
        var ex = vf ? vf.innerHTML : '';
        ex = ex != '' ? eval('({0})'.format(ex)) : '';
        var cl = o.getAttribute('Callback');

        new Textbox({
            Type: Textbox.Type.TextBox,
            Properties: { id: o.id },
            Verification: ex,
            Callback: function (value) {

            }
        });
    }
};

Textbox.AddEvent(window, 'load', Textbox.loading);

Textbox.Regex = {
    Empty: /[\S]/,
    Email: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
    //整型（包括负数）
    Int: /^-?[0-9]\d*$/,
    //整型（大于或等于０）
    IntPostive: /(^0$)|(^[1-9]\d*$)/,
    //整型（大于0)
    IntZeroPostive: /^([1-9]\d{0,}|0)$/,
    //浮点（包括负数）
    Float: /^(-?[1-9]\d*)|(0)\.\d+$/,
    //浮点（大于或等于０）
    FloatPostive: /(^0.0$)|(^0\.\d*[1-9]+\d*$)|(^[1-9]\d*\.\d+$)/,
    //浮点（大于0） (^0\.\d*[1-9]+\d*$)|(^[1-9]\d*\.\d+$)
    FloatZeroPostive: /^(\d+)(((\.)(\d)+))?$/,
    Chinese: /[\u4e00-\u9fa5]/g,
    EnglishChars: /[a-zA-Z]/g,
    Mobile: /^1(?:3[0-9]|5[0-9]|8[0-9]|4[0-9])\d{8}$/,
    Password: /[A-Za-z][A-Za-z0-9~!@#\$%^&\*]{5,19}/,
    IDCard: /[\d]{6}(19|20)*[\d]{2}((0[1-9])|(11|12))([012][\d]|(30|31))[\d]{3}[xX\d]*/,
    EngAndNum: /[a-zA-Z0-9]/g,
    URL: /^http:\/\/(?:[\w-\.]{0,255})(?:(?:\/?[^\s]{0,255}){0,255})/,
    EngNum: /[a-zA-Z0-9]/g,
    EngNumUnerline: /[a-zA-Z0-9_]*/,
    PhoneNumber: /(86)?(-)?(0\d{2,3})?(-)?(\d{7,8})(-)?(\d{1,5})?/,
    PostalCodes: /\d{6}/
}

 HtmlExtension 扩展(TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression 方式)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Text;
using System.Text.RegularExpressions;
using System.Web.Mvc;
using System.Configuration;
using System.Web.Routing;
using System.Web.Helpers;
using System.Reflection;

namespace WebLab
{
    /// <summary>
    /// HTML 扩展控件
    /// </summary>
    public static partial class HtmlExtension
    {
        #region 加载上传组件
        /// <summary>
        /// 加载组件
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper)
        {
            String basepath = DataConvert.GetString(ConfigurationManager.AppSettings["WebLab.WebUI:Base"]);
            basepath = basepath.LastIndexOf("/") == -1 ? basepath + "/" : basepath;
            String js = Helper.GetScript(String.Format("{0}Textbox/WebUI.js", basepath), helper);
            String style = Helper.GetStyle(String.Format("{0}Textbox/WebUI.css", basepath), helper);
            StringBuilder html = new StringBuilder();
            html.Append(style);
            html.Append(js);
            return MvcHtmlString.Create(html.ToString());
        }
        #endregion

        #region 文本框
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty)
        {
            return TextboxForVerify(helper, expression, allowEmpty, CommonEnum.ValidateExpressions.Never);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType)
        {
            return TextboxForVerify(helper, expression, allowEmpty, validType, null, null, null);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty"></param>
        /// <param name="validType">验证类型</param>
        /// <param name="validExpression">验证表达式扩展</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, String[] validExpression)
        {
            return TextboxForVerify(helper, expression, allowEmpty, validType, null, validExpression, null);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <param name="properties">文本框扩展属性</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, IDictionary<String, Object> properties)
        {
            return TextboxForVerify(helper, expression, allowEmpty, validType, properties, null, null);
        }
        #endregion

        #region 带样式
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty,object style)
        {
            return TextboxForVerify(helper, expression, allowEmpty, CommonEnum.ValidateExpressions.Never, null, null, style);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty"></param>
        /// <param name="validType">验证类型</param>
        /// <param name="validExpression">验证表达式扩展</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, String[] validExpression, object style)
        {
            return TextboxForVerify(helper, expression, allowEmpty, validType, null, validExpression, style);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <param name="properties">文本框扩展属性</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, IDictionary<String, Object> properties, object style)
        {
            return TextboxForVerify(helper, expression, allowEmpty, validType, properties, null, style);
        }
        #endregion

        #region Textbox
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="expression">Expression</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">验证类型</param>
        /// <param name="properties">HTML代码扩展</param>
        /// <param name="validExpression">验证表达式扩展</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, IDictionary<String, Object> properties, String[] validExpression, object style)
        {
            String modelName = ExpressionHelper.GetExpressionText(expression); //从Lambda表达式中获取模型对应属性的名称 
            String value = helper.ViewData.Model == null ? "" : Helper.GetFieldValue(helper.ViewData.Model, modelName);
            
            object controlType;
            String __type = "";
            if (properties != null)
            {
                properties.TryGetValue("type", out controlType);
                __type = DataConvert.GetString(controlType).ToLower();
            }

            if (__type == "textarea")
            {
                properties.Remove("type");
            }
            StringBuilder html = new StringBuilder();
            String ex = Helper.GetTextBoxRegex(allowEmpty, validType, validExpression);
            html.AppendFormat("<div id=\"__{0}\"></div>", modelName);
            html.AppendFormat("<label for=\"{0}\" class=\"webUILabelFor\" id=\"__for{0}\">{1}</label>", modelName, ex);

            TagBuilder o = new TagBuilder(__type == "textarea" ? "textarea" : "input");
            o.IdAttributeDotReplacement = "-";
            o.GenerateId(modelName);
            o.AddCssClass("webUITxtBox");
            o.MergeAttribute("name", modelName, true);
            o.MergeAttribute("type", "text", true);
            if (__type == "textarea")
            {
                o.SetInnerText(value);
            }
            else
            {
                o.MergeAttribute("value", value, true);
            }
            StringBuilder css = new StringBuilder();
            if (style != null)
            {
                foreach (PropertyInfo pi in style.GetType().GetProperties())
                {
                    String key = pi.Name;
                    string tx = pi.GetValue(style, null).ToString();
                    css.AppendFormat("{0}:{1};", key, tx);
                }
            }
            if (!String.IsNullOrEmpty(css.ToString()))
            {
                o.Attributes.Add("style", css.ToString());
            }

            if (properties != null)
            {
                //properties.Remove("type");
                o.MergeAttributes(new RouteValueDictionary(properties), true);
            }
            return MvcHtmlString.Create(o.ToString(TagRenderMode.Normal) + html.ToString());
        }
        #endregion
    }
}

 有些做插入操作的时候,可能为多表,所以需要一个单独的方法,侦对自定义ID,VALUE的方法扩展,如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Text;
using System.Text.RegularExpressions;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Helpers;
using System.Reflection;

namespace WebLab
{
    /// <summary>
    /// HTML 扩展控件
    /// </summary>
    public static partial class HtmlExtension
    {
        #region 文本框
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="name">控件名称</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name)
        {
            return TextboxForVerify(helper, name, "");
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value)
        {
            return TextboxForVerify(helper, name, value, CommonEnum.AllowEmpty.True);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value, CommonEnum.AllowEmpty allowEmpty)
        {
            return TextboxForVerify(helper, name, value, allowEmpty, CommonEnum.ValidateExpressions.Never);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType)
        {
            return TextboxForVerify(helper, name, value, allowEmpty, validType, null, null, null);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <param name="validExpression">验证表达式扩展</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, String[] validExpression)
        {
            return TextboxForVerify(helper, name, value, allowEmpty, validType, null, validExpression, null);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper">HtmlHelper</param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <param name="properties">文本框扩展属性</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, IDictionary<String, Object> properties)
        {
            return TextboxForVerify(helper, name, value, allowEmpty, validType, properties, null, null);
        }
        #endregion

        #region 带样式
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value, CommonEnum.AllowEmpty allowEmpty, object style)
        {
            return TextboxForVerify(helper, name, value, allowEmpty, CommonEnum.ValidateExpressions.Never, null, null, style);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <param name="validExpression">验证表达式扩展</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, String[] validExpression, object style)
        {
            return TextboxForVerify(helper, name, value, allowEmpty, validType, null, validExpression, style);
        }
        /// <summary>
        /// 文本框
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <param name="properties">文本框扩展属性</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper, String name, dynamic value, CommonEnum.AllowEmpty allowEmpty, CommonEnum.ValidateExpressions validType, IDictionary<String, Object> properties, object style)
        {
            return TextboxForVerify(helper, name, value, allowEmpty, validType, properties, null, style);
        }
        #endregion

        #region Textbox
        /// <summary>
        /// 文本框（非绑定式）
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="name">控件名称</param>
        /// <param name="value">控件值</param>
        /// <param name="allowEmpty">是否允许空</param>
        /// <param name="validType">默认验证类型</param>
        /// <param name="properties">文本框扩展属性</param>
        /// <param name="validExpression">验证表达式扩展</param>
        /// <param name="style">样式</param>
        /// <returns></returns>
        public static MvcHtmlString TextboxForVerify(this HtmlHelper helper,
            String name, dynamic value,
            CommonEnum.AllowEmpty allowEmpty,
            CommonEnum.ValidateExpressions validType,
            IDictionary<String, Object> properties,
            String[] validExpression,
            object style)
        {

            object controlType;
            String __type = "";
            if (properties != null)
            {
                properties.TryGetValue("type", out controlType);
                __type = DataConvert.GetString(controlType).ToLower();
            }

            if (__type == "textarea")
            {
                properties.Remove("type");
            }
            StringBuilder html = new StringBuilder();
            String ex = Helper.GetTextBoxRegex(allowEmpty, validType, validExpression);
            html.AppendFormat("<div id=\"__{0}\"></div>", name);
            html.AppendFormat("<label for=\"{0}\" class=\"webUILabelFor\" id=\"__for{0}\">{1}</label>", name, ex);

            TagBuilder o = new TagBuilder(__type == "textarea" ? "textarea" : "input");
            o.IdAttributeDotReplacement = "-";
            o.GenerateId(name);
            o.AddCssClass("webUITxtBox");
            o.MergeAttribute("name", name, true);
            o.MergeAttribute("type", "text", true);
            if (__type == "textarea")
            {
                o.SetInnerText(value.ToString());
            }
            else
            {
                o.MergeAttribute("value", value.ToString(), true);

            }
            StringBuilder css = new StringBuilder();
            if (style != null)
            {
                foreach (PropertyInfo pi in style.GetType().GetProperties())
                {
                    String key = pi.Name;
                    string tx = pi.GetValue(style, null).ToString();
                    css.AppendFormat("{0}:{1};", key, tx);
                }
            }
            if (!String.IsNullOrEmpty(css.ToString()))
            {
                o.Attributes.Add("style", css.ToString());
            }

            if (properties != null)
            {
                o.MergeAttributes(new RouteValueDictionary(properties), true);
            }

            return MvcHtmlString.Create(o.ToString(TagRenderMode.Normal) + html.ToString());
        }
        #endregion
    }
}

 调用方法

本文使用的提交方式为JQ的AJAX提交方法,所以在_Layout.cshtml母板页中加入相关的资源

    @RenderSection("Include", false)
    <script src="@Url.Content("~/include/jquery-1.6.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/include/jquery.form.js")" type="text/javascript"></script>

 实际调用方法

@model WebLab.MVCDemo.Models.CategoryEntity
@{
    ViewBag.Title = "Textbox";
   // Model.Remark = "xxoo ";
}

@section Include{
    @Html.TextboxForVerify()
}

    <form method="post" id="Submit" action="">
    <div class="content">
		<table class="AddItems" cellspacing="1">
            <tr>
				<td class="t">主键：</td>
				<td>@Html.TextboxForVerify(m => m.Id, CommonEnum.AllowEmpty.False, CommonEnum.ValidateExpressions.Int, new Dictionary<String, Object>() { { "maxlength", "11" } }, new { @width = "400px" })</td>
			</tr>
			<tr>
				<td class="t">分类名称：</td>
				<td>@Html.TextboxForVerify(m => m.ClassName, CommonEnum.AllowEmpty.False, CommonEnum.ValidateExpressions.Never, new Dictionary<String, Object>() { { "maxlength", "50" } }, new { @width = "400px" })</td>
			</tr>
			<tr>
				<td class="t" valign="top">详细介绍：</td>
				<td>@Html.TextboxForVerify(m => m.Remark, CommonEnum.AllowEmpty.False, CommonEnum.ValidateExpressions.Never, new Dictionary<String, Object>() { { "type", "textarea" } }, new { @width = "60%", @height = "300px" })</td>
			</tr>
            <tr>
				<td class="t"></td>
                <td><input type="submit" name="btnSubmit" value="提交" id="btnSubmit" class="bottom hand" /></td>
            </tr>
		</table>
    </div>
    </form>
    <script type="text/javascript">
    <!--
        $(function () {
            $("#Submit").submit(function () {
                Textbox.Validation();
                if (!Textbox.IsValid) {
                    return false;
                }
                $(this).ajaxSubmit(function (data) {
                   //处理结果
                });
                return false;
            });
        });
    //-->
    </script>

 

 

 

@柴哥

源码下载地址 点我下载

原创作品,如须转载,请注明出处

欢迎拍砖~~

 

转载于:https://www.cnblogs.com/weblab/archive/2012/04/08/mvc_razor_control_textbox.html