Passing variable Data to controller OnClick of button ? Any best way?

Question

i am facing a wierd issue . I gone through every possible way in google but no luck. Now possible help me if i am missing something ?

I done some comment stuff in my code below what i am looking excatly . To be short i just need a way to pass my prompt text which is stored in a Variable 'delreason' to CONTROLLER DELETE METHOD on my button click which is surely go to controller Delete method ?

My Code :-

 delreason = '';
    $(document).ready(function () {
        var reason = $("#DropDown_Select").val()
        var oTable;


        $('#btnDeleteRow').click(function () {
            delreason = prompt("r u serious");   
//When delete button is clicked i need to first gather the reason and pass to controller delete method i.e I ADOPTED QUERY STRING WAY as BELOW YOU CAN FIND sDeleteURL used like  query string so i can pass my Row-id asusual and additinally i can pass my prompt text entered .


            $(this).prop('disabled', true);

        });

            $('#myDataTable').dataTable().fnDestroy();

            oTable = $('#myDataTable').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": true,
                "bDestroy": true,
                "sAjaxSource": "AjaxHandler",
                "fnServerData": function (sSource, aoData, fnCallback) {

                    $('#DropDown_Select').change(function () {
                        alert($(this).val());
                        reason = $(this).val()
                        debugger;
                        //oTable.fnFilter($(this).val());
                        $.ajax({
                            "type": "GET",
                            "dataType": 'json',
                            "contentType": "application/json; charset=utf-8",
                            "url": sSource + "/" + reason,
                            "data": aoData,
                            "success": function (data) {

                                fnCallback(data);
                            }
                        });


                    });
                    $.ajax({
                        "type": "GET",
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "url": sSource + "/" + reason,
                        "data": aoData,
                        "success": function (data) {

                            fnCallback(data);
                        }
                    });
                },
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "aoColumns": [
                          {
                              "sName": "Lead_Id"
                                            ,
                              "bVisible": false,
                              "bSearchable": false,
                              "bSortable": false

                          },
                          {
                              "sName": "LeadName"
                              ,
                              "fnRender": function (oObj) {
                                  return '<a href=\"LeadIndividualDetail/' + oObj.aData[0] + '\">' + oObj.aData[1] + '</a>';
                              }
                          },
                           { "sName": "ContactName", "sClass": "hidden-xs" },
                           { "sName": "CompanyName" },
                           { "sName": "Product" }

                ]

            });


                oTable.makeEditable({

                    "sDeleteURL": "/Lead/DeleteData/?start=" + delreason, // query string way via URL . 
                    sDeleteHttpMethod: "GET",
                    "event": "click",
                    "style": "inherit",
                    "width": ($('myDataTable').width() - 40) + "px",
                    "height": ($('myDataTable').height() + 20) + "px",
                    "aoColumns":
                    [
                        null,
                        null,
                        null,
                        null
                    ]
                });

      $("#myDataTable tbody tr").on('click', function (event) {
          debugger;
          alert("now");
          $("#myDataTable tbody tr").removeClass('row_selected');
          $(this).addClass('row_selected');
      });

    });

//i am getting row id at controller delete method but i am unable to get the prompt text in my controller where i tried to access like

 var ReasonForDeletion = Request.QueryString["start"];

Am i missing something ? any better alternative is appreciated ?

I found some workaround but sadly its redirectinh to other issue : If i want to get the PROMPT text at my controller i want to RELOAD MY oTable.makeEditable({ CONTENT .. well but trying this simply i can't further move to select and delete any row after deleting firstRow ..

Any killer way to pass my prompt text using query string or watever is appreciated to my controller Deletemethod on my click .

EDIT 1 : My controller code for delete method :

 public string DeleteData(int id )
        {
            var value = Request.QueryString["start"];

Regards

Answer 1

I think it will work "as is" if you change your controller method to look like this:

[HttpPost]
public string DeleteData(int id)

and change your javascript code to look like this:

...
    oTable.makeEditable({
         "sDeleteURL": "/Lead/DeleteData/?" + $.param([{name:'start', value:delreason}]),
    sDeleteHttpMethod: "POST",
              "event": "click",
...

The reason you want to use $.param() is because just adding to the sDeleteURL will not create a valid request every time and you will lose data or have other problems for instance if the user entered "Client called & said go away".

Another way to do it, the grid should allow you to inject the reason into the ajax operation by setting up the ajax call ahead of time using beforeSend. See https://api.jquery.com/Ajax_Events/ and https://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

EDIT:

After looking at the current version of your code, the only real problem I saw was that you had the click event in the wrong place. Every time you page through data, it would add another click event listener causing the DeleteData ajax call to be executed multiple times. The simplest way to fix this was to detach the existing listener first like so:

if (delete_bound) { $('#btnDeleteRow').die('click'); }
delete_bound = true;
$('#btnDeleteRow').live('click', function (){ 

But you should really structure the javascript so that it doesn't have the events in the construction of the table. You're also running an older version of jQuery and if possible, you should update it so you have more tools at your disposal like the on() and off() methods.