Update data when user clicks a link, but without the page getting refreshed/posted back

Introduction

This article would demonstrate how to perform database update in the background without disturbing the viewstate of the user. The event would be triggered by user click on a link.

Here are the steps that are required to achieve it:

1. Create an ASP/ASPX page that accepts the querystring containing the reference to the data that needs to be updated, along with the required action.. This would accept a querystring parameter specifying the ID of the database item that needs to be updated and also mode (Delete/UnDelete). This page might look like ...

   Private Sub Page_Load(ByVal sender As System.Object, _
            ByVal e As System.EventArgs) Handles MyBase.Load
   
       Select Case Request.QueryString("mode")
           Case "UPDATE_MARK_FOR_DELETION"
               If Len(Request.QueryString("ID")) > 0 Then
                   'Do something
               End If
           Case "UPDATE_MARK_FOR_UNDELETION"
               If Len(Request.QueryString("ID")) > 0 Then
                   'Do something
               End If
       End Select
   End Sub

2. Create an IFrame with "0" width somewhere on the page.

   <iframe name="UpdateClosed" width=0 src="UpdateClosed.aspx"></iframe>

3. Link the IFrame with the page that would carry out the updation.
4. Create a onclick event script that does the following things:
   1. Updates the link/image/text so that link shows an updated status (may not be required).
   2. Opens a new window with target being the IFrame. Required querystring is passed.

   <script>
    function SetClosed(ProjectID)
     {
     var task,obj,objLabel;
     obj=MM_findObj("Close_"+ProjectID);
     if (obj.Text== "Closed") 
      {  
       obj.Text= "Open";
       task="undelete";
      }
     else if (obj.Text== "Open")
      {    
       obj.Text= "Closed";
       task="delete";
      } 
     window.open("UpdateClosed.aspx?mode='+mode+'&id="+
                 ProjectID+"&task="+task,"UpdateClosed");
     }
   </script>

5. Database updation takes place in the page created in Step 1.

ASP/ASPX tag part

<asp:Literal ID="Close_<%=id%>" 
  Text="<%# iif(put you logic here for updated/unupdated/locked situations) %>" >
 <img id="Label_<%=id%>" onclick="SetClosed('<%=id%>')" 
  src="./images/<%=if(put logic here for updated/unupdated/locked situations)%>"/>
</asp:Literal>

That would be all that is required :)

Enjoy!!

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here