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模板.....

來源

2017-10-21 Neil Moss

不使用內置模板（您需要使用'@ 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); 
    } 
})

來源

2017-10-23 10:47:04

MVC擴展Html.EditorFor（int）與HTML5最小值取自[範圍]屬性

回答

相關問題