Numeric TextBox not binding in Razor Pages

[Chris Gilliam]

Hi,

I have the following in a razor page form

 <div class="form-group row mb-2">

  <label asp-for="MunicipalityDemographics.TotalMonthlyPayroll" class="col-4 col-form-label">Monthly Payroll Amount:</label> <div class="col-5">

                            @*<input type="number" step="0.01" asp-for="PayRollStringValue" class="form-control form-rounded accordion-input" />*@

                            <label>@Model.PayRollintValue</label>

                            <ejs-numerictextbox id="numeric" ejs-for="@Model.PayRollintValue" class="form-control form-rounded accordion-input" ></ejs-numerictextbox>

                        </div>

                    </div>

When I submit the form the property is updated from the control on the model during OnPost(). How ever when the page loads the existing property value is not displayed in the form.

The property I am binding to is 

        [BindProperty()]

        public int PayRollintValue { get; set; }

   public async Task<IActionResult> OnGet()

....

                            PayRollintValue = Convert.ToInt32(MunicipalityDemographics.TotalMonthlyPayroll);

As you can see on the screenshot. I am displaying value of PayRollIntValue as a label but the control is not displaying the existing value even though both the control and the label are displaying the same model property

Attachment: numerictxterror_5a7438c5.zip

[Chris Gilliam]

Hi,

I realised I forgot to add the below  to the layout page. I have done this but now it is not binding in either direction . The same code but now the front end is looking different. I have attached a new screenshot.

    <!-- Syncfusion Essential JS 2 Styles -->
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" />

    <!-- Syncfusion Essential JS 2 Scripts -->
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>

    <!-- Syncfusion Essential JS 2 Styles -->
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" />

    <!-- Syncfusion Essential JS 2 Scripts -->
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>

Attachment: numerictxterror_f2e73c1e.zip

[Sevvandhi Nagulan]

Hi Chris, 

Greetings from Syncfusion support. 

We checked your query. The model value will be updated if we submit the form. Otherwise, old value will be maintained. When we submit the value will be updated and we can see that value in the label element after the form post. Refer the below screenshot. 

 

<form method="post"> 

 

    <div class="form-group row mb-2"> 

 

        @*<label asp-for="MunicipalityDemographics.TotalMonthlyPayroll" class="col-4 col-form-label">Monthly Payroll Amount:</label> <div class="col-5">*@ 

 

        @*<input type="number" step="0.01" asp-for="PayRollStringValue" class="form-control form-rounded accordion-input" />*@ 

 

        <label>@Model.PayRollintValue</label> 

 

        <ejs-numerictextbox id="numeric" ejs-for="@Model.PayRollintValue" class="form-control form-rounded accordion-input"></ejs-numerictextbox> 

        <button type="submit">Submit</button> 

 

    </div> 

 

    </div> 

  </form> 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Numeric1168523222 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N