Question

我使用AJAX提交表单如下：

$('#userUpdateForm').submit(function (e) {
            //var attachment = $('form#userUpdateForm').serialize();
            var blue = document.getElementById('blueCheck').checked;
            var personDetails = {
                Enabled: $('#eCheck').val(),
                Authorised: $('#authCheck').val(),
                Green: $('#greenCheck').val(),
                Blue: blue,
                //Blue: $('input[name="blueCheckbox"]').is(':checked'),
                Red: $('#redCheck').val(),
                Id: $('#idCheck').val()
            };

            $.ajax({
                type: "POST",
                //url: '<%= Url.Action("submitForm", "Home") %>',
                url: '@Url.Action("submitForm", "Home")',
                data: JSON.stringify({ jsonForm: personDetails}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    '@Url.Action("Index", "Home")';
                    alert("Success");
                },
                error: function (result) {
                    alert("A problem occured when submitting the form.");
                }
            });

            e.preventDefault();
        });

'蓝色'是指一个复选框。然后表单提交给控制器HomeController / submitForm，如下所示：

   public class updatePersonDetails
    {
        public string Enabled { get; set; }
        public string Authorised { get; set; }
        public string Green { get; set; }
        public bool Blue { get; set; }
        public string Red { get; set; }
        public string Id { get; set; }
    }

    [HttpPost]
    public ActionResult submitForm(updatePersonDetails personDetails)
    {
        System.Diagnostics.Debug.WriteLine(personDetails.Blue.ToString());
        return View();
    }

但是当选中复选框并且应该返回true时，'Blue'会持续返回'False'。正如您在下面所看到的，我尝试了各种各样的东西来获得价值：

        var attachment = $('form#userUpdateForm').serialize();
        var blue = document.getElementById('blueCheck').checked;
        Blue: $('input[name="blueCheckbox"]').is(':checked'),

更奇怪的是浏览器上的jsonForm在请求有效负载中显示“Blue：true”。在服务器端获得正确的值是否有一些我缺少的东西？

编辑：表单的HTML

<form id="userUpdateForm" method="post">
    <fieldset>
        <legend>User Details</legend>
        <input type="checkbox" name="authorisedCheckbox" value="Authorised" id="authCheck" />Authorised<br />
        <input type="checkbox" name="enabledCheckbox" value="Enabled" id="eCheck" />Enabled<br />
    </fieldset>
    <fieldset>
        <legend>Favourite Colours</legend>
        <input type="checkbox" name="blueCheckbox" value="Blue" id="blueCheck" />Blue<br />
        <input type="checkbox" name="greenCheckbox" value="Green" id="greenCheck" />Green<br />
        <input type="checkbox" name="redCheckbox" value="Red" id="redCheck" />Red<br />
        <input type="hidden" name="personId" id="idCheck" value='@ViewData["personId"]'>
    </fieldset>
    <input type="submit" value="Save Changes" name="Save Changes">
    <button type="button">Cancel</button>
</form>

还有一个onload函数来设置复选框以反映人的原始数据，但我不会想到会将复选框状态永久设置为'False'。

    var blueVal = '@ViewData["blue"]';
    if (blueVal == "checked") {
        document.getElementById("blueCheck").checked = true;
    }

Answer 1

在javascript方面，您发送的数据如下：

    data: JSON.stringify({ jsonForm: personDetails}),

但是你在Controller中的Action签名是这样的：

   [HttpPost]
   public ActionResult submitForm(updatePersonDetails personDetails)

默认的MVC Binder无法将它们绑定在一起。在POST中，ViewModel嵌套在具有“jsonForm”属性的对象中，MVC无法将其与“personDetails”参数匹配。

您需要：

更改JSON属性名称以匹配Action中的参数名称：
```
data: JSON.stringify({ personDetails: personDetails})
```
或者只是删除嵌套属性。对于简单的POST，没有必要。你可以像这样发布你的数据：
```
data: JSON.stringify(personDetails)
```
我更喜欢这个解决方案，因为操作中的参数名称无关紧要。 MVC将仅根据updatePersonDetails类中的属性名称绑定数据。

Answer 2

试试这个

var blue = $('#blueCheck').is(":checked") ? true : false;

Answer 3

在删除以下语句后尝试执行相同的代码

 e.preventDefault();

有关preventDefault的更多信息，请查看以下链接 https://www.w3schools.com/jsref/event_preventdefault.asp

希望这会对你有帮助！

复选框不断返回False？

3 个答案: