EditorFor not allowing to enter decimal value

Question

I have model that has decimal field

[DisplayFormat(DataFormatString = "{0:0.00}", ApplyFormatInEditMode = true)]
public decimal Sum { get; set; }

And I want to have input field created in which user can put decimal value with two decimal places

[HttpGet]
public IActionResult TransferForm()
{
    string serialized = HttpContext.Session.GetString("CurrentUser") as string;
    UserData user = JsonConvert.DeserializeObject<UserData>(serialized);
    Transfer newTransfer = new Transfer();
    newTransfer.Date = DateTime.Now;
    if (user.Balance + 2000 < 0)
    {
        TempData["MaxValue"] = 0;
    }
    else
    {
        TempData["MaxValue"] = user.Balance + 2000;
    }
    newTransfer.Sender = user.FirstName + " " + user.Surname;
    ViewData.Model = newTransfer;
    return View();
}

<div class="form-group">
    @Html.LabelFor(model => model.Sum, "Kwota", htmlAttributes: new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.EditorFor(model => model.Sum, new { htmlAttributes = new { @class = "form-control", @placeholder = "Kwota", @type = "number", @min = "0.00", @max = TempData["MaxValue"], @step=0.01 } })
    </div>
</div>

The problem is that without step attribute, I cannot enter decimal value, only int are correct. I somehow forced the field to accept decimal values with step attribute but with this attribute, when user press submit button, null is readed.

GET endpoint for this form I read object of UserData from session to

Here is the page:

@model Solution.Models.Transfer
@using (Html.BeginForm("TransferForm", "Home", FormMethod.Post))
{
<div class="form-horizontal">
    <h2>Zrób przelew</h2>
    <!--Pole na tytuł-->
    <div class="form-group">
        @Html.LabelFor(model => model.Title, "Tytuł", htmlAttributes: new { @class = "col-sm-2 control-label" })
        <div class="col-sm-10">
            @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control", @placeholder = "Tytuł" } })
        </div>
    </div>
<div class="form-group">
    @Html.LabelFor(model => model.Sum, "Kwota", htmlAttributes: new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.EditorFor(model => model.Sum, new { htmlAttributes = new { @class = "form-control", @placeholder = "Kwota", @type = "number", @min = "0.00", @max = TempData["MaxValue"], @step=0.01 } })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Date, "Data", htmlAttributes: new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Sender, "Nadawca", htmlAttributes: new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.EditorFor(model => model.Sender, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Recipient, "Odbiorca", htmlAttributes: new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.EditorFor(model => model.Recipient, new { htmlAttributes = new { @class = "form-control", @placeholder = "Odbiorca" } })
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <input type="submit" value="Potwierdź" class="btn btn-dark" />
    </div>
</div>

Transfer.cs

public class Transfer
{
    public string Title { get; set; }

    [DisplayFormat(DataFormatString = "{0:0.00}", ApplyFormatInEditMode = true)]
    public decimal Sum { get; set; }
    public DateTime Date { get; set; }
    public string Recipient { get; set; }
    public string Sender { get; set; }

    public Transfer()
    {

    }

    public Transfer(string title, decimal sum, DateTime date, string recipient, string sender)
    {
        Title = title;
        Sum = sum;
        Date = date;
        Recipient = recipient;
        Sender = sender;
    }

}

Its seems your razor markup fragment is correct. Show full view code, how you pass the data to the controller. And show your controller related code, please. — Jackdaw, Dec 03 '21 at 08:16
@Jackdaw I tested some solutions and I have some hints that my issue is somehow connected to passing my `newTransfer` object to view. I initliazed `Date` and `Sender` fields but in view it seems like all fields are null — Pawlinho, Dec 03 '21 at 08:49

Jackdaw · Accepted Answer · 2021-12-03T10:32:11.170

0

You are declared your view data model by the @model declaration (strongly typed view). Therefore, instead of ViewData.Model = newTransfer; pass the data model to the TransferForm view as following:

public IActionResult TransferForm()
{          
    ...
    return View(newTransfer);
}

Fragment of the TransferForm.cshtml:

...
@using (Html.BeginForm("TransferForm", "Home", FormMethod.Post))
{
    @* Two lines below added to support the data binding for the Post... *@
    @Html.HiddenFor(m => Model.Sender)
    @Html.HiddenFor(m => Model.Date)
    ...

And the screenshot:

edited Dec 03 '21 at 10:32

answered Dec 03 '21 at 09:39

Jackdaw

7,626
5
15
33

I replaced `@disabled` with `@readonly` plus add your suggestion and that solved my problem with fields `Date` and `Sender` being set as nul.. But still I have problem with `Sum` . When I try to enter decimal value, it's set null. Only int values are working – Pawlinho Dec 03 '21 at 09:43
@Pawlinho: Add your `Transfer` class declaration to the post, please. – Jackdaw Dec 03 '21 at 09:51
@Pawlinho: If the `Sender` is returning to the `[HttpPost] IActionResult TransferForm()` as `null` try to add `@Html.HiddenFor(m => Model.Sender)` , for example, after `@using (Html.BeginForm("TransferForm", "Home", FormMethod.Post)) { `. – Jackdaw Dec 03 '21 at 10:05
@Pawlinho: And what exactly decimal `Sum` value you enter when the `Sum` is set to `null`. Because it's working for me. By the way, change `Sum` type declaration to `decimal?` to see the `placeholder`. – Jackdaw Dec 03 '21 at 10:08
1

If it's working for you, I think I have idea why it's not working for me. I saw now that in my browser, comma is set as decimal separator which maybe causes problem. So it seems I have to change something to force using period as decimal separator, which I don't know how to do yet. – Pawlinho Dec 03 '21 at 10:17
@Pawlinho: **1)** Actually I used the dot as decimal separator, not the comma. See updated fragment in my answer. **2)** I have a question: **_What symbol is used as decimal separator on your system?_** This depend on regional settings. – Jackdaw Dec 03 '21 at 10:29
In my system it's comma. But I wonder if I can maybe put some attribute inside `EditorFor` to force input field to dot as separator – Pawlinho Dec 03 '21 at 10:33
@Pawlinho: See the following post: [MVC/JQuery validation does not accept comma as decimal separator](https://stackoverflow.com/questions/48066208/mvc-jquery-validation-does-not-accept-comma-as-decimal-separator). **Your problem is related to the client side validation plugin.** – Jackdaw Dec 03 '21 at 10:47

EditorFor not allowing to enter decimal value

1 Answers1