Dear all,
I try to run my CRUD application for multiple model of Admin information on datatables using JavaScript + EF MVC but not luck to see result successfully.
I am surfing net , read many the forum and also follow step from youtuber but i m
hang for this two function "Add" and "Edit" on few weeks.
Please help me to check and solve which coding part i m wrong and also check jquery plugin too . Thank you for advanced.
What I have tried:
1) "Add New" function cannot back to same screen when pressed "Submit" button.
2) "Edit" function cannot display out information when pressed "Edit"as pencil icon button
Models::
public partial class ADMIN
{
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 STATUS STATUS { get; set; }
}
public partial class STATUS
{
public string STATUS_ID { get; set; }
public string STATUS_DESC { get; set; }
}
Controller part:
[HttpGet]
public ActionResult StoreOrEdit(string adminModel_Id = " ")
{
if (adminModel_Id == null)
return View(new ADMIN());
else
{
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
}).FirstOrDefault(x => x.ADMIN_ID == adminModel_Id);
return View(query);
}
}
[HttpPost]
public ActionResult StoreOrEdit(ADMIN 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(adminModel);
SqlDbContext.SaveChanges();
return Json(new { success = true, message = "Saved Successfully", JsonRequestBehavior.AllowGet });
}
else
{
ADMIN adminObj = SqlDbContext.ADMINs.SingleOrDefault(x => x.ADMIN_STATUS == "01" && 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)
{
Console.WriteLine(ex.InnerException);
throw;
}
}
View Part:
@model IEnumerable<ABC.Models.ADMIN>
@{
ViewBag.Title = "Admin Profile";
Layout = "~/Views/Shared/_LayoutPage2.cshtml";
}
<link href="~/Content/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="~/css/font-awesome.min.css" rel="stylesheet" />
<a class="btn btn-primary" style="margin-bottom:10px" onclick="PopupForm('@Url.Action("StoreOrEdit","Admin")')">class="fa fa-plus">Add New</a>
<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>
Javascript part:
<pre>@section scripts{
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTables.bootstrap4.min.js"></script>
<script>
var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#adminTable").DataTable({
"ajax": {
"url": "@Url.Action("GetAdminData", "Admin")",
"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","Admin")/" + data + "')>">Edit</a>" +
" <a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" + data + ")>^__i class="fa fa-trash">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();
}
});
});
}
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) {
Popup.dialog('close');
dataTable.ajax.reload();
$.notify(data.message, {
globalPosition: "top center",
className:"success"
})
}
}
});
}
return false;
}
</script>
}
Thank You very much for all.
EDIT: Added from solution 1:
StoreOrEdit view part:
@model ABC.Models.ADMIN
@{
Layout = null;
}
@using (Html.BeginForm("StoreOrEdit", "Admin", 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>
}
Submit an article or tip