TechnoTips : Part 40 - How to send multiple checkbox Ids to controller using Jquery in Asp.net MVC

In this video you will be able to display multiple checkbox on view page with checked and unchecked value. Then will be able to send the ID's of checked checkbox to the controller with the help of ajax call. So, the expected View would be like what shown in below image.

#Controller Code

Add a controller named "Test" and replace everything with below code. In below code, you will find three methods
a) Index () : This method will return view with data in ViewBag.ItemList consisting all Items in the shop.
b) SaveItems(string ItemIds) : This method will be called by ajax and it receive the Ids of checkboxes as a comma separated string.

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{

    public class TestController : Controller
    {

        public ActionResult Index()
        {
            MVCTutorialEntities db = new MVCTutorialEntities();
           
            List<MyShop> ItemList = new List<MyShop>();
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Rice", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Pulse", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 3, ItemName = "Chocholate", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 4, ItemName = "Soap", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 5, ItemName = "Tea", IsAvailable = true });

            ViewBag.ItemList = ItemList;

            return View();
        }
        [HttpPost]
        public JsonResult SaveItems(string ItemIds)
        {
            string[] arrayIds = ItemIds.Split(',');

            foreach (string item in arrayIds)
            {
                var id = item;

            }
            return Json("", JsonRequestBehavior.AllowGet);
        }

    }
}

#Model code (EmployeeViewModel)

Right click on your model folder and add a class. Then give a name "MyShop" and click ok button. Replace content with below code,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class MyShop
    {
        public int ItemID { get; set; }
        public string ItemName { get; set; }
        public bool IsAvailable { get; set; }

    }
}

# View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

<div class="panel panel-body" style="min-height:256px">

<div class="col-md-9">
        <div class="col-md-5">
            <img src="~/Content/loading.gif" id="loader" height="20" width="20" style="display:none" />

            <ul class="list-group" id="ItemList">
                @if (ViewBag.ItemList != null)
                {
                    <li class="list-group-item list-group-item-heading active">
                        <h4 class="list-group-item-text">Available Items in my store</h4>

                    </li>
                    foreach (var item in ViewBag.ItemList)
                    {
                        <li class="list-group-item">

                            <div class="checkbox">
                                <input id="item_@item.ItemID" type="checkbox" checked="@item.IsAvailable" />
                                <label for="item_@item.ItemID">@item.ItemName</label>
                            </div>


                        </li>

                    }
                    <li class="list-group-item"><a href="#" class="btn btn-block btn-success" onclick="SaveItems()">Save Item</a></li>

                }

            </ul>
        </div>
    </div>

</div>

<script>

    var SaveItems = function () {
        //$("#loader").show();
        var ItemIdArray = [];
        var ItemsIdsCommaSeparated = "";
        $("#ItemList li input[type=checkbox]").each(function (index, val) {
            debugger
            var Id = $(val).attr("id");
            var ischecked = $("#" + Id).is(":checked", true);
            if (ischecked) {
                debugger
                var array = Id.split("_");
                var ItemId = array[1];
                ItemIdArray.push(ItemId);
            }
            ItemsIdsCommaSeparated = ItemIdArray.toString();
        })
        if (ItemIdArray.length != 0) {
            $.ajax({

                type: "Post",
                url: "/Test/SaveItems",
                datatype:"Json",
                data: { ItemIds: ItemsIdsCommaSeparated },
                success: function (response) {
                    //$("#loader").hide();
                    

                }

            })

        }

    }

</script>

All Code Factory

3 comments:

Unknown said...: Give me..Example..inline editing In Jquery Datatable.and Check boxes; December 22, 2017 at 5:03 AM
sandeep saxena said...: This is very nice post im very like it and i appreciate you for good work keep it up it is very useful for me.
Struts Training in Chennai
Struts Training
Wordpress course in Chennai
Wordpress Training in Chennai
WordPress course
Wordpress Training in Porur
Struts Training
Struts Training in Chennai; February 27, 2019 at 10:04 PM
Narendar Singh said...: Why we use like this "item_@item.ItemID" with checkbox.i mean why use extra Item word whenever we can use @item.ItemID.Please help me.
Thanks; February 12, 2020 at 11:38 PM

TechnoTips

Labels

Saturday, July 15, 2017

Part 40 - How to send multiple checkbox Ids to controller using Jquery in Asp.net MVC

3 comments: