title: No-postback database update with ASP.Net Gridview and jQuery AJAX
body: <p>I have this page where users need to check things off down a gridview. They don't want to click Edit and Save and all that. So using info from here and elsewhere I came up with the following. In the gridview I have this for the checkbox (where UserID if the DataKeyName for the record and also the row to update in the table):</p>
  
  <pre><code>&lt;ItemTemplate&gt;
  &lt;asp:CheckBox ID="cbIsActive" runat="server" Enabled="true" Checked='&lt;%# Bind("IsActive") %&gt;'  CssClass="cbActive"  data-id='&lt;%# Eval("UserId")%&gt;' /&gt;
  &lt;/ItemTemplate&gt;
  </code></pre>
  
  <p>The jQuery that executes on the checkbox change looks like this:</p>
  
  <pre><code>//Called from gridview checkbox control.
  $(".cbActive").change(function () {
     var userid = $(this).data("id");
     //checkbox is nested in a span, so we have to dig down a litte.
     var ctrl = $(this).children(":first");
     var isChecked = (document.getElementById(ctrl[0].id).checked);
     $.ajax({
       contentType: 'application/json; charset=utf-8',
       url: 'Services/WebService.asmx/UpdateStatus',
       data: JSON.stringify({ strUserID: userid, strStatus: isChecked }),
       dataType: 'json',
       type: 'POST',
       error: function (err) {
         //blah blah
       },
       success: function (data) {
         //blah blah
       }
     });
   });
  </code></pre>
  
  <p>It all works fine. The only thing that bothers me (and yes, I know it's kind of trivial) is that document.getElementById in the middle of the jQuery code. I couldn't seem to find a more jQuery-ish syntax for that. Is there an alternative?</p>