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

时间:2017-07-04 05:10:57

标签: c# jquery ajax asp.net-mvc checkboxlist

我在mvc 5中有一个checkboxlistfor控件,想要选中复选框的值,一旦我得到值,然后发送ajax请求并按照id获取数据, 下面是实现类似功能的参考链接,在这里他使用了“for循环”多个复选框,我使用checkboxlistfor,使用这个我无法获得所选复选框的值。

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

以下是我用于绑定checkboxlistfor code

的代码

视图

@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)
{
    //
}

2 个答案:

答案 0 :(得分:0)

在HTML中呈现一个复选框列表将具有共享名称,但将使用不同的ID作为名称,后跟-和标识索引的数字。

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

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

获取其值的数组:

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

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

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

答案 1 :(得分:0)

以下是我使用的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)
    {

.... }