MVC "Get" Multiple Checkboxlist Values with same name from querystring, retrieve via javascript

Question

Generated URL after the form has been submitted:

http://localhost/Search/Index?selectedOrganisationId=26195&selectedOrganisationId=26244

I have a form that is doing a Get Request. I have several hidden fields that are storing id's for a selected organisation ids. The parameter name in the querystring (selectedOrganisationId) is using the same name.

I've checked through StackOverflow and all the solutions seem to only bring back the last value in the querystring (26244) for that given name.

How can I get them all into an array? Is this possible?

MVC handles it and picks up on it perfectly through the Controller -> Action.

you cannot send query parameter with same name multiple times. You have to send them with some delimitor like '-' and then split it in your code. — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jun 18, 2014 at 12:45
Well, you should do something like selectedOrgainsationId[]=26195&selectedOrganisationId[]=26244, and then you'll have an array of values when you GET that parameter. — Eternal1
– Eternal1, Commented Jun 18, 2014 at 12:46
@TwiStar - can you give an example in javascript on how I would get those values from the querystring as an array? — dotnethaggis
– dotnethaggis, Commented Jun 18, 2014 at 12:55
@pinoniq it's for a search - Get is much better than using a post. I need to be able to persist the search parameters for paging etc if the user clicks the back button to get to a previous page. — dotnethaggis
– dotnethaggis, Commented Jun 18, 2014 at 13:06

Duncan Smart · Accepted Answer · 2014-06-20 16:57:59Z

2

First thing that springs to mind is to parse the query string from window.location.search - something like:

// a plain old javascript object (dictionary) to store the query string
var querystring = {};

// * 'window.location.search' is the query string of the current browser page
// * replace(regex, function) is a method of string that takes 
//    - a regular expression (between two forward slashes, the 'g' means global,
//      i.e. do more than just one replace) that matches `abc=123`
//    - a function that is called for each pattern match

window.location.search.replace(/([^?=&]+)(=([^&]*))?/g, function($1, $2, $3, $4) {
    // $1 to $4 are arguments that catch the groups in the regex.
    // Only $2 and $4 are of interest.

    // If we already have seen this value append (push) it on to the array
    if ($.isArray(querystring[$2]))
        querystring[$2].push($4);
    else 
        // otherwise create a new array with the found item
        querystring[$2] = [$4];
});

console.log(querystring);
console.log(querystring.selectedOrganisationId); // an array

The regular expression was borrowed from this article, but the code extended to take into account multiple query string items with the same name.

edited Jun 20, 2014 at 16:57

answered Jun 18, 2014 at 13:32

Duncan Smart

32.3k11 gold badges71 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dotnethaggis Over a year ago

Can you explain what the above is doing?

dotnethaggis Over a year ago

Thanks Duncan, much appreciated. Makes more sense now. Will look at the article too.

Eternal1 · Accepted Answer · 2014-06-18 13:06:16Z

0

HTML:

<form id="organizations" method="GET" action="/Search/Index">
    <input type="checkbox" name="selectedOrganisationId[]" value="1">
    <input type="checkbox" name="selectedOrganisationId[]" value="2">
    <input type="submit" value="submit" />
</form>

You'll get your desired result if you simply submit the form. If you want to get the response through an Ajax call, do this (using JQuery library):

<script>
    jQuery(function($){
        $("#organizations").submit(function(e){
            e.preventDefault();
            var form = $(this);
            $.ajax({
                url: form.attr("action"),
                data: form.serialize(),
                type: form.attr("method")   
            }).done(function(data){
                 //if success
                 console.log (data); 
            }).fail(function(){
                 console.log ("something is wrong!");
            })
        }); 
    });
</script>

answered Jun 18, 2014 at 13:06

Eternal1

5,6253 gold badges34 silver badges48 bronze badges

3 Comments

dotnethaggis Over a year ago

The problem is after I have submitted the form the selectedOrganisationId values are appended to the querystring. It's after the form has submitted that I need to get the values from the QueryString to populate a knockout observable array.

Eternal1 Over a year ago

You can populate observable array inside a done method call, without reloading the page. Otherwise, you can generate knockout.js server-side using response from your controller.

dotnethaggis Over a year ago

I don't want to submit the search using ajax. Therefore the done method call won't work. The latter suggestion may be work.

Collectives™ on Stack Overflow

MVC "Get" Multiple Checkboxlist Values with same name from querystring, retrieve via javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related