如何使用Jquery从Asp.netMVC中的CheckBox中获取选定的值

How to get the selected values from CheckBox in Asp.net MVC using Jquery?

本文关键字：获取 CheckBox 中的 Jquery 何使用 Asp netMVC      更新时间：2023-09-26

我正在开发一个MVC web应用程序，但我遇到了以下问题。我从数据库中动态生成了复选框，但我不知道如何获取值并将该值存储在数据库中。有什么想法吗？

以下是从数据库中检索值的代码

public ActionResult GetAllProductsJson()
{
    InventoryProductsRepository ir = new InventoryProductsRepository();
    JsonResult jr = new JsonResult();
    jr.Data = ir.GetAllProductsName();
    jr.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
    return jr;
}

这是我的javascript文件

$(document).ready(function () {   
    var manageProduct = $("#manageProduct");
    var tbody = $("#dataTable1").children("tbody");
    var selectedProductName;
    var currentSelectedProduct;
    $.getJSON("/Client/Client/GetAllProductsJson", function (data) {
        var tableData = "";
        allProductInventoryJsonData = data; //To  access from another function outside
        $.each(data, function (key, value) {

            var input = $("<input>");
            input.attr("type", "checkbox");
            input.attr("checked");
            input.attr("value", value.ProductInventoryId);
            var newSpan = $("<span>").html(value.Name);

            $("<label>").addClass("ckbox ckbox-primary").append(input).append(newSpan).appendTo(manageProduct);

        })
        tbody.append(tableData);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        alert("failed to load table data" + errorThrown);
});

现在我想将所选的值存储在数据库中。你知道我该怎么做吗？

试试这个。

var checkedValues = [],
    checkedOnes = $("label.ckbox-primary").find("input['type=checkbox']:checked");
checkedOnes.each(function( index ) {
  checkedValues.push(this.value);
});

在要将其发布回服务器的事件上。（很可能是点击按钮）。然后进行$.ajax调用来发布它。

型号

public class Movies
{
    public int ID { get; set; }
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}
public class MyViewModel
{
    public List<Movies> movies { get; set; }
}

控制器

public class DemoListController : Controller
    {
        public ActionResult Index()
        {
            var oVm = new MyViewModel
            {
                movies = new List<Movies>
                {
                    new Movies {ID=1,Name="Test1",IsSelected=false},
                    new Movies {ID=2,Name="Test2",IsSelected=false},
                    new Movies {ID=3,Name="Test3",IsSelected=false},
                    new Movies {ID=4,Name="Test4",IsSelected=false},
                    new Movies {ID=5,Name="Test5",IsSelected=false}
                },
            };
            return View(oVm);
        }
        public JsonResult GetList(int id)
        {
            var list = new List<Movies>
                {
                    new Movies {ID=1,Name="Test1",IsSelected=false},
                    new Movies {ID=2,Name="Test2",IsSelected=false},
                    new Movies {ID=3,Name="Test3",IsSelected=false},
                    new Movies {ID=4,Name="Test4",IsSelected=false},
                    new Movies {ID=5,Name="Test5",IsSelected=false}
            };
            List<Movies> select = new List<Movies>();
            select = list.Where(x => x.ID == id).ToList();
            return new JsonResult { Data = select, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }

查看

索引.cshtml

@model JsonCheckbox.Models.MyViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        <h2>Movies...</h2>
        <table>
        @for (int i = 0; i < Model.movies.Count; i++)
        {
            <tr>
                <td>
                    @Html.HiddenFor(x => Model.movies[i].ID)
                    @Html.CheckBoxFor(x => Model.movies[i].IsSelected,new {@class="cbk",hd=Model.movies[i].ID })
                    @Html.DisplayFor(x => Model.movies[i].Name)
                    @Html.HiddenFor(x => Model.movies[i].Name)
                </td>
            </tr>
        }
    </table>
        <textarea id="txt" style="width:400px;height:200px"></textarea>
    </div>
</body>
</html>
@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
<script type="text/javascript">
    $(document).ready(function () {
        $(".cbk").change(function () {            
            var select = "";
            $("input[type = 'checkbox']").each(function () {                
                var c = $(this).is(":checked");
                if (c) {
                    var t = $(this).attr("hd");
                    $.ajax({
                        type: "Get",
                        url: '@Url.Action("GetList", "DemoList")',
                        data: { id: $(this).attr("hd") },
                        dataType: "json",
                        success: function (data) {
                            select += "Id:" + data[0].ID + ",Name:" + data[0].Name + "; 'n";
                            $("#txt").val(select);
                        }
                    })
                } else {
                    $("#txt").val(select)
                }                
            })                                
        })        
    })
</script>
相关文章：