AJAX in ASP.NET - How do I check a checkbox and have the action reflected in the database?

Question

This is about as beginner as it gets regarding AJAX, but here it goes.

1. I want to have one checkbox somewhere on an ASP.NET web form (ASPX).

2. When the user clicks the checkbox, I want one of those spinning indicators to show.

3. While that spinning indicator is showing, I want an update operation to occur in the database to reflect that the user has intended for that checkbox to be checked.

   update MyTable set CheckboxChecked = 1

4. Then, as soon as the update operation has completed (must be verified to actually have been written), I want that to be reflected in the checkbox by removing the spinning indicator and replacing it with the standard checked checkbox.

I'm guessing this is done with an UpdatePanel and possibly an update statement followed by a looped call to a select statement... but I have never used AJAX before and have no idea how to go about it.

Thanks!

Answer 1

UpdatePanel and UpdateProgress

And a look at the Wicked Code doesn't hurt either.

Answer 2

you can use trigger tag in update panel in order to do this . i.e

1. add trigger on click event of checkbox
2. once it is checked then it will call xyz() method to update database value

Answer 3

Add an update progess like this:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
<ProgressTemplate>
  <div style="position: absolute; width: 100%; height: 100%; z-index: 100; background-color: Gray;
    filter: alpha(opacity=70); opacity: 0.7;">
    &nbsp;
  </div>
  <table style="position: absolute; width: 100%; height: 100%; z-index: 101;">
    <tr>
      <td align="center" valign="middle">
        <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
          width: 200px;">
          <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
          Please wait....
        </div>
      </td>
    </tr>
  </table>
</ProgressTemplate>

Wrap your grid with an update panel

Subscibe to your Checkbox OnCheckedChanged and call Update