using MVC and Ajax on checkbox from list Change select other checkboxes [Answered]RSS

• • Reply
  RioDD

  Member

  207 Points

  400 Posts

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

  Jun 20, 2019 11:11 AM|RioDD|LINK

  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? 

  Dont forget to click "Mark as Answer" on the post that helped you. Don't "Mark as Answer" if it is not your question.
  Can someone please post an answer without posting a link to a link to a link?
  
• • Reply
  mgebhard

  All-Star

  40811 Points

  17082 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jun 20, 2019 11:30 AM|mgebhard|LINK

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

• • Reply
  RioDD

  Member

  207 Points

  400 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jun 20, 2019 12:22 PM|RioDD|LINK

  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

  Dont forget to click "Mark as Answer" on the post that helped you. Don't "Mark as Answer" if it is not your question.
  Can someone please post an answer without posting a link to a link to a link?
  
• • Reply
  mgebhard

  All-Star

  40811 Points

  17082 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jun 20, 2019 01:16 PM|mgebhard|LINK

  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.

• • Reply
  RioDD

  Member

  207 Points

  400 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jun 21, 2019 05:46 AM|RioDD|LINK

  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

  Dont forget to click "Mark as Answer" on the post that helped you. Don't "Mark as Answer" if it is not your question.
  Can someone please post an answer without posting a link to a link to a link?
  
• • Reply
  mgebhard

  All-Star

  40811 Points

  17082 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jun 21, 2019 11:01 AM|mgebhard|LINK

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

• • Reply
  RioDD

  Member

  207 Points

  400 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jun 21, 2019 12:21 PM|RioDD|LINK

  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>

  Dont forget to click "Mark as Answer" on the post that helped you. Don't "Mark as Answer" if it is not your question.
  Can someone please post an answer without posting a link to a link to a link?
  
• • Reply
  Jenifer Jian...

  Participant

  1990 Points

  697 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jun 25, 2019 08:10 AM|Jenifer Jiang|LINK

  Hi RioDD,

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  RioDD

  Member

  207 Points

  400 Posts

  Re: using MVC and Ajax on checkbox from list Change select other checkboxes

  Jul 09, 2019 10:28 AM|RioDD|LINK

  Thanks Jenifer the problem is solved with adding JsonResult

  Dont forget to click "Mark as Answer" on the post that helped you. Don't "Mark as Answer" if it is not your question.
  Can someone please post an answer without posting a link to a link to a link?