在asp.net表单上应用AJAX

Question

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">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>

</div>

Answer 1

In Asp.Net you can use the Update Panel:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
               [your code here]
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>