如何将现有数据库记录放入 GirdView 以在 ASP.NET MVC 中执行 CRUD 操作？

Question

我有一个模型class。

 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; }


    }
}

我有一个数据库 table 也填充了记录。我想在 MVC 中实现一个 editable 网格视图控件。我应该如何处理这个？如果有人能给我关于 View.cshtml 文件的想法，那将会很有帮助。

Answer 1

对于此要求，有许多可用的第 3 方网格。我给你一个名为 jTable which is a nice grid to show your data and perform CRUD operations. I have also setup a sample repository for your case with Employee data. I hope this helps you out. The CRUD operations in the grid are performed on the Controller side. The link to the repository can be found 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：

jquery-ui.css
jtable.css

和 JS

jquery.jtable.js

从 Scripts 文件夹中，并在您的 View 中引用它们。

如何将现有数据库记录放入 GirdView 以在 ASP.NET MVC 中执行 CRUD 操作？

How to get existing database record into an GirdView for performing CRUD operations in ASP.NET MVC?

c#

asp.net-mvc

crud