MVC扩展Html.EditorFor（int）与HTML5最小值取自[范围]属性

问题描述：

是否有一个接触点，我可以在ASP.NET MVC5.2.2中使用扩展生成的范围约束整数属性的HTML一个视图模型？MVC扩展Html.EditorFor（int）与HTML5最小值取自[范围]属性

我有一个视图模型类的整数属性，其范围将被约束在1和999之间。我想使用HTML5 min和max属性，以便浏览器提供的编辑器不让用户输入超出该范围的值。

例如在Chrome中，<input type="number" min="1" max="999" />为我提供了一个限制值为1到999的微调器的字段。

当前，jquery不显眼验证正在强制执行规则，突出显示超出范围的值，但如果微调器首先不会创建无效值。

ViewModel类：

public class MyViewModel 
{ 
    [Required] 
    [Range(1, 999)] 
    public int? ValueInRange 
    { 
     get; 
     set; 
    } 
}

CSHTML为ValueInRange编辑：

@Html.LabelFor(m => m.ValueInRange) 
@Html.EditorFor(m => m.ValueInRange) 
@Html.ValidationMessageFor(m => m.ValueInRange)

生成的HTML：

<input type="number" value="0" id="ValueInRange" name="ValueInRange" 
    class="form-control text-box single-line" 
    data-val="true" 
    data-val-number="The field ValueInRange must be a number." 
    data-val-range="Please select a value between 1 and 999" 
    data-val-range-max="999" 
    data-val-range-min="1" 
    data-val-required="ValueInRange is required" />

是否有任何现有的方式来增加min和max属性的生成输出可以获得在th中声明的值e属性的Range属性？我知道我可以手动添加这些属性作为additionalViewData参数EditorFor的一部分，但这是重复的，并且提供了cshtml和viewmodel代码之间的漂移能力。

我宁愿没有从头开始编写一个EditorFor模板.....

不使用内置模板（您需要使用'@ Html.EditorFor（m => m.GroupSize，new {htmlAttributes = new {min = 1，max = 999}}）'对其进行硬编码。你可以编写自己的扩展方法，从'[Range]'中读取值并添加'min'和'max'属性，或者你可以使用javascript/jQuery读取'data-val- *'属性并添加'min'和'max'属性到html –

我喜欢jQuery方法 - 在我看来，这个评论是值得回答的。谢谢。 –

答

没有什么开箱做到这一点的，但你既可以创建自己的扩展方法，或者使用JavaScript/jQuery添加min和max属性。

扩展方法可能看上去像

public static MvcHtmlString NumericRangeInputFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null) 
{ 
    // Add type="number" 
    var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); 
    attributes.Add("type", "number"); 
    // Check for a [Range] attribute 
    ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, helper.ViewData); 
    var property = metadata.ContainerType.GetProperty(metadata.PropertyName); 
    RangeAttribute range = property.GetCustomAttributes(typeof(RangeAttribute), false).First() as RangeAttribute; 
    if (range != null) 
    { 
     attributes.Add("min", range.Minimum); 
     attributes.Add("max", range.Maximum); 
    } 
    return helper.TextBoxFor(expression, attributes); 
}

，你可以通过检查的属性类型是一个数值类型（例如these answers）加强这一点，添加一个参数为step属性等

使用jQuery

，您可以检查一个data-val-range属性，并添加一个基于data-val-range-min的价值观和data-val-range-max属性

var numberInputs = $('[type="number"]'); 
$.each(numberInputs, function(index, item){ 
    if ($(this).data('val-range')) { 
     var min = $(this).data('val-range-min'); 
     var max = $(this).data('val-range-max'); 
     $(this).attr('min', min); 
     $(this).attr('max', max); 
    } 
})

MVC扩展Html.EditorFor（int）与HTML5最小值取自[范围]属性

相关推荐