对于此要求，有许多可用的第 3 方网格。我给你一个名为jTable 的网格示例，它是一个很好的网格，可以显示你的数据并执行 CRUD 操作。我还使用员工数据为您的案例设置了一个示例存储库。我希望这能够帮到你。网格中的 CRUD 操作在 Controller 端执行。可以在here找到存储库的链接。
您的代码结构如下所示：
型号：
using System.ComponentModel.DataAnnotations;
namespace JTableExampleNETFramework.Models
{
public class Employee
{
public int EmployeeId { get; set; }
[Required(ErrorMessage = "Full name Required")]
public string Name { get; set; }
[Required]
public string City { get; set; }
[Required]
public string Department { get; set; }
[Required]
public string Gender { get; set; }
public bool BulkUpdate { get; set; }
}
}
控制器：
using System;
using System.Collections.Generic;
using JTableExampleNETFramework.Models;
using System.Web.Mvc;
namespace JTableExampleNETFramework.Controllers
{
public class HomeController : Controller
{
public ActionResult Employee()
{
return View();
}
//Added as an example to populate our dummy list for employee
[HttpPost]
public JsonResult GetEmployeeData()
{
try
{
//Add to our list
List<Employee> employeeList = new List<Employee>()
{
new Employee(){ EmployeeId =1, Name ="Bill",City="New York",Department="HR",Gender="Male",BulkUpdate=false},
new Employee(){ EmployeeId =2, Name ="Lindsey",City="London",Department="Finance",Gender="Female",BulkUpdate=true},
new Employee(){ EmployeeId =3, Name ="Rahul",City="New Delhi",Department="IT",Gender="Male",BulkUpdate=false},
new Employee(){ EmployeeId =4, Name ="Sameera",City="Istanbul",Department="Operations",Gender="Female",BulkUpdate=true}
};
//var json = JsonConvert.SerializeObject(studentList);
return Json(new { Result = "OK", Records = employeeList, TotalRecordCount = employeeList.Count });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
[HttpPost]
public JsonResult UpdateEmployeeData()
{
//Your logic to update employee data
return Json("Updated Employee Data");
}
[HttpPost]
public JsonResult DeleteEmployeeData()
{
//Your logic to delete employee data
return Json("Delete Employee Data");
}
[HttpPost]
public JsonResult InsertEmployeeData()
{
//Your logic to insert employee data
return Json("Insert Employee Data");
}
}
}
查看：
@{
ViewData["Title"] = "JTable Example";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-
requests">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- STYLES -->
<link href="~/Scripts/jtable/Content/themes/metroblue/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="~/Scripts/jtable/Scripts/jtable/themes/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<!-- SCRIPTS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/jtable/Scripts/jtable/jquery.jtable.js"></script>
</head>
<body>
<div id="EmployeeTableContainer"></div>
<script type="text/javascript">
$(document).ready(function () {
alert("Starting to load the JTable Grid");
$('#EmployeeTableContainer').jtable({
title: 'Employees List',
actions: {
listAction: '/Home/GetEmployeeData',
deleteAction: '/Home/DeleteEmployeeData',
updateAction: '/Home/UpdateEmployeeData',
createAction: '/Home/InsertEmployeeData'
},
fields: {
EmployeeId: {
key: true,
create: false,
edit: false,
list: true,
title: 'Employee ID',
},
Name : {
title: 'Employee Name'
},
City : {
title: 'City'
},
Department : {
title: 'Department'
},
Gender : {
title: 'Gender'
},
BulkUpdate : {
title: 'Is Bulk Update',
list: false,
},
}
});
//Load student list from server
$('#EmployeeTableContainer').jtable('load');
});
</script>
</body>
</html>
注意：为了渲染这个网格，请使用以下CSS：
和JS
来自Scripts 文件夹，并在您的View 中引用它们。