Input 'number' for Doubles in Asp.Net?

Question

If in an Asp.Net Core application you have a variable type Int, this generates an input div for the model that only lets you write numbers, and lets you increase the number there with some buttons:

http://imgfz.com/i/HJuRvmS.png

<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>

However, if the original variable from your model is a Double, the input div that the code generates is the same which is used for the Strings, letting you write words there, although the model doesn't accept those values.

Is there a way to change that?

I would like my input div for Doubles to be the same as the used for Ints, but with the buttons that lets you increase the Integer part of the number, but still have the comma/dot at the end, letting you write the decimal part / fractional part, manually.

Answer 1

You could use JQuery to allow only numeric and one Decimal Point input in the Textbox.

Check the following code (from your description and the tag list, I assume you are create a Asp.net core Razor Application):

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>
}

The output as below (it allows only numeric and one Decimal Point):