Capturing Select Button on Gridview using JQuery

Question

I have two GridViews that list out included and exclude data items respectively.

By clicking "Change Status" (a custom button for each row) Users can change the row status from included to excluded or vice versa.

However before changing the status - users would need to specify the reason and enter a date for when they want something included/excluded. So these are additional operations that need to take place after the "Change Status" button is clicked and before an update occurs.

I want to use jQuery to capture the row id being "changed", save this value and pass back the update to the database.

I will use an absolute div for the menu but I'm running into issues as to how to capture row id and how to pass this back to my C# in codebehind.

Answer 1

I would have a modal dialog to capture the reason and date when the user clicks the "Change" button. On each row, next to the button include a hidden field that contains the row ID, or better yet the key for the record in the db. Then when you launch your modal, use jQuery to select the hidden field next to the button to grab the key value, and submit it as part of your modal form.

the jQuery would look something like:

 $(function() {
     $(".changeButton").click(function() {
         var rowId = $(this).siblings(":hidden").val();
         $("#myModal input[name=rowId]").val( rowId );
         // do modal popup
     });
 });