[SOLVED] How do you set the value for a Html.TextBoxFor field bound to a model using jQuery in an MVC 5 View

How do you set the value for a Html.TextBoxFor field bound to a model using jQuery in an MVC 5 View

I am trying to set the value for Html.TextBoxFor field in an ASP.NET MVC 5 view. The TextBoxFor is defined in the following manner within the view:

<div>
    @Html.LabelFor(model => model.ServicePoints, htmlAttributes: new { @class = "control-label LabelStyle1 row-spacing" })
    <div>
     @Html.TextBoxFor(model => model.ServicePoints, new { htmlAttributes =
     new { @class = "form-control",
     @type = "number", @min = "1", @step = "1", @id = "idQty"} })
     @Html.ValidationMessageFor(model => model.ServicePoints, "", new { @class = "text-danger" })
    </div>
    <div id="idButtonArea">
        <input type="button" id="idTestBtn" value="Test" class="btn btn-primary" />
    </div>
</div>

The model with the ServicePoints property is defined as follows:

public class TestPersonModel
{
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int ServicePoints { get; set; }

        public TestPersonModel()
        {
                ServicePoints = 2;
        }
}

After attempting to set the value of the TextBoxFor field I read it back and get an "undefined" value returned so it looks like I am not successfully setting the value. The TextBoxFor field is also not showing the value I am trying to set using the button in the view which tries to set a value of 3. Below is the JQuery I am using with the problem:

<script>
    $("#idButtonArea").on('click', '#idTestBtn', function () {
        $('#idQty').val(3);
        var aValue = $('#idQty').val();
        alert("Service Pionts: " + aValue);
    });
</script>

The MVC Controller used to support this view is shown below:

[AllowAnonymous]
public ActionResult TestForPo()
{
        TestPersonModel testPersonModel = new TestPersonModel();
        return View(testPersonModel);
}

The full view is shown below:

@model rgmsite.Models.TestPersonModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
        <meta name="viewport" content="width=device-width" />
        <title>TestForPo</title>
</head>
<body>
    <div>
        @Html.LabelFor(model => model.ServicePoints, htmlAttributes: new { @class = "control-label LabelStyle1 row-spacing" })
        <div>
            @Html.TextBoxFor(model => model.ServicePoints, new { htmlAttributes =
     new { @class = "form-control",
         @type = "number",
         @min = "1",
         @step = "1",
         @id = "idQty"} })
            @Html.ValidationMessageFor(model => model.ServicePoints, "", new { @class = "text-danger" })
        </div>
        <div id="idButtonArea">
            <input type="button" id="idTestBtn" value="Test" class="btn btn-primary" />
        </div>
    </div>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

    <script>
        $("#idButtonArea").on('click', '#idTestBtn', function () {
            $('#idQty').val(3);
            var aValue = $('#idQty').val();
            alert("Service Pionts: " + aValue);
        });
    </script>
</body>
</html>

What am I missing or doing wrong here to set the value of the TextBoxFor field? Any feedback is much appreciated. Thank you and advance.

Solution

You have redundant htmlAtributes change it to

@Html.TextBoxFor(model => model.ServicePoints, new { 
            @class = "form-control",
                @type = "number",
                @min = "1",
                @step = "1",
                @id = "idQty" })