Saturday, 15 July 2017

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

About TechnoGTB
alistarbot is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of alistarbot is to provide the best quality blogger templates.