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));
}
}
}