With my ASP.NET MVC, modal popup, DataTable and SSMS Server application, I have a problem when updating the dataTable. When I click on edit button, it says Uncaught Type error: cannot read property of undefined. HTML PAGE
<div class="container"> <!-- Trigger the modal with a button --> <!-- Modal --> <div class="modal fade" id="categoryModal" role="dialog"> <div class="modal-dialog">
<!-- Modal content--> <div class="modal-content" id="categorymodalBody"> <div class="modal-header pt-1 pb-1"> <h4 class="modal-title">Create New Category</h4> <button type="button" class="close" data-dismiss="modal" style="color:red">×</button> </div> <div class="modal-body"> <input type="hidden" id="categoryId" /> <input type="hidden" id="status" /> <input type="text" class="form-control" id="categoryName" aria-describedby="emailHelp" placeholder="Enter Category"> </div>
<div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<a onclick="saveCategory()" class="btn btn-primary btn"> Save </a>
</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="#categoryModal" onclick=""><i class="fa fa-plus"></i>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>
$(document).ready(function () {
dataTable = $("#dataTable").DataTable({
"processing": false, "serverSide": false, "paging": true, "destroy": true, pageLength: 25,
dom: '<"html5buttons"B>lTfgitp', "columns": [ { "data": "CategoryName" }, { "data": "Status" },
{
"data": "CategoryId", "width": "50px", "render": function (data) {
return '<a onclick="getCategory(' + data + ')"><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": "[]",
} }); });
function getCategory($CategoryId) { $("#categoryId").val($CategoryId); if ($CategoryId != 0) { jQuery.ajax({ url: '@Url.Action("UpdateCategory", "Home")', data: ({ //insert your parameters to pass to controller CategoryId: $CategoryId }), type: "Get", dataType: "json", contentType: 'application/json; charset=ut-8', success: function (data) { dataTable.ajax.reload(); console.log(data) if (data != null) { $("#categoryId").val(data.CategoryId); $("#categoryName").val(data.CategoryName); $("#status").val(data.Status); } } }); } else { $("#categoryId").val(""); $("#categoryName").val(""); $("#status").val(""); } $("#categoryModal").modal('show'); }
CONTROLLER PAGE
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); }