将序列化复选框作为布尔属性和MVC绑定发出

时间:2017-09-12 23:11:04

标签: jquery asp.net asp.net-mvc

在我的ASP.NET MVC应用程序中,我有一个带有布尔属性的模型

public class MyModel
{
  [DisplayName("Inherit")]
  public bool IsInherit{get;set;}
}

剃刀视图

<form id="myform">
      @Html.CheckBoxFor(x=>x.IsInherit)
</form>

这会将html页面呈现为(假设IsInherit为真)

<form id="myform">
   <input name="IsInherit" id="IsInherit" type="checkbox" checked="checked" value="true" data-val-required="The Inherit field is required." data-val="true">
   <input name="IsInherit" type="hidden" value="false">                    
</form>

当选中复选框并且如果我使用jQuery $("#myform").serialize()序列化表单时,结果字符串是

IsInherit=true&IsInherit=false

并且在AJAX POST时,MVC的数据绑定正确地将模型属性值设置为true

但是,在某些情况下,我需要将表单序列化为对象。为此,我有下面的自定义jquery扩展方法,将表单序列化为对象

(function() {
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
                    if (o[this.name]) {
                        if (!o[this.name].push) {
                            o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                    } else {
                        o[this.name] = this.value || '';
                    }
                });
        return o;
    };
})(jQuery)

当我使用此扩展方法$("#myform").serializeObject()序列化表单时,结果对象具有类型为array IsInherit的属性,其中包含两个值truefalse

当我在AJAX上将json对象发布到服务器时,MVC biding不起作用。我收到错误The Inherit field is required.

如何解决此问题?

请注意,问题是选中复选框时,因为选中复选框时serializeObject方法会创建类型为array的属性,我猜MVC绑定不知道如何绑定它。
如果未选中复选框,则一切正常

1 个答案:

答案 0 :(得分:2)

我修改了我的javascript并使用按位运算符来设置值,如果它的布尔值

(function () {
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if ((typeof (this.value) === "boolean") ||
                    (typeof (this.value) === "string" && this.value != undefined && (this.value.toLowerCase() === "true" || this.value.toLowerCase() === "false"))) {
                    o[this.name] = ((o[this.name] == "true") | (this.value == "true")) ? true : false; //Sets value to true if one of two bits is true
                }
                else {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                }
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery)