CRUD Operation in ASP.NET Web Forms with Oracle Database

Sandhiya Priya
1d
138
0
1
25
Blog

This blog post showcases a web-based CRUD (Create, Read, Update, Delete) operation interface built using ASP.NET Web Forms and styled with Bootstrap 5. It integrates Oracle Database on the backend and provides a responsive UI for managing client details such as PAN, Email, Demat ID, and more.

Overview

This documentation covers a complete ASP.NET web application for managing client details with Oracle database integration. The system provides CRUD (Create, Read, Update, Delete) operations for client information including personal details, PAN numbers, email addresses, and DP (Depository Participant) IDs.

Key Components

CRUDOperation.aspx: Main page for viewing, searching, and deleting client records
AddClient-List.aspx: Form for adding/editing client details
Oracle Database: Backend data storage
OracleHelper.cs: Data access helper class (not shown but referenced)

Features

Search functionality with multiple filters (name, PAN, email, UCC, Demat ID)
Date range filtering using a calendar picker
Bulk delete capability with checkbox selection
Responsive design that works on mobile and desktop
Real-time filtering of displayed data

Code

CURDOperation Frontend page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CRUDOperation.aspx.cs" Inherits="TaskPractices.OracleDB.Oracle_CRUD_Operation.CRUDOperation" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CRUD Operation</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }

        .editalignment {
            text-align: center !important;
        }

        .colorred {
            color: red;
        }

        .grey-bg {
            padding: 20px 0;
        }

        .head-with-filer {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .dashboard-heading h3 {
            margin-bottom: 0;
            font-weight: bold;
            color: #696CFF;
        }

        .filter-section {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .calender-section {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: #696CFF;
            padding-right: 20px;
            padding-left: 20px;
            padding-top: 15px;
            padding-bottom: 15px;
            color: #fff;
            border-radius: 10px;
        }

        a {
            text-decoration: none !important;
            color: #fff !important;
        }

        .searchbtn {
            width: 75px;
            height: 30px;
            padding-left: 14px;
        }

        .admin-input {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .cms-table {
            margin-top: 20px;
        }

        .serachbox {
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
            width: 250px;
        }

        .tooltiptext {
            visibility: hidden;
            width: 80px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -40px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        .delete-div {
            position: relative;
        }

        .modalload {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .centerload img {
            width: 60px;
            height: 60px;
        }

        @media (max-width: 768px) {
            .head-with-filer,
            .filter-section,
            .calender-section {
                flex-direction: column;
                align-items: flex-start;
            }

            .serachbox {
                width: 100%;
            }

            .delete-div {
                margin-top: 10px;
            }
        }
    </style>

</head>

<body>
    <form id="form1" runat="server">
        <section class="grey-bg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="head-with-filer">
                            <div class="dashboard-heading">
                                <h3>Client Details</h3>
                            </div>
                            <div class="filter-section">

                                <div class="calender-section">
                                    <div class="calender-inner">
                                        <span><a href="AddClient-List.aspx">Import Client Details</a></span>
                                    </div>
                                </div>

                                <div class="calender-section">
                                    <div class="calender-inner" name="daterange">
                                        <img src="../../assets/calender.png" alt="calender" class="img-responsive" id="calendarIcon" />
                                        <span id="datevalspan" runat="server" class="date-range-display"></span>
                                        <img src="../../assets/down-white.png" alt="down-white" class="img-responsive" />
                                        <asp:HiddenField ID="hdnDateRange" runat="server" />
                                        <asp:Button ID="btnBind" runat="server" Text="Bind Date" OnClick="btnBind_Click" Style="display: none;" />
                                    </div>
                                </div>
                                <%--  <div class="delete-div tooltip deleteicon">
                                    <asp:ImageButton ID="Deletebtn" runat="server" ImageUrl="../../assets/delete.png " OnClientClick="return CheckBoxValidationAssign2();" OnClick="Deletebtn_Click" class="img-responsive" />
                                    <span class="tooltiptext">Delete</span>
                                </div>--%>
                                <div class="delete-div tooltip deleteicon">
                                    <asp:ImageButton ID="Deletebtn" runat="server"
                                        ImageUrl='<%# ResolveUrl("~/assets/delete.png") %>'
                                        OnClientClick="return CheckBoxValidationAssign2();"
                                        OnClick="Deletebtn_Click"
                                        CssClass="img-responsive" />
                                    <span class="tooltiptext">Delete</span>
                                </div>

                            </div>
                        </div>
                        <div class="cms-table table-responsive" style="padding-top: 20px;">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <asp:TextBox runat="server" CssClass="admin-input ValidateAlfa" ID="txtName" ClientIDMode="Static" placeholder="Name"></asp:TextBox>
                                <asp:TextBox runat="server" CssClass="admin-input" ID="txtPAN" ClientIDMode="Static" placeholder="PAN"></asp:TextBox>
                                <asp:TextBox runat="server" CssClass="admin-input" ID="txtemail" ClientIDMode="Static" placeholder="Email"></asp:TextBox>
                                <asp:TextBox runat="server" CssClass="admin-input" ID="txtUCC" ClientIDMode="Static" placeholder="UCC"></asp:TextBox>
                                <asp:TextBox runat="server" CssClass="admin-input" ID="txtdematid" ClientIDMode="Static" placeholder="Demat ID"></asp:TextBox>
                                <div class="calender-section searchbtn" style="margin-bottom: 5px;">
                                    <div class="calender-inner">
                                        <span onclick="validateuser();"><a style="cursor: pointer;" id="btnsearch">Search</a></span>
                                    </div>
                                </div>
                            </div>
                            <div style="position: relative; display: inline-block; float: right; margin-bottom: 10px; margin-right: 16px;" class="Exceldiv">
                                <asp:TextBox ID="txtFilter" runat="server" onkeyup="filterGrid()" placeholder="Search" CssClass="serachbox" />
                                <img id="clearBtn" runat="server" src="../../assets/close.gif" alt="Clear" style="cursor: pointer; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: none;" onclick="clearInput()" />
                            </div>
                            <div id="leadstablediv" style="overflow-y: auto; max-height: 300px; width: 100%; padding-right: 15px; padding-left: 15px;">
                                <asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="false"
                                    GridLines="None"
                                    CssClass="table table-striped table-bordered cms-table">
                                    <Columns>

                                        <asp:TemplateField>
                                            <HeaderTemplate>
                                                <input id="HeadChk" type="checkbox" onclick="CheckAll(this);">
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <input id="chkSelect" name="chkSelect" onclick="checkall1(this)" type="checkbox" value='<%#DataBinder.Eval(Container.DataItem,"SrNo")%>'>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="User Name" HeaderStyle-CssClass="gridheader-alignment">
                                            <ItemTemplate>
                                                <asp:Label ID="lblUserName" runat="server" Text='<%#Bind("USERNAME") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="PAN" HeaderStyle-CssClass="gridheader-alignment">
                                            <ItemTemplate>
                                                <asp:Label ID="lblPAN" runat="server" Text='<%#Bind("pan") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Email" HeaderStyle-CssClass="gridheader-alignment">
                                            <ItemTemplate>
                                                <asp:Label ID="lblEmail" runat="server" Text='<%#Bind("email") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="UCC" HeaderStyle-CssClass="gridheader-alignment">
                                            <ItemTemplate>
                                                <asp:Label ID="lblMobileNumber" runat="server" Text='<%#Bind("USERID") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="DEMAT ID" HeaderStyle-CssClass="gridheader-alignment">
                                            <ItemTemplate>
                                                <asp:Label ID="lblDEMATID" runat="server" Text='<%#Bind("CDSL_DEMAT_ID") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>


                                        <asp:TemplateField HeaderText="Created Date" HeaderStyle-CssClass="gridheader-alignment">
                                            <ItemTemplate>
                                                <asp:Label ID="lblCreatedDate" runat="server"
                                                    Text='<%# FormatFunctions.C_Format.M_FormatDate(Eval("CREATEDDATE").ToString(), "dd MMM yyyy") %>' />
                                            </ItemTemplate>
                                        </asp:TemplateField>

                                        <asp:TemplateField HeaderText="Action" HeaderStyle-CssClass="gridheader-alignment editalignment ">
                                            <ItemTemplate>
                                                <a class="text-center editanchor "
                                                    name='<%# Eval("srno") %>'
                                                    value='<%# Eval("srno") %>' title="Edit">
                                                    <img src='<%# ResolveUrl("~/assets/edit.png") %>' alt="Edit" class="img-responsive" />
                                                </a>
                                            </ItemTemplate>
                                        </asp:TemplateField>

                                    </Columns>
                                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                    <HeaderStyle CssClass="ReportHeader" />

                                    <RowStyle BackColor="#EFF3FB" HorizontalAlign="Left" />
                                    <AlternatingRowStyle BackColor="White" HorizontalAlign="Left" />
                                </asp:GridView>
                                <div id="nodatadivopen" runat="server" align="center">
                                    <asp:Label ID="lblnodatadivopen" runat="server" Style="color: red; font-size: 17px;">No Data Available !!</asp:Label>
                                </div>
                            </div>

                            <span class="colorred" style="font-size: 10px;">Note : Please search the user detail using search option</span>

                        </div>
                    </div>
                </div>
            </div>

        </section>
        <div class="modalload" runat="server" id="loader" visible="false">
            <div class="centerload">
                <img src="../../assets/Loader.gif" alt="Loader" />
            </div>
        </div>


    </form>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Moment.js (required for daterangepicker) -->
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

    <!-- Daterangepicker.js -->
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <!-- Daterangepicker.css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">

    <script>
        function filterGrid() {
            debugger;
            var input = document.getElementById("<%= txtFilter.ClientID %>");
            var clearBtn = document.getElementById("<%= clearBtn.ClientID %>"); // Get correct ID

            if (!input) {
                console.error("Input element not found");
                return;
            }

            if (clearBtn) {
                if (input.value.trim().length > 0) {
                    clearBtn.style.display = "inline-block"; // Show close button
                } else {
                    clearBtn.style.display = "none"; // Hide close button
                }
            } else {
                console.warn("Clear button element not found"); // Debugging message
            }

            var filter = input.value.toUpperCase();
            var table = document.getElementById("<%= GridView1.ClientID %>");

            if (!table) {
                console.error("Table element not found");
                return;
            }

            var tr = table.getElementsByTagName("tr");

            for (var i = 1; i < tr.length; i++) {
                tr[i].style.display = "none"; // Hide all rows
                var td = tr[i].getElementsByTagName("td");
                for (var j = 0; j < td.length; j++) {
                    if (td[j]) {
                        var txtValue = td[j].textContent || td[j].innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = ""; // Show row if match found
                            break;
                        }
                    }
                }
            }
        }

        function clearInput() {
            debugger;
            var input = document.getElementById("<%= txtFilter.ClientID %>");
            var clearBtn = document.getElementById("<%= clearBtn.ClientID %>"); // Get correct ID

            if (input) {
                input.value = ""; // Clear input field
                filterGrid(); // Refresh table filtering
            }

            if (clearBtn) {
                clearBtn.style.display = "none"; // Hide clear button
            }
        }

        window.onload = function () {
            var input = document.getElementById("<%= txtFilter.ClientID %>");
                  var clearBtn = document.getElementById("<%= clearBtn.ClientID %>");

                  if (input) {
                      input.onkeyup = filterGrid;
                  }

                  if (clearBtn) {
                      clearBtn.style.display = "none"; // Hide clear button initially
                  }

                  filterGrid(); // Initial check
              };

              var table;
              var delarr = [];
              var arr = [];
              var arrsdom = [];

              $(function () {
                  $('div[name="daterange"]').daterangepicker({
                      opens: 'right',
                      dateFormat: 'dd/M/yy',
                      maxDate: new Date(),
                      showDropdowns: true,
                      locale: {
                          format: 'DD MMM YYYY',
                          "separator": " To ",
                          "customRangeLabel": "Custom",
                      },
                      linkedCalendars: false,
                      buttonClasses: 'colorclass',
                      autoApply: true,

                  }, function (start, end, label) {

                      var name = $("#txtName").val();
                      var pan = $("#txtPAN").val();
                      var email = $("#txtemail").val();
                      var ucc = $("#txtUCC").val();
                      var dpid = $("#txtdematid").val();
                      var familyname = $("#txtFamily").val();
                      var test = start.format('DD MMM YYYY') + " - " + end.format('DD MMM YYYY');
                      $("#<%=hdnDateRange.ClientID%>").val(test);
             $("#<%=datevalspan.ClientID%>").text(test);
             var btnBind = document.getElementById('<%= btnBind.ClientID %>');
             btnBind.click();

         });
     });

     function dateconvertion(date) {
         debugger;
         var rdate = "";
         var d = date.split('-')
         for (var i = 0; i < d.length; i++) {
             const date = new Date(d[i]);
             const year = date.getFullYear();//2024
             const month = String(date.getMonth() + 1).padStart(2, '0'); // 09  Months are 0-based
             const day = String(date.getDate()).padStart(2, '0');//03
             rdate += `${year}-${month}-${day}`;//rdate = 2024-09-03 ,yera=2024 , month=09
             if (i == 0) {
                 rdate += '~';
             }
         }
         return rdate;
     }
     function getdata() {
         var name = $("#txtName").val();
         var pan = $("#txtPAN").val();
         var email = $("#txtemail").val();
         var ucc = $("#txtUCC").val();
         var dpid = $("#txtdematid").val();
         var familyname = $("#txtFamily").val();
         var date1 = $("#<%=datevalspan.ClientID%>").text();
    $("#<%=hdnDateRange.ClientID%>").val(date1);
    var dates = $("#<%=hdnDateRange.ClientID%>").val();
    var convertedDate = dateconvertion(dates);
    console.log(convertedDate); // Log to check what it returns

    if (typeof convertedDate === 'string') {
        var date = convertedDate.split('~');

    } else {
        console.error("Converted date is not a string:", convertedDate);
    }

    var btnBind = document.getElementById('<%= btnBind.ClientID %>');
           btnBind.click();
           console.log(`Start Date: ${start}, End Date: ${end}`, "Request : name :" + name + "|| pan : " + pan + "|| email: " + email + "|| ucc : " + ucc + "|| dpid: " + dpid + "|| familyname" + familyname);
       }
       function validateuser() {
           debugger;
           var filter2 = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
           var regex = /^[0-9\s]*$/;
           var name = $("#txtName").val();
           var pan = $("#txtPAN").val();
           var email = $("#txtemail").val();
           var ucc = $("#txtUCC").val();
           var dpid = $("#txtdematid").val();
           var familyname = $("#txtFamily").val();

           if (pan != "") {
               if (pan.length < 10) {
                   alert("Please enter atleast 10 digit PAN Number.");
                   document.getElementById('txtPAN').focus();
                   return false;
               }

           }
           if (email != "") {
               if (!filter2.test(email)) {
                   alert("Invalid Email Address !Please re-enter");
                   document.getElementById('txtemail').focus();
                   return false;
               }
           }


           if (dpid != "") {
               if (dpid.length < 16) {
                   alert("Please enter atleast 16 digit Demat ID.");
                   document.getElementById('txtdematid').focus();
                   return false;
               }

           }

           getdata();

       } $('#calendarIcon').click(function () {
           $('div[name="daterange"]').daterangepicker('show'); // Show the calendar when the calendar icon is clicked
       });
       $('#btnsearch').click(function (e) {
           e.preventDefault();
           validateuser();
       });
       (function ($) {
           $.fn.inputFilter = function (inputFilter) {
               return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function () {
                   if (inputFilter(this.value)) {
                       this.oldValue = this.value;
                       this.oldSelectionStart = this.selectionStart;
                       this.oldSelectionEnd = this.selectionEnd;
                   } else if (this.hasOwnProperty("oldValue")) {
                       this.value = this.oldValue;
                       this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                   }
               });
           };
       }(jQuery));

       $(".ValidateAlfa").inputFilter(function (value) {
           return /^[a-zA-Z]*$/.test(value);
       });
       $("#txtPAN").inputFilter(function (value) {
           return /^[a-zA-Z]{0,5}?[0-9]{0,4}?[a-zA-Z]{0,1}?$/g.test(value);
       });

       //header checkbox called
       function CheckAll(CheckBox) {

           document.getElementById(CheckBox);
           if (CheckBox.checked == true)
               check = true;
           else
               check = false;
           //child checkbox checked 
           for (var i = 0; i <= document.getElementsByName("chkSelect").length - 1; i++)
               document.getElementsByName("chkSelect").item(i).checked = check;
           return true;
       }

       function checkall1(data1) {
           // header false
           if (data1.checked == false) {
               document.getElementById("HeadChk").checked = false;
           }

           for (var i = 0; i <= document.getElementsByName("chkSelect").length - 1; i++) {
               if (document.getElementsByName("chkSelect").item(i).checked == false) {
                   check = false;
                   break;
               }
               else
                   check = true;
           }
           //all child true then header true
           if (check == true) {
               document.getElementById("HeadChk").checked = true;
               return false;
           }
           else
               return true;
       }
       //delete
       function CheckBoxValidationAssign2() {
           debugger;
           var check = false;

           for (var i = 0; i <= document.getElementsByName("chkSelect").length - 1; i++) {
               if (document.getElementsByName("chkSelect").item(i).checked == true) {
                   check = true;
                   break;
               }
               else
                   check = false;
           }
           if (check == false) {
               alert("No Items Selected");
               return false;
           }
           return confirm('Are you sure want to delete ');
       }
       //Edit Button Function 

       $(".editanchor").click(function () {
           debugger;
           var val = $(this).attr("name");
           // Open the link in a new tab
           window.open("/OracleDB/OracleCRUDOperation/AddClient-List.aspx?data=" + val, "_blank");
       });
    </script>
</body>
</html>

CURDOperation Backend page

using Oracle.ManagedDataAccess.Client;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using TaskPractices.BussinessData;

namespace TaskPractices.OracleDB.Oracle_CRUD_Operation
{
    public partial class CRUDOperation : System.Web.UI.Page
    {
        public string con = ConfigurationManager.ConnectionStrings["OracleCon"].ConnectionString;
        public DataSet ds = null;
        public string fdate = "", sdate = "";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                fdate = DateTime.Today.AddMonths(-1).ToString("dd MMM yyyy");
                sdate = DateTime.Now.ToString("dd MMM yyyy");
                datevalspan.InnerText = $"{fdate} - {sdate}";
                BindGrid();
            }
        }

        protected void btnBind_Click(object sender, EventArgs e)
        {
            string time = hdnDateRange.Value;
            string[] dates = time.Split('-');

            if (dates.Length == 2)
            {
                DateTime startDate, endDate;
                string[] formats = { "yyyy-MM-dd", "dd MMM yyyy" };

                if (DateTime.TryParseExact(dates[0].Trim(), formats, null, DateTimeStyles.None, out startDate) &&
                    DateTime.TryParseExact(dates[1].Trim(), formats, null, DateTimeStyles.None, out endDate))
                {
                    fdate = startDate.ToString("dd MMM yyyy");
                    sdate = endDate.ToString("dd MMM yyyy");
                    datevalspan.InnerText = $"{fdate} - {sdate}";
                    BindGrid();
                }
                else
                {
                    fdate = DateTime.Today.AddMonths(-1).ToString("dd MMM yyyy");
                    sdate = DateTime.Today.ToString("dd MMM yyyy");
                    datevalspan.InnerText = $"{fdate} - {sdate}";
                }
            }
        }

        public void BindGrid()
        {
            loader.Visible = true;

            string name = txtName.Text;
            string email = txtemail.Text;
            string pan = txtPAN.Text;
            string ucc = txtUCC.Text;
            string dpid = txtdematid.Text;

            DateTime startDate, endDate;
            if (DateTime.TryParseExact(fdate, "dd MMM yyyy", null, DateTimeStyles.None, out startDate) &&
                DateTime.TryParseExact(sdate, "dd MMM yyyy", null, DateTimeStyles.None, out endDate))
            {
                fdate = startDate.ToString("yyyy-MM-dd");
                sdate = endDate.ToString("yyyy-MM-dd");
                Session["fromdate"] = fdate;
                Session["Todate"] = sdate;
            }

            string strinner = "";
            List<OracleParameter> parameters = new List<OracleParameter>();

            if (!string.IsNullOrEmpty(fdate) && !string.IsNullOrEmpty(sdate))
            {
                strinner += " AND TRUNC(CREATEDDATE) BETWEEN :fdate AND :sdate";
                parameters.Add(new OracleParameter(":fdate", OracleDbType.Date)
                {
                    Value = DateTime.ParseExact(fdate, "yyyy-MM-dd", CultureInfo.InvariantCulture)
                });
                parameters.Add(new OracleParameter(":sdate", OracleDbType.Date)
                {
                    Value = DateTime.ParseExact(sdate, "yyyy-MM-dd", CultureInfo.InvariantCulture)
                });
            }

            if (!string.IsNullOrEmpty(name))
            {
                strinner += " AND USERNAME LIKE '%' || :name || '%'";
                parameters.Add(new OracleParameter(":name", OracleDbType.Varchar2) { Value = name });
            }
            if (!string.IsNullOrEmpty(pan))
            {
                strinner += " AND PAN = :pan";
                parameters.Add(new OracleParameter(":pan", OracleDbType.Varchar2) { Value = pan });
            }
            if (!string.IsNullOrEmpty(email))
            {
                strinner += " AND EMAIL = :email";
                parameters.Add(new OracleParameter(":email", OracleDbType.Varchar2) { Value = email });
            }
            if (!string.IsNullOrEmpty(ucc))
            {
                strinner += " AND USERID = :ucc";
                parameters.Add(new OracleParameter(":ucc", OracleDbType.Varchar2) { Value = ucc });
            }
            if (!string.IsNullOrEmpty(dpid))
            {
                strinner += " AND CDSL_DEMAT_ID = :dpid";
                parameters.Add(new OracleParameter(":dpid", OracleDbType.Varchar2) { Value = dpid });
            }

            string str = "SELECT * FROM UsersDetails WHERE Srno IS NOT NULL " + strinner + " ORDER BY CREATEDDATE DESC";
            ds = OracleHelper.ExecuteDataset(con, CommandType.Text, str, parameters.ToArray());

            loader.Visible = false;
            if (ds != null && ds.Tables[0].Rows.Count > 0)
            {
                GridView1.DataSource = ds;
                GridView1.DataBind();
                nodatadivopen.Visible = false;
            }
            else
            {
                GridView1.DataSource = null;
                GridView1.DataBind();
                nodatadivopen.Visible = true;
            }
        }

        protected void Deletebtn_Click(object sender, ImageClickEventArgs e)
        {
            string chkUserId = Request["chkSelect"]?.ToString() ?? "";

            if (string.IsNullOrEmpty(chkUserId))
            {
                ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", "alert('No Items Selected.');", true);
                return;
            }

            try
            {
                string[] ids = chkUserId.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                List<string> paramNames = new List<string>();
                List<OracleParameter> parameters = new List<OracleParameter>();

                for (int i = 0; i < ids.Length; i++)
                {
                    int srno;
                    if (int.TryParse(ids[i].Trim(), out srno))
                    {
                        string paramName = ":id" + i;
                        paramNames.Add(paramName);
                        parameters.Add(new OracleParameter(paramName, OracleDbType.Int32) { Value = srno });
                    }
                }

                if (parameters.Count == 0)
                {
                    ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", "alert('Invalid IDs provided.');", true);
                    return;
                }

                string sql = "DELETE FROM UsersDetails WHERE srno IN (" + string.Join(",", paramNames) + ")";
                int iAffected = OracleHelper.ExecuteNonQuery(con, CommandType.Text, sql, parameters.ToArray());

                if (iAffected > 0)
                {
                    ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", "alert('Record deleted successfully');", true);
                }
                else
                {
                    ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", "alert('No records were deleted.');", true);
                }
            }
            catch (Exception ex)
            {
                ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", $"alert('Error: {ex.Message}');", true);
            }

            BindGrid();
        }
    }
}

AddClient-List Front page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddClient-List.aspx.cs" Inherits="TaskPractices.OracleDB.Oracle_CRUD_Operation.AddClient_List" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Add Client Details</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .add-media-center-sc {
            padding-top: 60px;
        }

        .Required {
            color: red;
        }

        .add-media-label label {
            font-weight: 500;
            display: inline-block;
            margin-bottom: .5rem;
        }

        .add-media-data {
            width: 100%;
        }

        .add-media-input input,
        .add-media-select select {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }

        .add-media-create {
            padding: 0.5rem 2rem;
            border: none;
            background-color: #696CFF;
            color: white;
            border-radius: 0.375rem;
            font-size: 1rem;
        }

        .add-media-create:hover {
            background-color: #696CFF;
        }

        .dashboard-heading h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #696CFF;
        }

        .uploadmediaredirectanchorpage {
            float: right;
            margin-top: -2.5rem;
            font-size: 1rem;
            background-color: #696CFF;
            padding: 15px 20px;
            color: #fff;
            border-radius: 10px;
            text-decoration: none;
        }

        a {
            text-decoration: none !important;
            color: #fff !important;
        }

        .uploadmediaredirectanchorpage:hover {
            text-decoration: underline;
        }

        .mtop-2 {
            margin-top: 1rem;
        }

        @media (max-width: 767.98px) {
            .uploadmediaredirectanchorpage {
                float: none;
                display: block;
                margin-top: 0.5rem;
                text-align: left;
            }

            .add-media-label,
            .add-media-data {
                margin-bottom: 0.5rem;
            }
        }

        .bg-white {
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <section class="grey-bg">
            <section class="add-media-center-sc">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="dashboard-heading">
                                <h3>Add Client Details</h3>
                            </div>
                            <a class="uploadmediaredirectanchorpage" href="CRUDOperation.aspx">View Client Details</a>
                        </div>
                    </div>
                </div>

                <div class="container bg-white" id="dvupdate" runat="server">
                    <div class="row mtop-2">
                        <div class="col-xl-5">
                            <div class="add-media-label">
                                <label>Client Name <span class="Required">*</span></label>
                            </div>
                        </div>
                        <div class="col-xl-7">
                            <div class="add-media-data">
                                <div class="add-media-input">
                                    <asp:TextBox runat="server" ID="txtclientname" ClientIDMode="Static" placeholder="Jhon" CssClass="AlphabetsOnly ValidateAlfa trim"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Repeat the above pattern for the rest of the form fields... -->

                </div>
            </section>
        </section>
    </form>
</body>
</html>

AddClient-List Backend Code

using Oracle.ManagedDataAccess.Client;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using TaskPractices.BussinessData;

namespace TaskPractices.OracleDB.Oracle_CRUD_Operation
{
    public partial class AddClient_List : System.Web.UI.Page
    {
        public string data = "", dpid;
        public string OracleCon = ConfigurationManager.ConnectionStrings["OracleCon"].ToString();

        protected void Page_Load(object sender, EventArgs e)
        {
            data = Request.QueryString["data"] == null ? "" : Request.QueryString["data"].ToString();
            if (!IsPostBack)
            {
                if (data != "")
                {
                    getClientData(data);
                }
            }
        }

        protected void btnUpdate_Click(object sender, EventArgs e)
        {
            using (OracleConnection con = new OracleConnection(OracleCon))
            {
                con.Open();
                using (OracleTransaction transaction = con.BeginTransaction())
                {
                    try
                    {
                        string srno = Request.QueryString["data"] == null ? "" : Request.QueryString["data"].ToString();

                        // Check if PAN already exists for another client
                        string strcheck = "SELECT COUNT(*) FROM UsersDetails WHERE PAN = :PAN AND (:srno IS NULL OR srno != :srno)";
                        using (OracleCommand checkCmd = new OracleCommand(strcheck, con))
                        {
                            checkCmd.Transaction = transaction;
                            checkCmd.Parameters.Add(new OracleParameter(":PAN", OracleDbType.Varchar2) { Value = txtPAN.Text });
                            checkCmd.Parameters.Add(new OracleParameter(":srno", OracleDbType.Varchar2) { Value = srno });

                            int count = Convert.ToInt32(checkCmd.ExecuteScalar());
                            if (count > 0)
                            {
                                ScriptManager.RegisterStartupScript(this, this.GetType(), "checkuser", "alert('Client already exists');", true);
                                return;
                            }
                        }

                        // Check if family head already exists
                        if (chkfamily.Checked)
                        {
                            string strhead = "SELECT COUNT(*) FROM UsersDetails WHERE family = :family AND isfamily = 1 AND (:srno IS NULL OR srno != :srno)";
                            using (OracleCommand headCmd = new OracleCommand(strhead, con))
                            {
                                headCmd.Transaction = transaction;
                                headCmd.Parameters.Add(new OracleParameter(":family", OracleDbType.Varchar2) { Value = txtfamily.Text });
                                headCmd.Parameters.Add(new OracleParameter(":srno", OracleDbType.Varchar2) { Value = srno });

                                int headCount = Convert.ToInt32(headCmd.ExecuteScalar());
                                if (headCount > 0)
                                {
                                    ScriptManager.RegisterStartupScript(this, this.GetType(), "checkfamilyhead", "alert('Family head already exists');", true);
                                    return;
                                }
                            }
                        }

                        // Determine Demat ID
                        string dematId = (drpdpid.Value == "CDSL") ? txtcdslnum.Text : txtnsdlalpha.Text + txtnsdlnum.Text;

                        string query;
                        if (string.IsNullOrEmpty(srno))
                        {
                            // INSERT
                            query = @"INSERT INTO UsersDetails (USERNAME, PAN, Email, PHONENUMBER, CDSL_DEMAT_ID, DEMATTYPE, family, isfamily, CREATEDDATE)
                                      VALUES (:name, :PAN, :Email, :MobileNumber, :demat_id, :demat_flag, :family, :isfamily, SYSDATE)";
                        }
                        else
                        {
                            // UPDATE
                            query = @"UPDATE UsersDetails SET USERNAME = :name, PAN = :PAN, Email = :Email, PHONENUMBER = :MobileNumber,
                                      CDSL_DEMAT_ID = :demat_id, DEMATTYPE = :demat_flag, family = :family, isfamily = :isfamily, CREATEDDATE = SYSDATE
                                      WHERE srno = :srno";
                        }

                        using (OracleCommand cmd = new OracleCommand(query, con))
                        {
                            cmd.Transaction = transaction;
                            cmd.Parameters.Add(new OracleParameter(":name", OracleDbType.Varchar2) { Value = txtclientname.Text });
                            cmd.Parameters.Add(new OracleParameter(":PAN", OracleDbType.Varchar2) { Value = txtPAN.Text });
                            cmd.Parameters.Add(new OracleParameter(":Email", OracleDbType.Varchar2) { Value = txtemail.Text });
                            cmd.Parameters.Add(new OracleParameter(":MobileNumber", OracleDbType.Varchar2) { Value = txtmobile.Text });
                            cmd.Parameters.Add(new OracleParameter(":demat_id", OracleDbType.Varchar2) { Value = dematId });
                            cmd.Parameters.Add(new OracleParameter(":demat_flag", OracleDbType.Varchar2) { Value = drpdpid.Value });
                            cmd.Parameters.Add(new OracleParameter(":family", OracleDbType.Varchar2) { Value = txtfamily.Text });
                            cmd.Parameters.Add(new OracleParameter(":isfamily", OracleDbType.Int32) { Value = chkfamily.Checked ? 1 : 0 });

                            if (!string.IsNullOrEmpty(srno))
                            {
                                cmd.Parameters.Add(new OracleParameter(":srno", OracleDbType.Varchar2) { Value = srno });
                            }

                            int result = cmd.ExecuteNonQuery();
                            if (result > 0)
                            {
                                transaction.Commit();
                                ScriptManager.RegisterStartupScript(this.Page, typeof(string), "showalert",
                                    "alert('Client data updated successfully');window.location='CRUDOperation.aspx';", true);
                            }
                        }
                    }
                    catch (Exception ex)
                    {
                        ScriptManager.RegisterStartupScript(this, this.GetType(), "dberror", $"alert('Error: {ex.Message}');", true);
                    }
                }
            }
        }

        public void getClientData(string srno)
        {
            string active;
            if (srno != "")
            {
                btnSubmit.Text = "Update";

                DataSet ds = new DataSet();
                string strqry = "SELECT * FROM UsersDetails WHERE srno = :srno";
                OracleParameter[] param = { new OracleParameter(":srno", srno) };

                ds = OracleHelper.ExecuteDataset(OracleCon, CommandType.Text, strqry, param);
                if (ds != null && ds.Tables[0].Rows.Count > 0)
                {
                    txtclientname.Text = ds.Tables[0].Rows[0]["USERNAME"].ToString();
                    txtPAN.Text = ds.Tables[0].Rows[0]["PAN"].ToString();
                    txtemail.Text = ds.Tables[0].Rows[0]["Email"].ToString();
                    txtmobile.Text = ds.Tables[0].Rows[0]["PHONENUMBER"].ToString();
                    drpdpid.Value = ds.Tables[0].Rows[0]["DEMATTYPE"].ToString();
                    txtfamily.Text = ds.Tables[0].Rows[0]["family"].ToString();
                    active = ds.Tables[0].Rows[0]["isfamily"].ToString();
                    chkfamily.Checked = active == "1";

                    if (drpdpid.Value == "CDSL")
                    {
                        cdsl.Style.Add("display", "block");
                        txtcdslnum.Text = ds.Tables[0].Rows[0]["CDSL_DEMAT_ID"].ToString();
                    }
                    else
                    {
                        nsdlnumber.Style.Add("display", "none");
                        nsdlalpha.Style.Add("display", "block");
                        txtnsdlalpha.Text = ds.Tables[0].Rows[0]["CDSL_DEMAT_ID"].ToString();
                    }
                }
            }
            else
            {
                btnSubmit.Text = "Update";
            }
        }
    }
}

Technology Stack

Frontend: HTML, CSS, Bootstrap 5, JavaScript, jQuery
Backend: ASP.NET Web Forms (C#)
Database: Oracle DB
IDE: Visual Studio
Server Control: ASP.NET Web Forms Controls (GridView, TextBox, Button, etc.)

Output

Output

Add