I am getting error in the code the load function working properly but the add new employee model was not showing and edit and delete is not working
Index.html
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h3>Show Employee Records</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add new Employee</button><br /><br />
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>Employee Id</td>
<td>EmpName</td>
<td>Age</td>
<td>State</td>
<td>Country</td>
<td>Action</td>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h4 class="modal-title" id="myModalLabel">Add Employee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="EmpId">Employee Id</label>
<input type="text" class="form-control" id="EmpId" placeholder="Employee Id" disabled="disabled" />
</div>
<div class="form-group">
<label for="EmpName">Emp Name</label>
<input type="text" class="form-control" id="EmpName" placeholder="EmpName" />
</div>
<div class="form-group">
<label for="Age">Age</label>
<input type="text" class="form-control" id="Age" placeholder="Age" />
</div>
<div>
<label for="State">State</label>
<input type="text" class="form-control" id="State" placeholder="State" />
</div>
<div>
<label for="Country">Country</label>
<input type="text" class="form-control" id="Country" placeholder="Country" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnAdd" onclick="Add();">Add</button>
<button type="button" class="btn btn-secondary" id="btnUpdate" onclick="Update();">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
loadData();
});
function clearTextBox() {
$('#EmpId').val("");
$('#EmpName').val("");
$('#Age').val("");
$('#State').val("");
$('#Country').val("");
$('#btnAdd').show();
$('#btnUpdate').hide();
$('#EmpName').css('border-color', 'lightgrey');
$('#Age').css('border-color', 'lightgrey');
$('#State').css('border-color', 'lightgrey');
$('#Country').css('border-color', 'lightgrey');
};
function loadData() {
$.ajax({
type: "GET",
url: "/Home/ListAllEmployee",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (rest) {
var html = '';
$.each(rest, function (key, item) {
html += '<tr>';
html += '<td>' + item.EmpId + '</td>';
html += '<td>' + item.EmpName + '</td>';
html += '<td>' + item.Age + '</td>';
html += '<td>' + item.State + '</td>';
html += '<td>' + item.Country + '</td>';
html += '<td><a href="#" onclick="return getbyID(' + item.EmpId + ')">Edit</a> | <a href="#" onclick="Delete(' + item.EmpId + ')">Delete</a></td>';
html += '</tr>';
});
$('.tbody').html(html);
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
function Add() {
var res = validate();
if (res == false) {
return false;
}
var objEmp = {
EmpId: $('#EmpId').val(),
EmpName: $('#EmpName').val(),
Age: $('Age').val(),
State: $('State').val(),
Country: $('Country').val()
};
$.ajax({
type: "POST",
url: "/Home/Add",
data: JSON.stringify(objEmp),
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
loadData();
$("#myModal").modal('hide');
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
function getbyID(empId) {
$('#EmpName').css('border-color', 'lightgrey');
$('#Age').css('border-color', 'lightgrey');
$('#State').css('border-color', 'lightgrey');
$('#Country').css('border-color', 'lightgrey');
$.ajax({
type: "GET",
url: "/Home/GetByID" + empId,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
$('#EmployeeId').val(result.EmpId);
$('#EmpName').val(result.EmpName);
$('Age').val(result.Age);
$('State').val(result.State);
$('Country').val(result.Country);
$('#myModal').modal('show');
$('#btnUpdate').show();
$('#btnAdd').hide();
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
return false;
}
function Update() {
var res = validate();
if (res == false) {
return false;
}
var Empobj = {
EmpId: $('#EmpId').val(),
EmpName: $('#EmpName').val(),
Age: $('#Age').val(),
State: $('#State').val(),
Country: $('#Country').val()
};
$.ajax({
type: "POST",
url: "/Home/Update",
data: Json.stringify(Empobj),
contentType: "aplication/json; charset=utf-8",
dataType: "json",
Success: function (result) {
loadData();
$('#myModal').modal('hide');
$('#EmpId').val("");
$('#EmpName').val("");
$('#Age').val("");
$('#State').val("");
$('#Country').val("");
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
function Delete(Id) {
var mess = confirm("Are You Sure You Want to Delete this Record?");
if (mess) {
$.ajax({
type: "POST",
url: "/Home/Delete" + Id,
contentType: "application/json;charset=UTF-8",
dataType: "json",
Success: function (result) {
loadData();
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
}
function validate() {
var isValid = true;
if ($('#EmpName').val().trim() == "") {
$('#EmpName').css('border-color', 'Red');
isValid = false;
}
else {
$('#EmpName').css('border-color', 'lightgrey');
}
if ($('#Age').val().trim() == "") {
$('#Age').css('border-color', 'Red');
isValid = false;
}
else {
$('#Age').css('border-color', 'lightgrey');
}
if ($('#State').val().trim() == "") {
$('#State').css('border-color', 'lightgrey');
isValid = false;
}
else {
$('#State').css('border-color', 'lightgrey');
}
if ($('#Country').val().trim() == "") {
$('#Country').css('border-color', 'lightgrey');
isValid = false;
}
else {
$('#Country').css('border-color', 'lightgrey');
}
};
</script>
</body>
</html>
clsdbModelEmployee.cs
private string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
public List<clsEmployeeModel> ListAllEmployee()
{
List<clsEmployeeModel> objAllEmpList = new List<clsEmployeeModel>();
using (SqlConnection con = new SqlConnection(constring))
{
con.Open();
using (SqlCommand cmd = new SqlCommand("Select * from tblEmployee", con))
{
cmd.CommandType = System.Data.CommandType.Text;
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
objAllEmpList.Add(new clsEmployeeModel
{
EmpId = Convert.ToInt32(sdr["EmpId"]),
EmpName = (sdr["EmpName"]).ToString(),
Age = Convert.ToInt32(sdr["Age"]),
State = (sdr["State"]).ToString(),
Country = (sdr["Country"]).ToString()
});
}
return objAllEmpList;
}
}
}
}
public int AddEmployee(clsEmployeeModel objEmpModel)
{
int i;
using (SqlConnection con = new SqlConnection(constring))
{
con.Open();
using (SqlCommand cmd = new SqlCommand("Insert Into tblEmployee Values(@EmpName,@Age,@State,@Country)", con))
{
//cmd.Parameters.AddWithValue("@EmpId", objEmpModel.EmpId);
cmd.Parameters.AddWithValue("@EmpName", objEmpModel.EmpName);
cmd.Parameters.AddWithValue("@Age", objEmpModel.Age);
cmd.Parameters.AddWithValue("@State", objEmpModel.State);
cmd.Parameters.AddWithValue("@Country", objEmpModel.Country);
i = cmd.ExecuteNonQuery();
con.Close();
}
}
return i;
}
public int UpdateEmployee(clsEmployeeModel objEmpModel)
{
int i;
using (SqlConnection con = new SqlConnection(constring))
{
con.Open();
using (SqlCommand cmd = new SqlCommand("Update tblEmployee set EmpName=@EmpName,Age=@Age,State=@State,Country=@Country where EmpId=@EmpId", con))
{
cmd.CommandType = System.Data.CommandType.Text;
cmd.Parameters.AddWithValue("@EmpName", objEmpModel.EmpName);
cmd.Parameters.AddWithValue("@Age", objEmpModel.Age);
cmd.Parameters.AddWithValue("@State", objEmpModel.State);
cmd.Parameters.AddWithValue("@Country", objEmpModel.Country);
cmd.Parameters.AddWithValue("@EmpId", objEmpModel.EmpId);
i = cmd.ExecuteNonQuery();
con.Close();
}
}
return i;
}
public int DeleteEmployee(int Id)
{
int i;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("Delete From tblEmployee where EmpId=@EmpId"))
{
cmd.CommandType = System.Data.CommandType.Text;
cmd.Parameters.AddWithValue("@EmpId", Id);
i = cmd.ExecuteNonQuery();
con.Close();
}
}
return i;
}
clsEmployeeModel
public class clsEmployeeModel
{
public int EmpId { get; set; }
public string EmpName { get; set; }
public int Age { get; set; }
public string State { get; set; }
public string Country { get; set; }
}
HomeController.cs
clsDBEmployeeModel objDbEmp = new clsDBEmployeeModel();
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult ListAllEmployee()
{
return Json(objDbEmp.ListAllEmployee(), JsonRequestBehavior.AllowGet);
}
public JsonResult Add(clsEmployeeModel objEmpModel)
{
return Json(objDbEmp.AddEmployee(objEmpModel), JsonRequestBehavior.AllowGet);
}
public JsonResult GetByID(int empId)
{
var objemployee = objDbEmp.ListAllEmployee().Find(x => x.EmpId.Equals(empId));
return Json(objemployee, JsonRequestBehavior.AllowGet);
}
public JsonResult Update(clsEmployeeModel objEmployee)
{
return Json(objDbEmp.UpdateEmployee(objEmployee), JsonRequestBehavior.AllowGet);
}
public JsonResult Delete(int Id)
{
return Json(objDbEmp.DeleteEmployee(Id), JsonRequestBehavior.AllowGet);
}
