CODEWITHSUNDEEP
javascriptc#jqueryasp.netasp.net-mvc
Madhab Dhakal
Madhab Dhakal

Reputation: 103

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

I am working on a MVC web application and i am stuck on the following problem. 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 

$(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?

Upvotes: 1

Views: 5084

Answers (2)

codeandcloud
codeandcloud

Reputation: 55308

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.

Upvotes: 3

sujit kinage
sujit kinage

Reputation: 27

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

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

Upvotes: 0

Related Questions