在 MVC 视图中限制 int 字段

Question

我有一个整数字段，我希望我的用户只能在数字 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>

下面Brroshan推荐我用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 处停止 - 不要报错。

Answer 1

你可以使用属性html

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

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

Answer 2

您可以使用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>

}

在 MVC 视图中限制 int 字段

Limit int field in MVC view

c#

asp.net-mvc

view