Question

我有一个包含复选框列表的<form>标记。当表单enctype = application/x-www-form-urlencoded时，多个选中的复选框值将按照预期的Request.Form以逗号分隔字符串的形式呈现给我。

如果我将enctype更改为multipart/form-data（因为我想在提交中包含个人资料图片），那么只有最后选择的复选框值才会通过Request.Form显示，尽管所有选中的复选框值都是相同的名称）存在于请求有效载荷中。

示例有效负载

------WebKitFormBoundaryS2gp8PRUhbFngzPE
Content-Disposition: form-data; name="expertise-areas"

Academic career path
------WebKitFormBoundaryS2gp8PRUhbFngzPE
Content-Disposition: form-data; name="expertise-areas"

Promotion

路线代码

var expertise = Request.Form.expertiseareas;

结果

Expected : "Academic career path,Promotion"
Actual   : "Promotion"

这是设计的吗？如果是这样，使用小图像发送复选框值列表的最佳方法是什么？我是否需要将其分为两种形式？

由于

Answer 1

以下是我如何运作：

通过删除阻止复选框与表单一起发布名称属性
添加隐藏输入以将所选值保存为逗号分隔列表
使用javascript将选定的复选框值加入到a中以逗号分隔的列表
将隐藏的输入值设置为以逗号分隔的列表

我只是从我的项目中抽出了这个代码，但你明白了。

HTML（剃刀）

<form id="form-profile-edit" enctype="multipart/form-data" method="POST" action="/user/profile/edit">
... more stuff
    <input id="organisational-hidden" name="organisationalareas" type="hidden"/>
    @foreach (string area in Model.OrganisationalAreas)
    {
        @Html.GetAreaCheckbox(area, 
                              user.HasOrgansiationalArea(area), 
                              @class:"organisational")
    }
...more stuff
</form>

<强>的Javascript

$('#form-profile-edit').ajaxForm({
    beforeSerialize: function() {
        var organisational = toCommaDelimited($('.organisational:checked'));
        $('#organisational-hidden').val(organisational);
    }
});
function toCommaDelimited(checkboxes) {
    return $.map(checkboxes, function (checkbox) { return checkbox.value; }).join(',');
}

当表单编码为multipart / form-data时，向NancyFX发送多个复选框值

1 个答案: