Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a case where I'm building a sign up application, there are model items that are in checkbox form. Each checkbox has a co-responding child collection/list.

If a user checks a box, a jquery call runs to a controller action to query the list to get the child items and return the matching list via JSON to the co-responding listbox.

That all works fine! The issue is only the binding.

Here's the JSON action that returns the child objects:

[HttpGet]
       public ActionResult PickupKids(int id)
       {
           AccountFormEntities db = new AccountFormEntities();
           var childItems = (from c in db.account_type_children
                             where c.groupID.Equals(id)
                             select c
                             ).OrderBy(c => c.title)
                             .ToList();

           List<SelectListItem> SelectedAccountChildren = new List<SelectListItem>();

           foreach (var item in childItems)
           {
               SelectListItem selectListItem = new SelectListItem();
               selectListItem.Text = item.title;
               selectListItem.Value = item.id.ToString();
               selectListItem.Selected = item.selected;
               SelectedAccountChildren.Add(selectListItem);


           }
           return Json(SelectedAccountChildren, JsonRequestBehavior.AllowGet);

       }


which returns to this Jquery event to populate the listbox:

//ValidateChecks();
          if ($(this).prop('checked'))//---------------------magic show goes here

          {
              $('.' + checkId).css("color", "black");
              $('.' + checkId).css("font-weight", "Bold");

              $('.' + checkId).css("font-size", "large");
              //$(divId).toggle("bounce", { times: 3 }, "slow");
              $(divId).show(1000);//show the box
           //---AJAX/JSON

              var url = '@Url.Action("PickupKids")';

              $.ajax({
                  url: url,
                  type: 'GET',
                  cache: false,
                  data: { id: checkId },
                  dataType: "json",
                  contentType: 'application/json; charset=utf-8',
                  success: function (json) {

                      $('.' + ListID).empty();
                     // $('.' + checkId).css("color", "gray");


                      $.each(json, function (index, optiondata) {
                          $('.' + ListID).append("<option value='" + optiondata.Value + "'>" + optiondata.Text + "</option>");
                      });

                  }
              });




Then, the listbox (which does fill correctly with the proper children:


@if (Model.AccountTypes[i].Account_type_options == "BDMS")
             {

              @Html.ListBoxFor(x => x.AccountTypeChildren, Model.SelectedAccountChildren, new { @class = SelectGroupId, @style = "height:150px; width:500px" })
             }



here are the ViewModel definitions of the two model objects in the listbox:

public List<SelectListItem> AccountTypeChildren //list of all children objects
     {
         get;
         set;
     }


public List<SelectListItem> SelectedAccountTypeChildren //list of all children objects
     {
         get;
         set;
     }


and what is returned is the ids that are selected, but it returns them each as an instance of the 'selectedAccountTypeChildren' (example: selectedAccountTypeChildren = 10, selectedAccountTypeChildren=13) where it should read 'selectedAccountTypeChldren[110] value=true' etc.

Does anyone know how to get the list to bind properly? Thank You for any information

What I have tried:

I've tried modifying the list types, and tring to iterate the lists but the list comes up null in the action, but in fiddler it does show:

Body                                    value
AccountTypes[4].Account_type_options	INB
SelectedAccountTypeChildren	        111
SelectedAccountTypeChildren	        112
Posted
Updated 17-Nov-17 11:23am
Comments
Laxmidhar tatwa technologies 17-Nov-17 7:29am    
this is your code when fill from ajax do not use Model.SelectedAccountChildren
@Html.ListBoxFor(x => x.AccountTypeChildren, Model.SelectedAccountChildren, new { @class = SelectGroupId, @style = "height:150px; width:500px" })


insed of Model.SelectedAccountChildren use the bellow


@Html.ListBoxFor("child", new SelectList(string.Empty, "Value", "Text"), "--Select child--", new { @class = "form-control", @id = "ddlcity",@tabindex="13" })
fshirt09 17-Nov-17 10:41am    
Interesting - I'll try that now, thanks for the reply, input.
fshirt09 17-Nov-17 10:48am    
I think this looks to be a good direction, It makes sense to empty first on the object. I'm getting 'no overload for listbox takes 4 arguments' error, working to bring the provided answer into the correct arguments matching now. I know this sounds noob, but, I am kinda noob at MVC. I appreciate your time, input and patience.

1 solution

I went with formcollection, and just ran thru the collection to get my id's then run a Entity F query to get the co-responding information from the DB based on the returned keys for the item. Hope this helps someone out down the road.


If anyone has a better idea, I'd love to hear it. But, formcollection does work, however it's a little clunky:

foreach (string key in formStuff.AllKeys)
                      {
                          if (key.Contains("SelectedAccountTypeChildren"))
                          {
                              var kids = formStuff.GetValues(key);
                              foreach (var item in kids)
                              {//for all the selected child items, query the data and pair to the 'groupId' from parent (accountType)
                               //select all the child items where groupid from the id = = the childgroup var

                                  var childName = from k in AFEntities.account_type_children where k.groupID.Equals(childGroup) select k.title;


                              }
                          }
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900