The whole page gets refresh while using Captcha refresh - html

Question

I have used the captcha refresh button to refresh the captcha code, but the scenario is that when I click on the refresh image, the whole form gets refreshed. Please help. Also see the code below:-
<table style="width: 583px;">
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" class="txtfld-popup"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter your Full Name" ControlToValidate="Fullname" Display="Dynamic" Style="font-size: 13px;"></asp:RequiredFieldValidator>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender4" runat="server" TargetControlID="FullName" WatermarkText="Enter Your Full Name"></cc1:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td>Contact No.</td>
<td>
<asp:TextBox ID="TextBox2" class="txtfld-popup" runat="server" MaxLength="10" onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please enter Contact No." Display="Dynamic" ControlToValidate="ContactNo" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" Style="font-size: 13px;"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please enter valid Contact No." Display="Dynamic" ControlToValidate="ContactNo" ValidationExpression="^\d{10}$" Style="font-size: 13px;"></asp:RegularExpressionValidator>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender5" runat="server" TargetControlID="ContactNo" WatermarkText="Enter Your Contact No."></cc1:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td>Purpose </td>
<td>
<asp:TextBox ID="TextBox3" runat="server" class="txtfld-popup" ValidationGroup="VG"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender6" runat="server" TargetControlID="Purpose" WatermarkText="Enter Your Purpose"></cc1:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td> </td>
<td>
<div>
<cc1:CaptchaControl ID="CaptchaControl1" runat="server" CaptchaBackgroundNoise="Low" CaptchaLength="5"
CaptchaHeight="60" CaptchaWidth="200" CaptchaMinTimeout="5" CaptchaMaxTimeout="240"
FontColor="#D20B0C" NoiseColor="#B1B1B1" Width="150" />
</div>
<asp:ImageButton ID="ImageButton2" ImageUrl="~/images/refresh.png" runat="server" CausesValidation="false" />
<br />
<asp:TextBox ID="TextBox4" runat="server" MaxLength="5"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator2" ErrorMessage="Invalid. Please try again." OnServerValidate="ValidateCaptcha"
runat="server" />
<p style="margin-top: 3px; margin-bottom: 3px;">
<asp:Label ID="Label1" runat="server"></asp:Label>
</p>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="btnSend_Click" class="button-form" Width="100" />
<asp:Button ID="Button2" runat="server" Text="Reset" OnClick="btnReset_Click" class="button-form" Width="100" CausesValidation="false" /></td>
</tr>
Also see the code behind for your reference:-
protected void ValidateCaptcha(object sender, ServerValidateEventArgs e)
{
Captcha1.ValidateCaptcha(txtCaptcha.Text.Trim());
e.IsValid = Captcha1.UserValidated;
if (e.IsValid)
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "ResponseDialog", "$(document).ready(function(){ResponseDialog();});", true);
SendMail();
}
}
Please help

Answer 1

Finally added a update panel for the solution:-
<tr>
<td> </td>
<td>
<div>
<asp:UpdatePanel ID="updatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<cc1:CaptchaControl ID="Captcha1" runat="server" CaptchaBackgroundNoise="Low" CaptchaLength="5"
CaptchaHeight="60" CaptchaWidth="200" CaptchaMinTimeout="5" CaptchaMaxTimeout="240"
FontColor="#D20B0C" NoiseColor="#B1B1B1" />
</td>
<td>
<asp:ImageButton ID="ImgRefreshButton" ImageUrl="~/images/refresh.png" runat="server" CausesValidation="false" />
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImgRefreshButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:TextBox ID="txtCaptcha" runat="server" MaxLength="5"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" ErrorMessage="Invalid. Please try again." OnServerValidate="ValidateCaptcha"
runat="server" />
<p style="margin-top: 3px; margin-bottom: 3px;">
<asp:Label ID="lblLeaveNo2" runat="server"></asp:Label>
</p>
</td>
</tr>
And it is working for me. :)