Hi msdinosaurbam...,
Check this example. Now please take its reference and correct your code.
Database
CREATE TABLE [ADMIN](
ADMIN_ID VARCHAR(10) PRIMARY KEY,
ADMIN_NAME VARCHAR(100),
ADMIN_PASSWORD VARCHAR(10),
ADMIN_EMAIL VARCHAR(100),
ADMIN_STATUS VARCHAR(10),
ADMIN_COMMENT VARCHAR(10)
)
CREATE TABLE [STATUS](
STATUS_ID VARCHAR(10) PRIMARY KEY,
STATUS_DESC VARCHAR(100)
)
Model
public class ADMINModel
{
public string ADMIN_ID { get; set; }
public string ADMIN_NAME { get; set; }
public string ADMIN_PASSWORD { get; set; }
public string ADMIN_EMAIL { get; set; }
public string ADMIN_STATUS { get; set; }
public string ADMIN_COMMENT { get; set; }
public virtual STATUSModel STATUS { get; set; }
}
public partial class STATUSModel
{
public string STATUS_ID { get; set; }
public string STATUS_DESC { get; set; }
}
Controller
public class HomeController : Controller
{
AjaxSamplesEntities SqlDbContext = new AjaxSamplesEntities();
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult GetAdminData()
{
var query = (from objAdmin in SqlDbContext.ADMINs
join objStatus in SqlDbContext.STATUS on objAdmin.ADMIN_STATUS equals objStatus.STATUS_ID
select new
{
ADMIN_ID = objAdmin.ADMIN_ID,
ADMIN_NAME = objAdmin.ADMIN_NAME,
ADMIN_PASSWORD = objAdmin.ADMIN_PASSWORD,
ADMIN_EMAIL = objAdmin.ADMIN_EMAIL,
STATUS_DESC = objStatus.STATUS_DESC,
ADMIN_COMMENT = objAdmin.ADMIN_COMMENT
}).ToList();
return Json(new { data = query }, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public ActionResult StoreOrEdit(string id = " ")
{
if (id == null)
{
return View(new ADMINModel());
}
else
{
var query = (from objAdmin in SqlDbContext.ADMINs
join objStatus in SqlDbContext.STATUS on objAdmin.ADMIN_STATUS equals objStatus.STATUS_ID
select new ADMINModel
{
ADMIN_ID = objAdmin.ADMIN_ID,
ADMIN_NAME = objAdmin.ADMIN_NAME,
ADMIN_PASSWORD = objAdmin.ADMIN_PASSWORD,
ADMIN_EMAIL = objAdmin.ADMIN_EMAIL,
ADMIN_STATUS = objStatus.STATUS_DESC,
ADMIN_COMMENT = objAdmin.ADMIN_COMMENT
}).FirstOrDefault(x => x.ADMIN_ID == id);
return View(query);
}
}
[HttpPost]
public ActionResult StoreOrEdit(ADMINModel adminModel)
{
try
{
if (SqlDbContext.ADMINs.Where(x => x.ADMIN_ID.Equals(adminModel.ADMIN_ID)).Count() < 1)
{
ADMIN adminObj = new ADMIN();
adminObj.ADMIN_ID = adminModel.ADMIN_ID;
adminObj.ADMIN_NAME = adminModel.ADMIN_NAME;
adminObj.ADMIN_EMAIL = adminModel.ADMIN_EMAIL;
adminObj.ADMIN_STATUS = adminModel.ADMIN_STATUS;
adminObj.ADMIN_COMMENT = adminModel.ADMIN_COMMENT;
SqlDbContext.ADMINs.Add(adminObj);
SqlDbContext.SaveChanges();
return Json(new { success = true, message = "Saved Successfully", JsonRequestBehavior.AllowGet });
}
else
{
ADMIN adminObj = SqlDbContext.ADMINs.SingleOrDefault(x => x.ADMIN_ID == adminModel.ADMIN_ID);
adminObj.ADMIN_NAME = adminModel.ADMIN_NAME;
adminObj.ADMIN_EMAIL = adminModel.ADMIN_EMAIL;
adminObj.ADMIN_STATUS = adminModel.ADMIN_STATUS;
adminObj.ADMIN_COMMENT = adminModel.ADMIN_COMMENT;
SqlDbContext.SaveChanges();
return Json(new { success = true, message = "Updated Successfully", JsonRequestBehavior.AllowGet });
}
}
catch (Exception ex)
{
}
}
}
View
Index
@model IEnumerable<CRUD_MVC.Models.ADMINModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body class="container">
<br />
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<a class="btn btn-primary" style="margin-bottom:10px" onclick="PopupForm('@Url.Action("StoreOrEdit","Home")')"><i class="fa fa-plus"></i>Add New</a>
<br />
<table id="adminTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>
@Html.DisplayName("ID")
</th>
<th>
@Html.DisplayName("Name")
</th>
<th>
@Html.DisplayName("Password")
</th>
<th>
@Html.DisplayName("Email")
</th>
<th>
@Html.DisplayName("Status")
</th>
<th>
@Html.DisplayName("Comment")
</th>
<th></th>
</tr>
</thead>
</table>
<script type="text/javascript">
var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#adminTable").DataTable({
"ajax": {
"url": "@Url.Action("GetAdminData", "Home")",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "ADMIN_ID" },
{ "data": "ADMIN_NAME" ,"width":"100px"},
{ "data": "ADMIN_PASSWORD" },
{ "data": "ADMIN_EMAIL" },
{ "data": "STATUS_DESC" },
{ "data": "ADMIN_COMMENT" },
{
"data": "ADMIN_ID", "render": function (data) {
return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("StoreOrEdit","Home")/" + data + "')>Edit</a>" +
" <a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" + data + ")>Delete</a >";
},
"orderable": false,
"searchable": false,
"width" : "150px"
}
],
"language": {
"emptyTable" : "No data found please click on Add New Button"
}
});
});
function PopupForm(url) {
var formDiv = $('<div />');
$.get(url).done(function (response) {
formDiv.html(response);
console.log(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: 'Fill Admin Details',
height: 450,
width: 700,
close: function () {
Popup.dialog('destroy').remove();
}
});
}).fail(function (r) {
alert(r.responseText);
});
}
</script>
</body>
</html>
StoreOrEdit
@model CRUD_MVC.Models.ADMINModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>StoreOrEdit</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>
</head>
<body>
@using (Html.BeginForm("StoreOrEdit", "Home", FormMethod.Post, new { onsubmit = "return SubmitForm(this)" }))
{
@*@Html.HiddenFor(model => model.ADMIN_ID)*@
<table>
<tr>
<td>@Html.Label("ID", new { @class = "control-label" })</td>
<td>@Html.Label(":", new { @class = "control-label" })</td>
<td> @Html.EditorFor(model => model.ADMIN_ID, new { htmlAttributes = new { @class = "form-control", @placeholder = "ID" } })</td>
@Html.ValidationMessageFor(model => model.ADMIN_ID, "", new { @class = "text-danger" })
</tr>
<tr>
<td>@Html.Label("Name", new { @class = "control-label" })</td>
<td>@Html.Label(":", new { @class = "control-label" })</td>
<td> @Html.EditorFor(model => model.ADMIN_NAME, new { htmlAttributes = new { @class = "form-control" } })</td>
@Html.ValidationMessageFor(model => model.ADMIN_NAME, "", new { @class = "text-danger" })
</tr>
<tr>
<td>@Html.Label("Pasword", new { @class = "control-label" })</td>
<td>@Html.Label(":", new { @class = "control-label" })</td>
<td> @Html.EditorFor(model => model.ADMIN_PASSWORD, new { htmlAttributes = new { @class = "form-control" } })</td>
@Html.ValidationMessageFor(model => model.ADMIN_PASSWORD, "", new { @class = "text-danger" })
</tr>
<tr>
<td>@Html.Label("Email", new { @class = "control-label" })</td>
<td>@Html.Label(":", new { @class = "control-label" })</td>
<td> @Html.EditorFor(model => model.ADMIN_EMAIL, new { htmlAttributes = new { @class = "form-control", @placeholder = "Email", @style = "width:580px;" } })</td>
@Html.ValidationMessageFor(model => model.ADMIN_EMAIL, "", new { @class = "text-danger" })
</tr>
<tr>
<td>@Html.Label("Status", new { @class = "control-label" })</td>
<td>@Html.Label(":", new { @class = "control-label" })</td>
<td> @Html.EditorFor(model => model.ADMIN_STATUS, new { htmlAttributes = new { @class = "form-control" } })</td>
@Html.ValidationMessageFor(model => model.ADMIN_STATUS, "", new { @class = "text-danger" })
</tr>
<tr>
<td>@Html.Label("Comment", new { @class = "control-label" })</td>
<td>@Html.Label(":", new { @class = "control-label" })</td>
<td> @Html.EditorFor(model => model.ADMIN_COMMENT, new { htmlAttributes = new { @class = "form-control" } })</td>
</tr>
</table>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-success" />
<input type="reset" value="Reset" class="btn btn-warning" />
</div>
}
<script>
function SubmitForm(form) {
//$.validator.unobtrusive.parse(form);
if ($(form).valid()) {
$.ajax({
type: "POST",
url: form.action,
data: $(form).serialize(),
success: function (data) {
if (data.success) {
setTimeout(function () {
Popup.dialog('close');
dataTable.ajax.reload();
//$.notify(data.message, {
// globalPosition: "top center",
// className: "success"
//})
}, 1000);
}
},
error: function (data) {
alert(data.responseText);
}
});
}
return false;
}
</script>
</body>
</html>
Screenshot
