locked
using MVC and Ajax on checkbox from list Change select other checkboxes RRS feed

  • Question

  • User-1556678718 posted

    hi

    I have list of checkboxes. When an checkbox is selected it is sent Get to the controller and the controller should return list of dependent Ids that need to be checked too. For example: if checkbox with ID 1 is checked, the controler should return list of dependent ids like {5,6,7} and the sheckboxes with ids {5, 6, 7} should be checked. here  is my code:

    view:

     @for (var i = 0;  i < Model.DocumentTypes.Count;     ++i)
    {
    <tr>
           <td>
                <div class="custom-control custom-checkbox">
                     <input type="checkbox" id="@Model.DocumentTypes.ElementAt(i).Key" onclick="FindDependentDocumentTypes(@Model.DocumentTypes.ElementAt(i).Key)">
                     <label class="custom-control-label" for="@Model.DocumentTypes.ElementAt(i).Key">@Model.DocumentTypes.ElementAt(i).Value</label>
                </div>
                            
           </td>
    </tr>
    
    }
    
    <script>
        function FindDependentDocumentTypes(itemId) {
            
           
            $.get("/Home/GetDependents?i=" + itemId).done(function (data) {
                if (data.success) {
                   // HERE I NEED HELP HOW TO CHECK ALL THE CHECKBOXES WHOSE iDS ARE IN THE LIST
    
                }
                else {
                    alert(data.message);
                }
            });
        }
    </script>

    Controller

            [HttpGet]
            public ActionResult GetDependents(int i)
            {
           
                var List1 = GetDependentDocumentTypes(i);
                
                return View(List1);
            }

    Please advice How to select the dependent checkboxes? 

    Thursday, June 20, 2019 11:11 AM

Answers

  • User839733648 posted

    Hi RioDD,

    The Controller is being called ant the GET caoo is being executed perfectly, just on the view the checkboxes are not being updated.

    According to your description and code, I suggest that the key point of your issue is the result of your response.

    You could F12 developer tools to debug the response result about that if the value or the format  is correct.

    According to mgebhard's example code, I've made some changes. I suggest that you should use JsonResult to return the result in controller.

    Controller.cs

            public ActionResult Test()
            {
                return View();
            }
    
            [HttpGet]
            public JsonResult GetDependents()
            {
                List<int> List1 = new List<int>() { 1, 2, 3, 4, 5 };
                return Json(List1, JsonRequestBehavior.AllowGet);
            }
        }

    .cshtml

    <div>
        <input id="cb1" type="checkbox" name="cb1" />
    </div>
    <div>
        <input id="cb2" type="checkbox" name="cb2" />
    </div>
    <div>
        <input id="cb3" type="checkbox" name="cb3" />
    </div>
    <div>
        <input id="cb4" type="checkbox" name="cb4" />
    </div>
    <div>
        <input id="cb5" type="checkbox" name="cb5" />
    </div>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    
    @section scripts{
        <script>
            $('#Button1').click(function (e) {
                e.preventDefault();
                $.ajax({
                    method: "GET",
                    url: '@Url.Action("GetDependents")',
                    success: function (response) {
                        $.each(response, function (index, value) {
                            console.log(value);
                            $('#cb' + value).prop("checked", true);
                        });
                    }
                });
            });
        </script>
    }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 8:10 AM

All replies

  • User475983607 posted

    If the AJAX response is an array of integers then you can use jQuery .each() to loop over the IDs and set the related checkbox by Id.

    $.each(theList, function(index, value) {
    	$('#' + theList).prop( "checked", true );
    }

    Thursday, June 20, 2019 11:30 AM
  • User-1556678718 posted

    when I try 

    <script>
        function FindDependentDocumentTypes(itemId) { 
            $.get("/Home/GetDependents?i=" + itemId).done(function (data) {
                if (data.success) {
                   // alert(2);
                   // HERE I NEED HELP HOW TO CHECK ALL THE CHECKBOXES WHOSE iDS ARE IN THE LIST
                    $.each(theList, function (index, value) {
                        $('#' + value).prop("checked", true);
                    }
                }
                else {
                    alert(data.message);
                }
            });
        }
    </script>

    Nothing in the controller is executing, even when I uncomment alert(2) the alert is not executing. Please help

    Thursday, June 20, 2019 12:22 PM
  • User475983607 posted

    Sorry,I changed val to theList and forgot to update in both places.

    $.each(theList, function(index, value) {
    	$('#' + value).prop( "checked", true );
    }

    Again, this assumes theList is an array of IDs.  It is not clear what /Home/GetDependents returns.  You'll need to assign the array or share the response.

    Thursday, June 20, 2019 1:16 PM
  • User-1556678718 posted

    Hi,

    /Home/GetDependents returns List<int>. i have changed it  now I have 

     [HttpGet]
            public List<int> GetDependents(int i)
            {
           
                var List1 = GetDependentDocumentTypes(i);
                
                return List1;
            }

    and when I comment the $.each...and uncomment the alert I'm getting the alert, but nothing I'm getting when the $.each is commented. am I missing something?

    Please help

    Friday, June 21, 2019 5:46 AM
  • User475983607 posted

    Sorry, I keep creating bugs.  Below is a test and verified example.

    @{
        ViewData["Title"] = "AjaxText";
    }
    
    <h1>AjaxText</h1>
    
    <div>
        <input id="cb1" type="checkbox" name="cb1" />
    </div>
    <div>
        <input id="cb2" type="checkbox" name="cb2" />
    </div>
    <div>
        <input id="cb3" type="checkbox" name="cb3" />
    </div>
    <div>
        <input id="cb4" type="checkbox" name="cb4" />
    </div>
    <div>
        <input id="cb5" type="checkbox" name="cb5" />
    </div>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    
    @section scripts{
        <script>
            $('#Button1').click(function (e) {
                e.preventDefault();
    
                $.ajax({
                    method: "GET",
                    url: '@Url.Action("GetDependents")',
                    success: function (response) {
                        $.each(response, function (index, value) {
                            $('#cb' + value).prop("checked", true);
                        });
                    }
                });
            });
        </script>
    }
    
    
            [HttpGet]
            public IActionResult AjaxText()
            {
                return View();
            }
    
            [HttpGet]
            public List<int> GetDependents()
            {
                List<int> List1 = new List<int>() { 1, 2, 3, 4, 5 };
                return List1;
            }

    Friday, June 21, 2019 11:01 AM
  • User-1556678718 posted

    hi Mgebhard,

    I have tried 

     function FindDependentDocumentTypes(itemId) { 
    
            var checkBox = document.getElementById(itemId);
            if (checkBox.checked == true) {
                
                 $.ajax({
                    method: "GET",
                    url: '/Home/GetDependents?i=' + itemId,
                    success: function (response) {
                        $.each(response, function (index, value) {
                            $("#"+ value).prop("checked", true);
                        });
                        
                    }
                });
    }}

    The Controller is being called ant the GET caoo is being executed perfectly, just on the view the checkboxes are not being updated.

    here is how my checkboxes look like :

    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" name="1117" id="1117" onclick="FindDependentDocumentTypes(1117)">
                                    <label class="custom-control-label" for="1117">Info Pod</label>
                                </div>

    Friday, June 21, 2019 12:21 PM
  • User839733648 posted

    Hi RioDD,

    The Controller is being called ant the GET caoo is being executed perfectly, just on the view the checkboxes are not being updated.

    According to your description and code, I suggest that the key point of your issue is the result of your response.

    You could F12 developer tools to debug the response result about that if the value or the format  is correct.

    According to mgebhard's example code, I've made some changes. I suggest that you should use JsonResult to return the result in controller.

    Controller.cs

            public ActionResult Test()
            {
                return View();
            }
    
            [HttpGet]
            public JsonResult GetDependents()
            {
                List<int> List1 = new List<int>() { 1, 2, 3, 4, 5 };
                return Json(List1, JsonRequestBehavior.AllowGet);
            }
        }

    .cshtml

    <div>
        <input id="cb1" type="checkbox" name="cb1" />
    </div>
    <div>
        <input id="cb2" type="checkbox" name="cb2" />
    </div>
    <div>
        <input id="cb3" type="checkbox" name="cb3" />
    </div>
    <div>
        <input id="cb4" type="checkbox" name="cb4" />
    </div>
    <div>
        <input id="cb5" type="checkbox" name="cb5" />
    </div>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    
    @section scripts{
        <script>
            $('#Button1').click(function (e) {
                e.preventDefault();
                $.ajax({
                    method: "GET",
                    url: '@Url.Action("GetDependents")',
                    success: function (response) {
                        $.each(response, function (index, value) {
                            console.log(value);
                            $('#cb' + value).prop("checked", true);
                        });
                    }
                });
            });
        </script>
    }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 8:10 AM
  • User-1556678718 posted

    Thanks Jenifer the problem is solved with adding JsonResult

    Tuesday, July 9, 2019 10:28 AM