如何在 MVC 5 视图中使用 jQuery 为绑定到 model 的 Html.TextBoxFor 字段设置值

Question

I am trying to set the value for Html.TextBoxFor field in an ASP.NET MVC 5 view.我正在尝试在 ASP.NET MVC 5 视图中设置Html.TextBoxFor字段的值。 The TextBoxFor is defined in the following manner within the view: TextBoxFor在视图中以下列方式定义：

<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:具有 ServicePoints 属性的 model 定义如下：

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.在尝试设置 TextBoxFor 字段的值后，我将其读回并返回“未定义”值，因此看起来我没有成功设置该值。 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: TextBoxFor 字段也没有显示我尝试使用视图中的按钮设置的值，该按钮尝试设置值 3。下面是我正在使用的解决问题的 JQuery：

<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:用于支持该视图的 MVC Controller 如下图所示：

[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?我在这里设置 TextBoxFor 字段的值时遗漏了什么或做错了什么？ Any feedback is much appreciated.非常感谢任何反馈。 Thank you and advance.谢谢你，提前。

Answer 1

You have redundant htmlAtributes change it to您有多余htmlAtributes将其更改为

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

如何在 MVC 5 视图中使用 jQuery 为绑定到 model 的 Html.TextBoxFor 字段设置值

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-04-28 00:00:11

如何在 MVC 5 视图中使用 jQuery 为绑定到 model 的 Html.TextBoxFor 字段设置值

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-04-28 00:00:11

解决方案1
2 已采纳 2020-04-28 00:00:11