Sunday, 26 February 2023

ASP.NET MVC Full Course | In Tamil

 

Overview:


In this article, we will learn ASP.NET MVC Full Course in Tamil. We can learn additionally C#, SQL, 

Bootstrap ..etc. 


Model Popup Html & CSS Code:


<input type="hidden" id="hfdoubtId" />


<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">


                <h4 class="modal-title">Delete Product <i class="fa fa-trash-o btn btn-danger"></i></h4>

                <h3> <a href="#" class="label label-info close" data-dismiss="modal">&times;</a></h3>

            </div>

            <div class="modal-body">

                <h6>Are you sure you want to delete this ID:<b><input type="text" style="border:none;text-align:left;width:20px" id="txtid" />?</b></h6> 


            </div>

            <div class="modal-footer">


                <a href="#" class="btn btn-success" onclick="DeleteAppoint()">Confirm</a>

                <a href="#" class="btn btn-primary" data-dismiss="modal">Cancel</a>

            </div>


        </div>


    </div>


</div>










JavaScript:



<script type="text/javascript">


        var ConfirmDelete = function (Id) {


            $("#hfdoubtId").val(Id);

            $("#txtid").val(Id);

            $("#myModal").modal('show');


        }


        var DeleteAppoint = function () {



            var doubtId = $("#hfdoubtId").val();


            $.ajax({


                type: "POST",

                url: "/Student/DeleteProducts",

                data: { Id: doubtId },

                success: function (response) {


                    if (response == "Success") {

                        $("#showmsg").val("You have successfully deleted your products..!", "Deleted ");

                        alertSuccess();

                        setTimeout(function () {


                        }, 4000);


                       

                    }

                    $("#myModal").modal("hide");


                    $('#dataTables').DataTable().ajax.reload();


                }


            })


        }


    </script>

}



at No comments:

Tuesday, 5 April 2022

delete operation in ajax datatable in asp.net mvc

 

 Overview:


    In this article, we are going to explain, how to Delete operations in employee information list ajax data table form design in asp.net MVC using bootstrap(Video Session-10). now we are going to create step by step in this article.  👇💗💙💚💛

infinity coding tamizha
delete operation in ajax data table in MVC



Step 1:  Create a Delete Store procedure


Table:

CREATE TABLE [dbo].[tblEmployee](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Employee] [nvarchar](50) NULL,
[Designation] [nvarchar](50) NULL,
[Salary] [nvarchar](50) NULL,
[Address] [nvarchar](50) NULL,
 CONSTRAINT [PK_tblEmployee] PRIMARY KEY CLUSTERED 
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO


 Store procedure:

create PROCEDURE [dbo].[prDeleteEmployee]
@Id int
AS
BEGIN
SET NOCOUNT ON;

delete from tblEmployee where ID=@Id

END



Step 2:  Add ActionMethod in Controller



 public ActionResult DeleteEmp(int empId)
        {
            try
            {
                using (SqlConnection con = new SqlConnection(constring))
                {
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = "[prDeleteEmployee]";
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@Id", empId);
                    cmd.Connection = con;
                    con.Open();
                    int affect = cmd.ExecuteNonQuery();
                   
                    con.Close();
                }
            }
            catch(Exception ex)
            {
                throw new Exception(ex.Message);
            }

            return Json(new { Status = "Success" });
        }



Step 3:  Add a modal popup on the employee view page



 <input type="hidden" id="hfid" />
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title">Delete row <i class="glyphicon glyphicon-trash btn btn-danger"></i></h3>
                </div>
                <div class="modal-body">
                    <h4>Are you sure you want to Delete this row ?</h4>
                    ID:<b><input t ype="text" style="border:none;text-align:left;background-color:#fff;" disabled="disabled" id="txtid" /></b>


                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-warning" data-dismiss="modal">Cancel</a>
                    <a href="#" class="btn btn-primary" onclick="DeleteRows()">Confirm</a>
                </div>

            </div>

        </div>

    </div>


Step 4:  Add delete operation javascript in an employee view page


 <script type="text/javascript">
        var ConfirmDelete = function (Id) {
            $("#hfid").val(Id);
            $("#txtid").val(Id);
            $("#myModal").modal('show');
        }
        var DeleteRows = function () {
            var rowsid = $("#hfid").val();
            $.ajax({
                type: "POST",
                url: "Home/DeleteEmp",
                data: { empId: rowsid },
                success: function (result) {
                    $("#myModal").modal("hide");
                    alert("Employee data deleted successfully.!");
                    $("#dataTables").DataTable().ajax.reload();
                }
            })
        }

    </script>

Step 5: Full View page of employee information


@model InsertUpdateMVC.Models.InsertUpdateModel

@{
    ViewBag.Title = "Employee";
}

<h2>Employee Information (Insert, Edit, Update, Delete and List)</h2>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/css")


<link href="~/Content/bootstrap.datatables.css" rel="stylesheet" />

<link href="~/Content/dataTables.bootstrap.css" rel="stylesheet" />

<style>
    .error {
        color: white;
        background-color: #f12e2e;
        font-weight: bold;
        font-size: 12px;
        font-family: 'Times New Roman';
        position: static;
        display: inline-block;
        z-index: 5;
    }

    .table-responsive {
        overflow-x: hidden;
    }
</style>

@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{
    @Html.HiddenFor(Model => Model.ID)
    <div class="container">
        @if (Model != null && Model.ID > 0)
        {
            <div class="row">
                <div class="col-lg-3">@Html.Label("Employee ID")</div>
                <div class="col-lg-3">@Html.TextBoxFor(Model => Model.ID, new { @class = "form-control", @disabled = true })</div>

            </div>

            <br />
        }
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Employee)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Employee, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Employee, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Designation)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Designation, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Designation, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Salary)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Salary, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Salary, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Address)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Address, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Address, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="col-lg-offset-4">
            <button type="submit" class="btn btn-primary" value="Save">Save</button>

        </div>
    </div>
    <br />
}

<div class="row">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="panel panel-primary">
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-responsive table-bordered table-hover" id="dataTables">
                        <thead>
                            <tr>
                                <th>Action</th>
                                <th style="visibility:hidden">ID</th>
                                <th>S.No</th>
                                <th>Employee</th>
                                <th>Designation</th>
                                <th>Salary</th>
                                <th>Address</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


@if (ViewBag.Message != null)
{
    <script type="text/javascript">
                  {

                        alert('@ViewBag.Message')

                    }

    </script>
}


@section scripts
{
    <script src="~/Scripts/jquery-3.4.1.js"></script>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>



    <script src="~/Scripts/jquery.dataTables.js"></script>
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/dataTables.bootstrap.js"></script>
    <script src="~/Scripts/dataTables.bootstrap.min.js"></script>



    <script type="text/javascript">

        $(document).ready(function () {

            $("#dataTables").DataTable({

                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false
                    }
                ],

                "scrollX": false,
                "iDisplayLength": 4,
                "aLengthMenu": [4, 10, 25, 50, 100],
                "bprocessing": true,
                "bLengthchange": true,

                "language": {
                    Searchplaceholder: "Search Anything here"
                },

                "ajax": {
                    "url": "/Home/Jsonemployeelist",
                    "type": "Get",
                    "dataType": "json",
                },

                "columns": [

                    {
                        "data": "ID", "render": function (data) {
                            return '<a href="@Url.Action("Employee", "Home")?empid=' + data + '"><i class="btn btn-success glyphicon glyphicon-edit" title="Edit"></i></a> | <a href="#" title="Delete" onclick=ConfirmDelete('+data+')> <i class="btn btn-danger glyphicon glyphicon-trash" title="Delete this row"></i></a>'
                        },
                        orderable: false
                    },

                    { "data": "ID" },
                    { "data": "Sno" },

                    { "data": "Employee" },
                    { "data": "Designation" },
                    { "data": "Salary" },
                    { "data": "Address" },

                ]

            });

        });

    </script>

    <input type="hidden" id="hfid" />
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title">Delete row <i class="glyphicon glyphicon-trash btn btn-danger"></i></h3>
                </div>
                <div class="modal-body">
                    <h4>Are you sure you want to Delete this row ?</h4>
                    ID:<b><input t ype="text" style="border:none;text-align:left;background-color:#fff;" disabled="disabled" id="txtid" /></b>


                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-warning" data-dismiss="modal">Cancel</a>
                    <a href="#" class="btn btn-primary" onclick="DeleteRows()">Confirm</a>
                </div>

            </div>

        </div>

    </div>


    <script type="text/javascript">
        var ConfirmDelete = function (Id) {
            $("#hfid").val(Id);
            $("#txtid").val(Id);
            $("#myModal").modal('show');

        }

        var DeleteRows = function () {
            var rowsid = $("#hfid").val();
            $.ajax({
                type: "POST",
                url: "Home/DeleteEmp",
                data: { empId: rowsid },
                success: function (result) {
                    $("#myModal").modal("hide");
                    alert("Employee data deleted successfully.!");
                    $("#dataTables").DataTable().ajax.reload();
                }

            })

        }


    </script>


}



Step 6:  Run the Application Get Output Result 👏💖💙💚💛💜


 

infinity coding tamizha
delete operation in employee information in MVC



More Details:       👇








at No comments:
Labels:

Wednesday, 23 March 2022

add edit and delete icon in ajax data table in mvc C#

 

 Overview:


    In this article, we are going to explain, how to add Edit and Delete icons employee information list ajax data table form design in asp.net MVC using bootstrap. now we are going to create step by step in this article.


add edit and delete icons in ajax datatable
Add Edit and Delete icons in MVC


Step 1:  Open the project already created in the previous session.

infinity coding tamizha employee crud
Open the project


Step 2:  add new ID model in ViewEmployeeModel.cs class file


using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;


namespace InsertUpdateMVC.Models

{

    public class ViewEmployeeModel

    {

        public int ID { get; set; }

        public int Sno { get; set; }

        public string Employee { get; set; }

        public string Designation { get; set; }


        public string Salary { get; set; }

        public string Address { get; set; }


    }

} 



Step 3:  Add  ID in Listemployee() Method in HomeController  below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using InsertUpdateMVC.Models;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

namespace InsertUpdateMVC.Controllers
{
    public class HomeController : Controller
    {
        string constring = ConfigurationManager.ConnectionStrings["constring"].ConnectionString;
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
        public ActionResult Employee()
        {

            return View();
        }

        [HttpPost]
        public ActionResult Employee(InsertUpdateModel model)
        {
            try
            {
               using(SqlConnection con=new SqlConnection(constring))
                {
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = "prInsertUpdateEmployee";
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@Id", model.ID);
                    cmd.Parameters.AddWithValue("@employee", model.Employee);
                    cmd.Parameters.AddWithValue("@designation", model.Designation);
                    cmd.Parameters.AddWithValue("@salary", model.Salary);
                    cmd.Parameters.AddWithValue("@address", model.Address);
                    cmd.Connection = con;
                    con.Open();
                   int affect=cmd.ExecuteNonQuery();
                    if(affect >0)
                    {
                        ViewBag.Message = "Data saved successfully..!";
                    }
                    con.Close();
                }
                ModelState.Clear();
            }
            catch(Exception ex)
            {
                throw new Exception(ex.Message);
            }
            return View();
        }

        public ActionResult Jsonemployeelist()
        {
            InsertUpdateModel model = new InsertUpdateModel();
            model.listemployee = Listemployee();
            var listemployee = model.listemployee;
            return Json(new { data = listemployee }, JsonRequestBehavior.AllowGet);
        }


        public List<ViewEmployeeModel> Listemployee()
        {
            List<ViewEmployeeModel> list = new List<ViewEmployeeModel>();
            try
            {
            
                using (SqlConnection con=new SqlConnection(constring))
                {
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = "prListemployee";
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Connection = con;
                    con.Open();
                    SqlDataReader reader = cmd.ExecuteReader();
                    while(reader.Read())
                    {
                        ViewEmployeeModel model = new ViewEmployeeModel();
                        model.Sno = reader["SNo"].GetHashCode();
                        model.ID = reader["ID"].GetHashCode();
                        model.Employee = reader["Employee"].ToString();
                        model.Designation = reader["Designation"].ToString();
                        model.Salary = reader["Salary"].ToString();
                        model.Address = reader["Address"].ToString();
                        list.Add(model);
                    }
                    con.Close();
                }
            }
            catch(Exception ex)
            {
                throw new Exception(ex.Message);
            }

            return list;
        }
       
    }
}
 


Step 4:  Add  ID model in View Page and  Ajax script


@model InsertUpdateMVC.Models.InsertUpdateModel
@{
    ViewBag.Title = "Employee";
}
<h2>Employee Information (Insert, Edit, Update, Delete and List)</h2>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/css")
<link href="~/Content/bootstrap.datatables.css" rel="stylesheet" />
<link href="~/Content/dataTables.bootstrap.css" rel="stylesheet" />
<style>
    .error {
        color: white;
        background-color: #f12e2e;
        font-weight: bold;
        font-size: 12px;
        font-family: 'Times New Roman';
        position: static;
        display: inline-block;
        z-index: 5;
    }
    .table-responsive {
        overflow-x: hidden;
    }
</style>
@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{
    <div class="container">
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Employee)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Employee, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Employee, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Designation)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Designation, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Designation, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Salary)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Salary, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Salary, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-lg-3">@Html.LabelFor(Model => Model.Address)</div>
            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Address, new { @class = "form-control" })</div>
            <div class="col-lg-1">
                @Html.ValidationMessageFor(Model => Model.Address, "", new { @class = "error" })
            </div>
        </div>
        <br />
        <div class="col-lg-offset-4">
            <button type="submit" class="btn btn-primary" value="Save">Save</button>
           
        </div>
    </div>
    <br />
}
<div class="container">
    <div class="panel panel-body">
        <div class="row">
            <table class="table table-responsive table-bordered table-hover" id="dataTables">
                <thead>
                    <tr>
                        <th>Action</th>
                        <th style="visibility:hidden">ID</th>  // add ID column in table header
                        <th>S.No</th>
                        <th>Employee</th>
                        <th>Designation</th>
                        <th>Salary</th>
                        <th>Address</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@if (ViewBag.Message != null)
{
    <script type="text/javascript">
                  {
                        alert('@ViewBag.Message')
                    }
    </script>
}

@section scripts{
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/dataTables.bootstrap.js"></script>
    <script src="~/Scripts/jquery.dataTables.js"></script>
    <script src="~/Scripts/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#dataTables").DataTable({
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false
                    }
                ],
                "scrollX": false,
                "iDisplayLength": 4,
                "aLengthMenu": [4, 10, 25, 50, 100],
                "bprocessing": true,
                "bLengthchange": true,
                "language": {
                    Searchplaceholder: "Search Anything here"
                },
                "ajax": {
                    "url": "/Home/Jsonemployeelist",
                    "type": "Get",
                    "dataType": "json",
                },
                "columns": [
                    {
                        "data": "ID", "render": function (data) {
                            return '<a href="@Url.Action("","")?ID=' + data + '"><i class="btn btn-success glyphicon glyphicon-edit" title="Edit"></i></a> | <a href="@Url.Action("","")?ID=' + data +'"><i class="btn btn-danger glyphicon glyphicon-trash" title="Delete"></i></a> '
                        },
                        orderable: false
                    },
                    { "data": "ID" },
                    { "data": "Sno" },
                
                    { "data": "Employee" },
                    { "data": "Designation" },
                    { "data": "Salary" },
                    { "data": "Address" },
                ]
            });
        });
    </script>



} 


Step 5:   Select ID column in prListemployee store procedure

ALTER PROCEDURE [dbo].[prListemployee]

AS
BEGIN
SET NOCOUNT ON;

select ROW_NUMBER() over(order by ID) as SNo, ID, Employee,Designation,Salary,Address
from tblEmployee


END



Step 6:    Create a new store procedure for Edit and Delete operation in employee information

// Edit store  procedure below

CREATE PROCEDURE [dbo].[prEditEmployeeDetails]  

@Id int

AS

BEGIN

SET NOCOUNT ON;


select ID, Employee,Designation, Salary,Address from tblEmployee where ID=@Id

   

END


 // Delete store  procedure below

CREATE PROCEDURE [dbo].[prDeleteEmployee]

@Id int

AS

BEGIN

SET NOCOUNT ON;


delete from tblEmployee where ID=@Id


END



Step 7:   Run the Project then see the Result

 

edit and delete icon in ajax data table

Final Result Added Edit and Delete icons in Ajax data table


     More Details :


Video Link:      https://youtu.be/i8sMF6ytv4Q

 

                       


at No comments:
Labels:
Subscribe to: Posts (Atom)

ASP.NET MVC Full Course | In Tamil

  Overview: In this article, we will learn ASP.NET MVC Full Course in Tamil. We can learn additionally C#, SQL,  Bootstrap ..etc.  Model Pop...