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

Question

I am working on a MVC web application and i am stuck on the following problem. 我正在MVC Web应用程序上工作，但是我遇到了以下问题。 I have checkbox generated dynamically from my database, however i don't know how to get the value of the selected one and stored that value in database. 我有从数据库动态生成的复选框，但是我不知道如何获取所选值并将其存储在数据库中。 Any Ideas? 有任何想法吗？

Here is the code to retrieve a value from database, 这是从数据库检索值的代码，

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

    return jr;
}

and here is my javascript file 这是我的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);
});

now i want to store that selected value in database. 现在我想将所选的值存储在数据库中。 Is there any idea what should i need to do? 有什么想法我该怎么办？

Answer 1

Try this. 尝试这个。

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

On the event where you want to post it back to server. 如果您想将其发布回服务器。 ( Most probably a button click ). （最有可能是单击按钮）。 Then make a $.ajax call to post it. 然后拨打$ .ajax进行发布。

Answer 2

Models 楷模

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

Controller 调节器

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

View 视图

Index.cshtml 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>

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

问题描述

2 个解决方案

解决方案1
2 2016-05-13 10:35:04

解决方案2
0 2016-05-13 10:34:43

Models 楷模

Controller 调节器

View 视图

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

问题描述

2 个解决方案

解决方案1 2 2016-05-13 10:35:04

解决方案2 0 2016-05-13 10:34:43

Models 楷模

Controller 调节器

View 视图

解决方案1
2 2016-05-13 10:35:04

解决方案2
0 2016-05-13 10:34:43