Server Side Pagination/Searching Using jQuery AJAX Web Method

Hrishabh Sharma
3y
17.6k
0
1
25
Blog

aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="REGISTERINFO.aspx.cs" Inherits="REGISTERAPP.REGISTERINFO" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>REGISTER FORM</title>
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
    <link rel="stylesheet" type="text/css"
     href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" />
    <script src="Scripts/DataTables/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //dataTable provide searching, pagination, sorting for user Defined Table
            $.ajax({
                url: 'WebServiceRegister.asmx/Getdata',
                method: 'get',
                dataType: 'json',
                success: function (data) {
                    $('#table1').dataTable({
                        paging: true,
                        sort: true,
                        searching: true,
                        data: data,
                        columns: [
                            { 'data': 'ID' },
                            { 'data': 'StudentName' },
                            { 'data': 'FatherName' },
                            { 'data': 'PhoneNumber' },
                            { 'data': 'City' },
                            { 'data': 'Email' }
                        ],
                        error: function () {
                            alert("Get DataTable Error");
                        },
                    });
                },
            });

            $("#Button1").click(function () {

                var detail = {};

                //check all textbox in empty
                if ($('#TextBox0').val() == '' && $('#TextBox1').val() == '' && $('#TextBox2').val() == '' && $('#TextBox3').val() == '' && $('#TextBox4').val() == '' && $('#TextBox5').val() == '') {
                    alert("Please Fill the Registration Form");
                    return false;
                }
                //if textbox one and more NOT all textbox empty then check 
                detail.ID = $("#TextBox0").val();
                if (detail.ID == '') {
                    alert("Please Enter ID");
                    return false;
                }
                detail.StudentName = $("#TextBox1").val();
                if (detail.StudentName == '') {
                    alert("Please Enter Student Name");
                    return false;
                }
                detail.FatherName = $("#TextBox2").val(); 
                if (detail.FatherName == '') {
                    alert("Please Enter Father Name");
                    return false;
                }
                detail.PhoneNumber = $("#TextBox3").val();
                if (detail.PhoneNumber == '') {
                    alert("Please Enter Phone Number");
                    return false;
                }
                detail.City = $("#TextBox4").val();
                if (detail.City == '') {
                    alert("Please Enter City");
                    return false;
                }
                detail.Email = $("#TextBox5").val();
                if (detail.Email == '') {
                    alert("Please Enter Email");
                    return false;
                }

                //call post method to save the data in DB
                $.ajax({
                    url: 'WebServiceRegister.asmx/Savedata',
                    method: "post",
                    data: '{save: ' + JSON.stringify(detail) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("SAVE DATA IN DATABASE");
                        location.reload();
                        
                    },
                    error: function () {
                        alert("saVE ERROR");
                    },

                });
                //after save the data in DB then textbox is clear;
                $("#TextBox0").val("");
                $("#TextBox1").val("");
                $("#TextBox2").val("");
                $("#TextBox3").val("");
                $("#TextBox4").val("");
                $("#TextBox5").val("");
                return false;

            });


        });

    </script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: aquamarine;
            font-family: sans-serif;
        }

        .formbox {
            width: 500px;
            background-color: white;
            padding: 30px 20px;
            position: center;
            display: block;
            margin: 10px auto;
            box-shadow: 0 0 15px #ff6a00;
        }

        h3 {
            text-align: center;
            margin-top: 10px;
            color: chocolate;
            font-weight: normal;
            font-family: Book Antiqua;
        }

        .textbox {
            width: 100%;
            border-radius: 3px;
            padding: 8px 5px;
            box-sizing: border-box;
            margin-top: 10px;
            font-size: 15px;
            border: 0.5px solid;
        }

        #Button1 {
            border-style: none;
            border-color: inherit;
            border-width: 0;
            background: #00ff21;
            cursor: pointer;
            color: black;
            width: 260px;
            padding: 10px;
            border-radius: 10px;
            margin: 15px auto;
            display: block;
            font-family: sans-serif;
            font-size: medium;
            font-weight: bold;
            box-shadow: 0 0 5px #808080;
        }

            #Button1:hover {
                background-color: aqua;
            }

        #table1 {
            font-family: sans-serif;
            border-collapse: collapse;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

            #table1 td, #table1 th {
                border: 1px solid black;
                padding: 5px;
                width: 20px;
            }

            #table1 tr:hover {
                background-color: chartreuse;
            }

            #table1 th {
                padding-top: 2px;
                padding-bottom: 2px;
                text-align: center;
                background-color: navajowhite;
                color: black;
            }
    </style>
</head>
<body>
    <div class="formbox">
        <form id="form1" runat="server">
            <h3>Registration Form</h3>
            <asp:TextBox ID="TextBox0" runat="server" CssClass="textbox" placeholder="ID"></asp:TextBox><br />
            <asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" placeholder="Student Name"></asp:TextBox><br />
            <asp:TextBox ID="TextBox2" runat="server" CssClass="textbox" placeholder="Father Name"></asp:TextBox><br />
            <asp:TextBox ID="TextBox3" runat="server" CssClass="textbox" TextMode="Phone" placeholder="Phone Number"></asp:TextBox><br />
            <asp:TextBox ID="TextBox4" runat="server" CssClass="textbox" placeholder="City"></asp:TextBox><br />
            <asp:TextBox ID="TextBox5" runat="server" CssClass="textbox" TextMode="Email" placeholder="Email"></asp:TextBox><br />
            <asp:Button ID="Button1" runat="server" Text="Register" BorderColor="Red" BorderStyle="Solid" />
        </form>
    </div>
    <table id="table1">
        <thead>
            <tr>
                <th>ID</th>
                <th>StudentName</th>
                <th>FatherName</th>
                <th>PhoneNumber</th>
                <th>City</th>
                <th>Email</th>
            </tr>
        </thead>
        <tfoot></tfoot>
    </table>
</body>
</html>

asmx page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
namespace REGISTERAPP {
    /// <summary>
    /// Summary description for WebServiceRegister
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class WebServiceRegister: System.Web.Services.WebService {
        public class Savedataclass {
            public int ID {
                get;
                set;
            }
            public string StudentName {
                get;
                set;
            }
            public string FatherName {
                get;
                set;
            }
            public string PhoneNumber {
                get;
                set;
            }
            public string City {
                get;
                set;
            }
            public string Email {
                get;
                set;
            }
        }
        [WebMethod]
        public void Savedata(Savedataclass save) {
                SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Register"].ConnectionString);
                SqlCommand cmd = new SqlCommand("INSERT INTO REGISTERFORMTABLE VALUES(@ID, @StudentName, @FatherName, @PhoneNumber, @City, @Email)", con);
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@ID", save.ID);
                cmd.Parameters.AddWithValue("@StudentName", save.StudentName);
                cmd.Parameters.AddWithValue("@FatherName", save.FatherName);
                cmd.Parameters.AddWithValue("@PhoneNumber", save.PhoneNumber);
                cmd.Parameters.AddWithValue("@City", save.City);
                cmd.Parameters.AddWithValue("@Email", save.Email);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
            [WebMethod]
        public void Getdata() {
            List < Savedataclass > registerlist = new List < Savedataclass > ();
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Register"].ConnectionString);
            SqlCommand cmd = new SqlCommand("spGetRegisterselect", con);
            cmd.CommandType = CommandType.StoredProcedure;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read()) {
                Savedataclass Info = new Savedataclass();
                Info.ID = Convert.ToInt32(rdr["ID"]);
                Info.StudentName = rdr["Studentname"].ToString();
                Info.FatherName = rdr["Fathername"].ToString();
                Info.PhoneNumber = rdr["Phonenumber"].ToString();
                Info.City = rdr["City"].ToString();
                Info.Email = rdr["Email"].ToString();
                registerlist.Add(Info);
            }
            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(registerlist));
        }
    }
}