Question

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

2 个答案: