限制MVC视图中的int字段

本文关键字：int 字段 MVC 视图 限制 | 更新日期: 2023-09-27 18:08:29

我有一个整数字段，我希望我的用户只能在数字1和10之间选择。所以目前我在模型中使用Range属性:

[Range(1, 10)]
public int NumberOfExtensions { get; set; }

然而，我想防止视图允许数字低于1和高于10。这对我来说将是一个更好的用户体验。

下面是我的视图代码:

</div>
      <div class="col-md-1">
           @Html.EditorFor(model => model.NumberOfExtensions)
           @Html.ValidationMessageFor(model => model.NumberOfExtensions)
      </div>
</div>

broroshan下面推荐我用Javascript。这更接近我想要的了。我现在正试图修改它，使数字不会超出期望的范围。这是我尝试过的，它不起作用:

<script type="text/javascript">
        $(function () {
            $("#@Html.IdFor(s => s.NumberOfExtensions)").on("input", function () 
            {
                if ($(this).val() < 1)  
                {
                    $(this).val() = 1
                }
                else if ($(this).val() > 10)
                {
                    $(this).val() = 10
                } 
            });
        });
    </script>

我希望它停止在#1和#10 -不给一个错误。

限制MVC视图中的int字段

你可以使用属性html

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number 

@Html.EditorFor(model => model.NumberOfExtensions, new {min= 5, max = 10})

你可以使用javascript/jQuery来控制元素允许的最小值和最大值。

试试这个:

<div class="col-md-1">
   @Html.EditorFor(model => model.NumberOfExtensions)
   @Html.ValidationMessageFor(model => model.NumberOfExtensions)
</div>
@section scripts{
 <script type="text/javascript">
    $(function () {
        $("#@Html.IdFor(s => s.NumberOfExtensions)")
        .on("input",function () {
            if ($(this).val() < 0 || $(this).val() > 10) {
                alert("Cannot be less than 0 or more than 10");
                $(this).val("");
            }
        });
    });
 </script>
}

相关文章：