Javascript 如何使用Jquery从Asp.net MVC中的复选框中获取所选值？_Javascript_C#_Jquery_Asp.net_Asp.net Mvc

Javascript 如何使用Jquery从Asp.net MVC中的复选框中获取所选值？

javascript c# jquery asp.net asp.net-mvc

Javascript 如何使用Jquery从Asp.net MVC中的复选框中获取所选值？,javascript,c#,jquery,asp.net,asp.net-mvc,Javascript,C#,Jquery,Asp.net,Asp.net Mvc,我正在开发一个MVC web应用程序，我遇到了以下问题。我已经从数据库中动态生成了复选框，但是我不知道如何获取值并将该值存储在数据库中。有什么想法吗下面是从数据库中检索值的代码 public ActionResult GetAllProductsJson() { InventoryProductsRepository ir = new InventoryProductsRepository(); JsonResult jr = new JsonResult();

我正在开发一个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);
});

$（文档）.ready（函数（）{
var manageProduct=$（“#manageProduct”）；
变量tbody=$（“#数据表1”）。子项（“tbody”）；
var-selectedProductName；
var currentSelectedProduct；
$.getJSON（“/Client/Client/GetAllProductsJson”，函数（数据）{
var tableData=“”；
allProductInventoryJsonData=data；//从外部的另一个函数访问
$。每个（数据、函数（键、值）{
变量输入=$（“”）；
input.attr（“type”，“checkbox”）；
输入。属性（“已检查”）；
input.attr（“value”，value.ProductInventoryId）；
var newSpan=$（“”）.html（value.Name）；
$（“”）.addClass（“ckbox-ckbox-primary”）.append（输入）.append（新闻潘）.appendTo（管理产品）；
})
tbody.append（tableData）；
}).fail（函数（jqXHR、textStatus、errorshown）{
警报（“加载表数据失败”+错误抛出）；
});

现在，我想将所选值存储在数据库中。你知道我需要做什么吗？

Models

公共类电影
{
公共int ID{get；set；}
公共字符串名称{get；set；}
公共布尔值被选为{get；set；}
}
公共类MyViewModel
{
公共列表电影{get；set；}
}

控制器

公共类DemoListController:控制器
{
公共行动结果索引（）
{
var oVm=新的MyViewModel
{
电影=新列表
{
新电影{ID=1，Name=“Test1”，IsSelected=false}，
新电影{ID=2，Name=“Test2”，IsSelected=false}，
新电影{ID=3，Name=“Test3”，IsSelected=false}，
新电影{ID=4，Name=“Test4”，IsSelected=false}，
新电影{ID=5，Name=“Test5”，IsSelected=false}
},
};
返回视图（oVm）；
}
公共JsonResult GetList（int id）
{
变量列表=新列表
{
新电影{ID=1，Name=“Test1”，IsSelected=false}，
新电影{ID=2，Name=“Test2”，IsSelected=false}，
新电影{ID=3，Name=“Test3”，IsSelected=false}，
新电影{ID=4，Name=“Test4”，IsSelected=false}，
新电影{ID=5，Name=“Test5”，IsSelected=false}
};
列表选择=新建列表（）；
select=list.Where（x=>x.ID==ID.ToList（）；
返回新的JsonResult{Data=select，JsonRequestBehavior=JsonRequestBehavior.AllowGet}；
}
}

看法 Index.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>

@model JsonCheckbox.Models.MyViewModel
@{
布局=空；
}
指数
电影。。。
@for（int i=0；iModel.movies[i].ID）
@CheckBoxFor（x=>Model.movies[i].IsSelected，new{@class=“cbk”，hd=Model.movies[i].ID}）
@DisplayFor（x=>Model.movies[i].Name）
@Html.HiddenFor（x=>Model.movies[i].Name）
}
@Scripts.Render（“~/Scripts/jquery-1.10.2.min.js”）
$（文档）.ready（函数（）{
$（“.cbk”）.change（函数（）{
var select=“”；
$（“输入[类型='复选框']）。每个（函数（）{
var c=$（this）.is（“：checked”）；
如果（c）{
var t=$（this.attr（“hd”）；
$.ajax({
键入：“获取”，
url:'@url.Action（“GetList”、“DemoList”），
数据：{id:$（this.attr（“hd”）}，
数据类型：“json”，
成功：功能（数据）{
选择+=“Id:+数据[0]。Id+”，名称：“+数据[0]。名称+”；\n”；
$（“#txt”）.val（选择）；
}
})
}否则{
$（“#txt”）.val（选择）
}                
})                                
})        
})

试试这个

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

在您希望将其发布回服务器的事件上。（很可能是单击按钮）。然后调用$.ajax将其发布。

我应该在哪里实现它？

@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>

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