I have the following code for a Form in ASP.NET. I want to apply AJAX on it. How would I do this?
In this form, I also have a gridview on the same page showing the entries which I make using form. I don't want the page to reload when I press save button.
<form id="form1" action="~/studentForm.aspx" runat="server">
<div class="table-responsive form-group">
<table class="table table-hover" style="width: 100%;" spellcheck="False">
<tr>
<td class="auto-style12"><b>Name</b></td>
<td class="auto-style13">
<asp:TextBox ID="txtName" runat="server" class="form-control" Width="202px"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="Enter Your Name " ForeColor="#CC0000" SetFocusOnError="True" Style="text-align: right; font-weight: 700; color: #FF0000" ToolTip="Enter Name" ValidationGroup="saveUser">Required</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style12"><b>AGE</b></td>
<td class="auto-style13">
<asp:TextBox ID="txtAge" runat="server" class="auto-style14" Width="202"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtAge" ErrorMessage="Enter Your Age" ForeColor="#CC0000" CssClass="auto-style2" SetFocusOnError="True" ToolTip="Enter Age" ValidationGroup="saveUser">Required</asp:RequiredFieldValidator>
<br />
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtAge" ErrorMessage="Age Must Be Between 18 and 60" ForeColor="#CC0000" MaximumValue="60" MinimumValue="18" Style="text-align: right; font-weight: 700; color: #FF0000" ToolTip="Enter Age Between 18 and 60" Type="Integer" ValidationGroup="saveUser">Invalid Age</asp:RangeValidator>
</td>
</tr>
<tr>
<td class="auto-style12"><b>Department</b></td>
<td class="auto-style13">
<asp:DropDownList ID="ddlDepartment" runat="server" class="form-control btn btn-primary dropdown-toggle" Width="202px">
<asp:ListItem Value="-1">Select Departement</asp:ListItem>
<asp:ListItem>COMMERCE</asp:ListItem>
<asp:ListItem>LAW</asp:ListItem>
<asp:ListItem>IT</asp:ListItem>
<asp:ListItem>BBA</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ddlDepartment" ErrorMessage="Enter Your Departement" ForeColor="#CC0000" InitialValue="-1" CssClass="auto-style2" SetFocusOnError="True" ToolTip="Select Drpartement" ValidationGroup="saveUser">Required</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style12"><b>Gender</b></td>
<td class="auto-style13">
<asp:RadioButton ID="rdBtnMale" runat="server" class="radio-inline" Checked="True" GroupName="gender" Text="Male" />
<asp:RadioButton ID="rdBtnFemale" runat="server" class="radio-inline" GroupName="gender" Text="Female" />
</td>
<td class="auto-style6"></td>
</tr>
<tr>
<td><b>Subjects</b></td>
<td>
<asp:CheckBoxList ID="CheckBoxList2" runat="server" RepeatDirection="Horizontal" Width="298px">
<asp:ListItem>Physics</asp:ListItem>
<asp:ListItem>Chemistry</asp:ListItem>
<asp:ListItem>Biology</asp:ListItem>
</asp:CheckBoxList>
</td>
<td></td>
</tr>
<tr>
<td class="auto-style12">
<asp:Button ID="btnSave" runat="server" class=" btn btn-success" OnClick="btnSave_Click" Text="Save" Width="105px" ValidationGroup="saveUser" />
<input id="btnReset" class="btn btn-warning" type="reset" value="Cancel" style="width: 105px" />
</td>
<td class="auto-style13"> </td>
<td> </td>
</tr>
</table>
</div>
</div>