如何在 MVC 中使用 jquery ajax 从 checkboxlistFor 获取复选框的值

Question

我在 mvc 5 中有一个 checkboxlistfor 控件并想要选中复选框的值，一旦我得到该值然后发送 ajax 请求并根据 id 获取数据，下面是参考 link 实现了类似的功能，在这里他对多个复选框使用了 "for loop"，而我使用的是 checkboxlistfor，使用它我无法获得所选的值复选框。

"https://forums.asp.net/t/2078931.aspx?How+to+get+data+from+checkbox+list+using+jquery+ajax+in+MVC+"

下面是我用来绑定复选框列表的代码

查看

@Html.CheckBoxListFor(model => model.sbuIDs, 
                      model => model.Availablesbu,
                      sb => sb.sbuID,
                      sb => sb.sbuName,
                      model => model.Selectedsbu,
                      htmlListInfo)

控制器代码

[HttpGet]
public ActionResult AddUsers()
{
    var Uvm = new UsersViewModel();

    var Selectedsbu = new List<sbu>();
    Uvm.Availablesbu = _User.Getallsbu();
    Uvm.Selectedsbu = Selectedsbu;
    return View(Uvm);
}

public class sbu
{
    public int UserID { get; set; }
    public int sbuID { get; set; }
    public string sbuName { get; set; }
}

public class UsersViewModel()
{
    public IEnumerable<sbu> sbu = null;
    sbu = new List<sbu>();
    public IEnumerable<sbu> Availablesbu { get; set; }
    public IEnumerable<sbu> Selectedsbu { get; set; }
    public string[] sbuIDs { get; set; }
}

更新

下面是我将使用的 ajax 请求：

<script>
    $("#CheckBoxListFor").change(function () {
        debugger;
        var favorite = [];
        $.each($("input[name='sbuIDs']:checked"), function () {
            favorite.push($(this).val());
        });

        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            url: '@Url.Action("Getvalues", "Home")',

            data: JSON.stringify({ values: favorite })
        });

    });
</script>

控制器代码

public JsonResult Getvalues(string[] values)
{
    //
}

Answer 1

在 HTML 中呈现的复选框列表将具有共享名称，但具有不同的 ID，即名称后跟 - 和标识索引的数字。

您可以使用 jQuery 获取所选的列表。

$('[name="checkBoxListName"]:checked');

要获取它们的值的数组：

var values = $('[name="checkBoxListName"]:checked').get();

您的示例脚本应该可以进行一些小的更改。 1) 使用名称选择器，因为您的复选框将具有不同的 ID。 2) 将代码包装在$(document).ready 中。 3) 只是 post 原始对象而不是字符串：

<script>
$(document).ready(function() {
    $("[name='checkBoxListName']).change(function () {
        // code here.
        data: { values: favorite }
    });
 });
</script>

Answer 2

下面是我使用的ajax请求

<script>
                            $("#CheckBoxListFor").change(function () {
                                debugger;
                                var favorite = [];
                                $.each($("input[name='sbuIDs']:checked"), function () {
                                    favorite.push($(this).val());
                                });

                                $.ajax({
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json",
                                    url: '@Url.Action("Getvalues", "Home")',

                                    data: JSON.stringify({ values: favorite })
                                });

                            });



                        </script>

控制器代码

 public JsonResult Getvalues(string[] values)
    {

..... }

如何在 MVC 中使用 jquery ajax 从 checkboxlistFor 获取复选框的值

How to get value of checkbox from checkboxlistFor using jquery ajax in MVC

c#

ajax

asp.net-mvc

jquery

checkboxlist