locked
Posting back lists of checkboxes RRS feed

  • Question

  • User2114644362 posted

    Hey everyone,

    I have this view, with my postbutton i postback a list of checkbox items:

    Now I want to change this that everytime a user checks or unchecks a checkbox all the lists of checkboxes are posted back to the controller. (like standard webshop filtering)

    Does anyone know how I can do this? I need to postback these lists:  x[i].PostedTerms.TermIds

    This is my view:

     @using (Html.BeginFormAntiForgeryPost(Url.Action("Index", "Assortiment", FormMethod.Post)))
                {
                    @Html.ValidationSummary(true)
            
            
                    for (var i = 0; i < Model.Count; i++) 
            {
    
                           
                        @Html.HiddenFor(x => x[i].PostedTerms.TermIds);
                        @Html.CheckBoxListFor(
                           
                                                      x => x[i].PostedTerms.TermIds,
                                                      x => x[i].AvailableTerms,
                                                      term => term.Id,
                                                      term => term.Name,
                                                      x => x[i].SelectedTerms,
                                            Position.Vertical);
    
            }
                <input class="green" type="submit" 
                          value="POST to Controller" />
            }

    Monday, March 24, 2014 9:20 AM

Answers

  • User-417640953 posted

    Hi BorrieRulez,

    Thank you post the issue to asp.net forum.

    Based on your description and code provided, I see you are using the HtmlHelper extension CheckBoxListFor.

    And you want to submit (do postback) when the checkboxes clicked. For this issue, I think you can do that using javascript like below.

     <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#myCheckBoxListDiv").find("input:checkbox").change(function () {
                    //do your postback.........
                    $("#yourForm").submit();
                }); 
            })
    </script>
     @*wrap the checkboxes by the div tag*@
     <div id="myCheckBoxListDiv">
                @Html.CheckBoxListFor(model => model.PostedCities.CityIDs,
                          model => model.AvailableCities,
                          entity => entity.Id,
                          entity => entity.Name,
                          entity => entity.IsSelected)
    
    </div>

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 25, 2014 6:51 AM

All replies

  • User-417640953 posted

    Hi BorrieRulez,

    Thank you post the issue to asp.net forum.

    Based on your description and code provided, I see you are using the HtmlHelper extension CheckBoxListFor.

    And you want to submit (do postback) when the checkboxes clicked. For this issue, I think you can do that using javascript like below.

     <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#myCheckBoxListDiv").find("input:checkbox").change(function () {
                    //do your postback.........
                    $("#yourForm").submit();
                }); 
            })
    </script>
     @*wrap the checkboxes by the div tag*@
     <div id="myCheckBoxListDiv">
                @Html.CheckBoxListFor(model => model.PostedCities.CityIDs,
                          model => model.AvailableCities,
                          entity => entity.Id,
                          entity => entity.Name,
                          entity => entity.IsSelected)
    
    </div>

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 25, 2014 6:51 AM
  • User2114644362 posted

    Hey,

    Thank you for the answer, the problem is that it's a list of lists :) So there are a few list of checkboxes.

    I think i forgot to mention this clearly sorry: @model List<taxTermViewModel>

    So it only works for the first myCheckBoxListDiv ID, because these are generated a few times and or not unique...

    Also what should i put in: //do your postback......... ? My controller is called "Assortiment" and the action is: [HttpPost]
            public ActionResult Index(List<taxTermViewModel> postedTerms)

    Kind regards,

    Borrie

    Monday, March 31, 2014 5:51 AM
  • User2114644362 posted

    Fuxiang,

    Thanks so much for your answer, it works, i changed the myCheckBoxListDiv ID into a class and with this code it works:

    <script>
            $(function () {
                $(".checkboxList").find("input:checkbox").change(function () {
                    alert($("form").serialize())
                    $.post("Assortiment", $("form").serialize(), function (data) {
                        
                    });
                    $("form").submit();
                });
               
            })
    </script>

    So that's great, now I want to take it a step further, if you look at this site: http://www.laptopshop.be/category/56498/laptops.html?723=8216&821=4314

    When you click on a filter not only is the view updated (like what already works now for my code) but also the urlstring in the addressbar is changed so that you can copy paste the url and send your filters to someone but also when you do a back in the browser you don't loose the filters.

    The postback for me is this: (for example when i check 2 checkboxes in the first List of checkboxes)

    [0].PostedTerms.TermIds	
    [0].PostedTerms.TermIds	17
    [0].PostedTerms.TermIds	16
    [1].PostedTerms.TermIds	
    [2].PostedTerms.TermIds	
    __RequestVerificationToke...	UHU085eep0HERsYWtQvatrh3cBie-Bvp3UqXUmpJ6My4WlQLjK-N-5I9rTp69rAwHbtPfVSVV1eNtSDs4RNqLgukzvdgzR3-Yk4jyiV841U3_w1iuAzN7z0rUIb457fTaqw62ABgZf0rXBGrVwPmhPDhTTJTax_RlZU2NJ0qhqs1

    When I check the serialization it generates this:

    %5B0%5D.PostedTerms.TermIds=&%5B0%5D.PostedTerms.TermIds=17&%5B0%5D.PostedTerms.TermIds=16&%5B1%5D.PostedTerms.TermIds=&%5B2%5D.PostedTerms.TermIds=&__RequestVerificationToken=90_56MR3i8V4Phr0Us9YGyFcvfBXDDsspwA5ISZfDAed4U3ZgwD35yt61xlPjWdL6VW10xKNGTDwcDLQNlx7fkn61Vlftu0xto9ME0B-BWMnPnksxpsh-JioZiRG5TLlZGYCay1bvn-uNXaCNWiJclQqtkoynhuNrSGaUfWD8gg1

    My controller handles the array like this:

      [HttpPost]
            public ActionResult Index(List<taxTermViewModel> postedTerms)
            {

    So now I want to use the url to accept the filtering + update it, do you now how I can achieve this? I guess I'll also have to change my routing...

    Tuesday, April 1, 2014 10:49 AM