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)
 }

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

enter image description here

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

enter image description here

Answer 2

尝试定期触发ajax调用。因此，如果没有提交表格，您可以将其发送到您的职能部门。

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

2 个答案: