通过 jquery/ajax 将复选框值传递给控制器，并将空值返回给控制器答案

【问题标题】：Passing checkbox values to controller via jquery/ajax with null value returned to controller通过 jquery/ajax 将复选框值传递给控制器，并将空值返回给控制器
【发布时间】：2017-09-01 19:34:48
【问题描述】：

我有一个 .NET MVC 应用程序。我正在尝试使用 jquery ajax 将数据发布到我的控制器。一切似乎都基于查看 Firebug 控制台（我可以在我的发布请求中看到数组中的值），但在控制器中，IEnumerable STRMSelected 为空。关于我做错了什么有什么想法吗？

局部视图

 @if (Model.Count() > 0)
    {

        foreach (var item in Model)
        {
            //int countAU = 1, countSP = 1, countSU = 1;
            string nameAU = "AU" + @item.year;
            string nameSP = "SP" + @item.year;
            string nameSU = "SU" + @item.year;
            <tr>
                <td style="text-align:center;">
                    <strong><label> @item.year</label></strong>
                </td>

                <td style="text-align:center;">


                    @if (@item.AU != null)
                    {
                        <input type="checkbox" name=@nameAU id="@nameAU" value="@item.AU" />
                        //countAU++;
                    }
                    else
                    {
                        <input type="checkbox" name="AUNonex" id="AUNone" disabled />
                    }

                </td>
           </tr>
          }
       }

主视图

 <div class="gradfacapp-samerow">
        <input type="submit" value="Save Request for Later" name="action:Save" class="cancel" />

        <input type="submit" value="Submit Request" id="submit" name="action:Submit" onclick="javascript:return checkSubmit();" />
 </div>


<script>
 $('#submit').on('click', function () {
        var STRMS = [];
        $('input:checked').each(function () {
            STRMS.push($(this).attr("value"));
        });
        $.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "FeeAuth")',
            dataType: "html",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ STRMSelected: STRMS }),
            success: 
                function (data) {  }

        });
    });
</script>

控制器

    [HttpPost]
    [MultipleButton(Name = "action", Argument = "Submit")]
    public ActionResult Submit(FA fee, HttpPostedFileBase upfile, IEnumerable<string> STRMSelected)
    {              
          code is here
    }

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

你可以使用这个语法

 <input type="checkbox" name=@nameAU id="@nameAU" data-value="@item.AU" />

进入 jquery

var STRMS = [];
        $('input:checked').each(function () {
            STRMS.push($(this).data("value"));
        });

然后将 STRMS 发送到控制器。

【讨论】：

【解决方案2】：

删除 contentType: "application/json; charset=utf-8", 并更改

data: JSON.stringify({ STRMSelected: STRMS }), 到data: { STRMSelected: STRMS}, 没有必要以json 发送数据，所以你的ajax 将是

$.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "FeeAuth")',
            dataType: "html",
            data: { STRMSelected: STRMS},
            success: 
                function (data) {  }

        });

编辑

也防止默认提交

$('#submit').on('click', function (e) {
e.preventDefault();

【讨论】：

尝试了这个建议，但在控制器中仍然是一个空值。
@user2448412 可以试试设置async:false,
仍然将 null 传递给控制器。
function (e) 和 e.preventDefault(); 并在 javascript 中添加它以防止默认提交
我根据您的建议修改了代码，现在它会抛出“404 Not Found”。

【解决方案3】：

我注意到在 Ajax 调用中您设置了两次数据：

data: data,
data: JSON.stringify({ STRMSelected: STRMS }),

如果这不是问题，您总是可以将输入包装在一个表单中，然后使用

var formData = $("#myFormName").serializeArray();
var selectedItems = JSON.stringify(formData);

然后在Ajax调用中使用：

data: selectedItems,

【讨论】：

我删除了 data: data 但它在控制器中仍显示为 null。我添加了 Firebug 帖子的屏幕截图。
尝试将 STRMSelected 输入更改为字符串，然后在控制器中对其进行反序列化以获得您想要的特定值