Examining state of multiple checkboxes using jQuery…

When you need to output multiple checkboxes and change certain things based on which ones are checked or unchecked only when the SAVE button is clicked or something then the easiest way to do it is to built Key/Value pairs in jQuery and accessing them in your code as Dictionary values.

checkboxes

html

I have given all of the checkboxes the same class name and assigned their primary key as the id value.

jquery1

Now using jQuery loop through all of the elements for that class and built up a dictionary for their ID and ‘checked’ value. Then in this case I am sending those values in an HTTP POST request to an action method called TestOne:

code

Now in your code simply accept a Dictionary<int, bool> values and now you have access to each checkboxes ‘checked’ property as well as their primary keys:

Ajax enabled drop down list using jQuery…

So I needed to implement a drop down list in my project and dynamically change the values and the action of this drop down asynchronously.  First I used the code based approach to fill the drop down list with default values/actions and then based on certain selectors on the page changed its values/actions using jQuery.

script_Customers

So here I am calling an Action Method that returns a collection of JSON data with ID and Name properties for a Person.    Then I select my drop-down list  and remove all of its previous values, finally loop through ‘each’ returned value and populate new option parameter with it.  The action method for this $getJSON call is as follows:

Customers

One thing to note here is the “JsonRequestBehavior.AllowGet” is necessary and if you don’t put it, your code will still run but won’t send any data.  This is the default behavior for security reasons and thus by explicitly stating “AllowGet” you are taking responsibility and telling the framework that you are aware of it. 

Now to attach the action functionality when they select a value from the drop-down list use the following script:

script_Cars

In this case every time the user selects a new person I am outputting a list of cars they have.  And here is the method that handles this call:

CustomerCars

Just like in the previous method I am allowing this action method to send JSON data for HTTP GET request.  – Don’t forget (JsonRequestBehavior.AllowGet)

And finally I have a working drop-down list that works asynchronously

list