Visual Studio .NET 2002.NET 1.0Visual Studio .NET 2003.NET 1.1HTMLIntermediateDevVisual StudioJavascriptWindows.NETVisual BasicASP.NET
Update data when user clicks a link, but without the page getting refreshed/posted back






2.75/5 (4 votes)
Aug 17, 2004

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:
- 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
- Create an
IFrame
with "0" width somewhere on the page.<iframe name="UpdateClosed" width=0 src="UpdateClosed.aspx"></iframe>
- Link the
IFrame
with the page that would carry out the updation. - Create a
onclick
event script that does the following things:- Updates the link/image/text so that link shows an updated status (may not be required).
- 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>
- 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!!