Am using SB2 Admin Template in mvc, kindly assist me, which code will be best form me to use for update modal
My Product Category page
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" >
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header pt-1 pb-1">
<h4 class="modal-title">Create New Category</h4>
</div>
<div class="modal-body" id="myModalBodyDiv1">
<input type="hidden" id="categoryId" />
<input type="hidden" id="status" />
<input type="text" class="form-control"
id="categoryName" aria-describedby="emailHelp"
placeholder="Category">
</div>
<div class="modal-footer">
Save
</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-md-12 mb-12">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="form-group col-md-6">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Category List
</div>
</div>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-body">
<div class="table-responsive">
<p><button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#myModal">Add New</button></p>
<table class="table table-bordered table-striped table-hover" id="dataTable" width="100%" cellspacing="0">
<thead class="table-dark">
<tr>
<th>Category</th>
<th>Status</th>
<th>
Edit
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody id="trDiv">
<tr></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
GetAllCategory();
});
$(document).ready(function () {
$("#dataTable").DataTable({
"processing": false,
"serverSide": false,
"paging": true,
"destroy": true,
pageLength: 25,
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel', title: 'ExampleFile' },
{ extend: 'pdf', title: 'ExampleFile' },
{
extend: 'print',
customize: function (win) {
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('#dataTable')
.addClass('compact')
.css('font-size', 'inherit');
}
}
],
dom: '<"html5buttons"B>lTfgitp',
"columns": [
{ "data": "CategoryName" },
{ "data": "Status" },
{
"data": "CategoryId", "width": "50px", "render": function (CategoryId, type, full, meta) {
debugger
return '<a onclick="AddEditCategory(' + CategoryId + ')"><i class="fa fa-edit">Edit</i></a>';
}
},
{
"data": "CategoryId", "width": "50px", "render": function (data) { return "<a style=color:red class='fa fa-trash-alt' onclick=Delete('" + data + "');>Delete</a>"; }
},
],
"ajax": {
"url": "/Home/GetAllCategory",
"type": "GET",
"dataSrc": "[]",
}
});
});
var AddEditCategory = function(CategoryId)
{
var url = "Home/AddEditCategory?CategoryId=" + CategoryId;
$("#myModalBodyDiv1").Load(url, function ()
{
$("#myModal").modal("show");
})
}
function saveCategory() {
var category = new Object();
category.CategoryId = $("#categoryId").val();
category.CategoryName = $("#categoryName").val();
category.Status = $("#status").val();
var data = JSON.stringify({
category: category
});
Home Control Page
[HttpGet]
public ActionResult GetAllCategory()
{
ASPNETMASTERPOSTEntities db = new ASPNETMASTERPOSTEntities();
var dataList = db.tblCategories.Where(x => x.Status == 1).ToList();
var data = dataList.Select(x => new
{
CategoryId = x.CategoryId,
CategoryName = x.CategoryName,
Status = x.Status
});
return Json(data, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult AddEditCategory(int? CategoryId)
{
ASPNETMASTERPOSTEntities db = new ASPNETMASTERPOSTEntities();
List<tblCategory>list = db.tblCategories.ToList();
ViewBag.tblCategoryList = new SelectList(list, "CategoryId", "CategoryName");
tblCategory model = new tblCategory();
if(CategoryId > 0)
{
tblCategory cat = db.tblCategories.SingleOrDefault(x => x.CategoryId == CategoryId && x.IsDeleted == false);
model.CategoryId = cat.CategoryId;
model.CategoryName = cat.CategoryName;
}
Update Control page
<div>
<form id="myform">
@Html.DisplayNameFor(model => model.CategoryId)
<label for="CategoryName" class="control-label col-lg-3">Category Name</label>
@Html.DisplayNameFor(model => model.CategoryName)
<a href="#" id="btnSubmit" class="btn btn-success btn-block">
@if(Model.CategoryId > 0 )
{
<span>Update</span>
}
else
{
<span>Save</span>
}
</a>
</form>
<div style="text-align:center;display:none" id="loaderDiv"></div>
</div>
<script>
$(Document).ready(function () {
$("#btnSubmit").click(function()
{
$("#loaderDiv").show();
var myform = $("#myform").serialize();
$ajax({
type: "POST",
url: "/Category/Category",
data: myform,
success: function () {
$("#loaderDiv").hide();
$("#myModal").modal("hide");
window.location.href = "/Home/Category";
}
})
})
})
</script>