How to pass values to controller from Javascript code in MVC

Question

Actually I have a scenario like :

I am getting the values of checked records in GridView through Javascript. Now i need to send those values to controller for deleting those records.

<script type="text/javascript">
    $(function OnDelete() {
        $('#btn_Delete').click(function ()
        {
            gvPaging.PerformCallback();
        });
    });

    function OnBeginCallback(s, e) {
        var selectedValues = s.GetSelectedKeysOnPage();
        e.customArgs["ID"] = "";
        for (var i = 0; i < selectedValues.length; i++) {
            e.customArgs["ID"] += selectedValues[i] + ',';
        }
    }
</script>

and my GridView is like this :

<% 
Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "gvPaging";
        settings.CallbackRouteValues = new { Controller = "GridView", Action = "PagingPartial" };
        settings.Width = Unit.Percentage(100);
        settings.KeyFieldName = "ID";

        settings.CommandColumn.ShowSelectCheckbox = true;
        settings.CommandColumn.SetHeaderTemplateContent(c =>
        {
            Html.DevExpress().CheckBox(settingsCheckBox =>
            {
                settingsCheckBox.Name = "cbSelectAll";
                settingsCheckBox.Name = "Select All";
                settingsCheckBox.Properties.ValueType = typeof(bool);

                settingsCheckBox.Properties.ClientSideEvents.CheckedChanged = string.Format("function(s, e) {{ if(s.GetChecked()) {0}.SelectRows(); else {0}.UnselectRows(); }}", settings.Name);
                settingsCheckBox.Checked = c.Grid.VisibleRowCount == c.Grid.Selection.Count;
            }).Render();
        });
        settings.SettingsBehavior.AllowSelectByRowClick = true;
        //settings.Columns.Add("ID");
        settings.Columns.Add("Name");
        settings.Columns.Add("EmailID");
        settings.Columns.Add("MobileNumber");
        settings.Columns.Add("Address");
        settings.SettingsPager.Position = PagerPosition.Bottom;
        settings.SettingsPager.FirstPageButton.Visible = true;
        settings.SettingsPager.LastPageButton.Visible = true;
        settings.SettingsPager.PageSizeItemSettings.Visible = true;
        settings.SettingsPager.PageSizeItemSettings.Items = new string[] { "10", "20", "50" };


        settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "GridView", Action = "InlineEditingAddNewPartial" };
        settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "GridView", Action = "InlineEditingUpdatePartial" };
        //settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "GridView", Action = "InlineEditingDeletePartial" };
        settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
        //settings.SettingsBehavior.ConfirmDelete = true;

        settings.Settings.ShowFilterRow = true;
        settings.Settings.ShowFilterRowMenu = true;
        settings.CommandColumn.Visible = true;
        settings.CommandColumn.ClearFilterButton.Visible = true;
        settings.CommandColumn.NewButton.Visible = true;
        //settings.CommandColumn.DeleteButton.Visible = true;
        settings.CommandColumn.EditButton.Visible = true;
        settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
        //settings.ClientSideEvents.SelectionChanged = "SelectionChanged";
        settings.ClientSideEvents.BeginCallback = "OnBeginCallback";

    })
    .Bind(Model)
    .Render();

%>

Answer 1

You can use AJAX inside your script.

Something like this

$.ajax({
         url: 'Your method in controller which will delete the records',
         type: 'POST',
         data: ' data which you want to send to controler ',
});

Answer 2

In your controller use this statement for retrieving the value: Request.Params["ID"]

Answer 3

Consider the following example i am firing the script with a list value using for loop table data.

<a href='#' class="gridEdit"  onclick="javascript:return DeleteServiceOut('@Model.EmployeeInformationList[i].GEmployeeGenInfoID.ToString()');"></a>  

the function to pass values to controller from Javascript code in MVC

<script>
 function DeleteServiceOut(GEmployeeId) {

        window.location = "/PMS/Payroll/ServiceOutAdd/ServiceOutDelete/" + GEmployeeId;
        return false;
    }

</script>

in to the controller

 public ActionResult ServiceOutDelete(string id, ServiceOutModels model)
        {
           // id will contailn the value of parameter
           // AS you want
            return View("ServiceOutViewDetails", model);
        }