MVC 中的 JQuery - 使用 getJson 将表单数据作为数组发送

Question

我有一个 MVC 视图，它通过使用 getJSON 定期指向我的控制器中的方法并解析返回的 Json 来更新页面上的元素。

控制器中的方法蓝图：

public JsonResult GetAttendeeJson()
{

    //Code which creates the Json I need.

    return Json(result, JsonRequestBehavior.AllowGet);
}

从视图调用：

function showDetects() {
            // This is the main AJAX that retrieves the data.
            $.getJSON('/Attendee/CardDetections', function (data) {

                $.each(data, function (i, country) {
                    // perform actions using data.

                });

            });
        }

了解我在做什么并不重要，但我的情况发生了变化，我现在在视图中添加了一个包含可变数量复选框的表单（取决于使用页面的用户，复选框的数量会有所不同） .

复选框表单创建：

<form onsubmit="@Url.Action("Index", "Attendee")" method="post" id="checkboxform">
@{int i = 0;}
@{foreach (string s in ViewBag.LocationNames)
{
    <div class="radio-inline">
        @s
        <input class="checkboxcontrol" onchange="this.form.submit()" type="checkbox" id="CheckBoxes" name="CheckBoxes" value="@ViewBag.LocationIds[i]">
    </div> 

    i++;
}

}

</form>

添加此表单意味着我现在需要返回 Json 的控制器方法才能使用这些复选框的数据。 GetAttendeeJson 现在需要知道表单上当前选中了哪些复选框。

所以我希望方法蓝图是这样的：

 public JsonResult GetAttendeeJson(int[] checkBoxValues)
    {

        //Code which creates the Json I need using the checkbox values.

        return Json(result, JsonRequestBehavior.AllowGet);
    }

是否可以在不提交表单的情况下执行此操作？我使用提交来做其他导致重新加载页面的事情。我使用 getJson 来更新页面内容。

理想情况下，我只想在数组中获取选中复选框的 Value 字段，并在调用时将其作为参数发送到 GetAttendeeJson 函数。

谢谢， JK

Answer 1

假设您有以下 HTML -

<input type="checkbox" name="chk" value="1" /> 1
<input type="checkbox" name="chk" value="2" /> 2
<input type="checkbox" name="chk" value="3" /> 3
<input type="checkbox" name="chk" value="4" /> 4

<input type="button" id="submit" value="Submit"/>

然后我们可以使用AJAX POST 将选中的复选框推送到操作方法，如下所示 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $("#submit").click(function () {
            var vals = [];
            $('input:checkbox[name=chk]:checked').each(function () {
                vals.push($(this).val());
            });

            $.ajax({
                url: "/Home/GetAttendeeJson",
                type: "post",
                dataType: "json",
                data: JSON.stringify({ checkBoxValues: vals }),
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    if (result.success) {
                    }
                    else {
                    }
                }
            });
        });
    });
</script>

当我们点击按钮时，可以在以下控制器动作中获得选中的复选框 -

 public JsonResult GetAttendeeJson(int[] checkBoxValues)
 {
      //Code which creates the Json I need using the checkbox values.
      return Json("true", JsonRequestBehavior.AllowGet)
 }

查看渲染如下，我们可以选中/取消选中复选框 -

然后当你下一个断点并调试代码时，输​​出将如下所示 -

Answer 2

尝试定期触发 ajax 调用。这样您就可以在不提交表单的情况下将其发送到您的函数。