Passing data from Javascript MVC controller

Question

I'm really new to jQuery and Charts. This is my script, it works fine. It gives me the id of the checkboxes selected by the user. I have a Chart action in my controller which also works fine, but it creates a chart using all my values. I want it to create a chart based on the selected values that are in my script. I don't know how to pass the selected values to my controller.

var checkboxes = $("input[type='checkbox']");
$(function ()
{
    function getValueUsingClass() {
        /* declare an checkbox array */
        var chkArray = [];

        /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
        $(".chk:checked").each(function () {
            chkArray.push($(this).val());
        });

        /* we join the array separated by the comma */
        var selected = chkArray.join(",") + ",";

        /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
        if (selected.length > 1)
        {
            alert("You have selected " + selected);
        }
         else
         {
            alert("Please check at least one of the checkbox");
         }        
    }

    $("#Charter").click(function () {
        getValueUsingClass();
    });
});

Answer 1

Return the data you want in your js function after populating the variable using return selected; then send it back by posting a form or using ajax.

Bind your data to an element on your View page, for example:

<input name="foo" id="yourId" value="bar" />

then modify it's value:

$('#foo').val(getValueUsingClass());

and pass the model back by posting your form to your controller.

If you wish to send data to your controller async then you can look into Ajax.

Answer 2

You can use ajax to call your controller method within getValueUsingClass().

It would probably look something like this:

$.ajax({
    url: "/YourControllerName/Chart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: { arr: chkArray }, 
    success: function () {
        // do things upon success
    },
    error: function () {
        alert("Error!");
    }
});

That is, providing your Controller action has a parameter named arr, because json maps chkArray to it once it is passed to the Controller.