65.9K
CodeProject is changing. Read more.
Home

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

starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.75/5 (4 votes)

Aug 17, 2004

viewsIcon

34320

Need to update some data when user clicks a link, but do not want the page to be refreshed/posted back? Here is a small solution.

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!!

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