在 Asp.Net 中为双打输入 'number'？

Question

如果在 Asp.Net 核心应用程序中你有一个变量类型 Int，这会为模型生成一个输入 div，它只允许你写数字，并允许你增加一些数字按钮：

<div class="form-group">
<label asp-for="CantidadperoDouble" class="control-label"></label>
<input asp-for="CantidadperoDouble" class="form-control" />
<span asp-validation-for="CantidadperoDouble" class="text-danger"></span>
</div>

但是，如果模型中的原始变量是 Double，则代码生成的输入 div 与用于字符串的输入相同，让您可以在那里写字，尽管模型不会不接受这些值。

有办法改变吗？

我希望双精度的输入 div 与整数的输入相同，但带有可让您增加数字的整数部分的按钮，但仍然有 comma/dot 最后，让你手动写小数部分/小数部分。

Answer 1

您可以使用 JQuery 在文本框中只允许输入数字和一个小数点。

检查以下代码（根据您的描述和标签列表，我假设您正在创建一个 Asp.net 核心 Razor 应用程序）：

Product.cs

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public double Price { get; set; }
}

Create.cshtml.cs

public class CreateModel : PageModel
{
    [BindProperty]
    public Product Product { get; set; }
    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }
        var data = Product;

        return RedirectToPage("./Index");
    }
}

Create.cshtml:

@page
@model RazorSample.Pages.CreateModel

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
            <div class="form-group">
                <label asp-for="Product.Name" class="control-label"></label>
                <input asp-for="Product.Name" class="form-control" />
                <span asp-validation-for="Product.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Product.Price" class="control-label"></label>
                <input asp-for="Product.Price" class="form-control" />
                <span asp-validation-for="Product.Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
@section Scripts{
<script>
    $(function () { 
        $("#Product_Price").on("keypress keyup blur", function (event) { 
            $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }
        });
    })
</script>
}

输出结果如下（只允许数字和一个小数点）：

在 Asp.Net 中为双打输入 'number'？

Input 'number' for Doubles in Asp.Net?

html

c#

double

razor

asp.net-core