带有jQuery数据表和API的ASPNET MVC分页

时间:2018-08-23 15:07:52

标签: api model-view-controller pagination datatables

大家好,请参见下面的代码,该代码给出了错误的undefined属性,没有其他详细信息,

MY表“雇员” enter image description here

以及用于分页并从表中返回所需员工数量的存储过程

CREATE PROCEDURE [dbo].[GetEmployees]
@DISPLAYSTART INT,
@DISPLAYLENGTH INT,

@ID INT = NULL,
@NAME NVARCHAR(250) = NULL
AS
BEGIN
DECLARE @FIRSTRECORD INT, @LASTRECORD INT 
SET @FIRSTRECORD = @DISPLAYSTART;
SET @LASTRECORD = @DISPLAYSTART + @DISPLAYLENGTH;

WITH CTE_Employees AS
(
SELECT ROW_NUMBER() OVER(ORDER BY [ID] DESC) AS ROWNUMBER
      ,COUNT(*) OVER() AS TOTALCOUNT
      ,[Id]
      ,[Name]
      ,[FullName]
      ,[Salary]
      ,[Overtime]
  FROM [dbo].[Employees]
  WHERE (Id = @ID OR @ID IS NULL) AND ([Name] = @NAME OR @NAME IS NULL)
)

SELECT * FROM CTE_Employees
WHERE ROWNUMBER > @FIRSTRECORD AND ROWNUMBER <= @LASTRECORD
END

API和视图

Employee.cs模型

public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string FullName { get; set; }
        public int Salary { get; set; }
        public int  Overtime { get; set; }
    }

EmployeesViewModel.cs

public class EmployeesViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string FullName { get; set; }
        public int Salary { get; set; }
        public int Overtime { get; set; }
    }

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div class="row">
    <div class="form-group">
        <div class="col-sm-3">
            <input type="text" id="txtId" class="form-control" />
        </div>
        <div class="col-sm-3">
            <input type="text" id="txtName" class="form-control" />
        </div>
        <div class="col-sm-3">
            <button id="btnSearch" class="btn btn-primary">Search</button>
        </div>
    </div>
</div>

<div class="row">
    <table class="table table-responsive" id="tblProperties">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>F/Name</th>
                <th>Salary</th>
                <th>Overtime</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSearch").click(function () {
                var employeeObject = {
                    Name: $("#txtName").val(),
                    Id: $("#txtId").val()
                };

                $("#tblProperties").DataTable({
                    "processing": true,
                    "serverSide": true,
                    bFilter: false,
                    bInfo: false,
                    "ajax": {
                        type: 'POST',
                        url: '/api/employees',
                        data: employeeObject,
                        dataType: "html",
                        contentType: 'application/json; charset=utf-8'
                    },
                    "columns": [
                        { data: "Id" },
                        { data: "Name" },
                        { data: "FullName" },
                        { data: "Salary" },
                        { data: "Overtime" },
                    ]

                });
            });
        });
    </script>
};

和API代码

public class EmployeesController : ApiController
    {
        string cs = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
        private ApplicationDbContext _context;
        public EmployeesController()
        {
            _context = new ApplicationDbContext();
        }

        // GET api/<controller>
        public IHttpActionResult  GetEmployees(int iDisplayLength, int iDisplayStart, EmployeesViewModel employeeObject)
        {
            using (SqlConnection con = new SqlConnection(cs))
            {
                List<EmployeesViewModel> employees = new List<EmployeesViewModel>();
                int filteredcount = 0;
                using (SqlCommand cmd = new SqlCommand("GetEmployees", con))
                {
                    int DisplayLength = iDisplayLength;
                    int DisplayStart = iDisplayStart;
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@DISPLAYLENGTH", DisplayLength);
                    cmd.Parameters.AddWithValue("@DISPLAYSTART", DisplayStart);
                    cmd.Parameters.AddWithValue("@ID", null);
                    cmd.Parameters.AddWithValue("@NAME", null);
                    con.Open();
                    using (SqlDataReader reader = cmd.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            EmployeesViewModel employee = new EmployeesViewModel();
                            filteredcount = Convert.ToInt32(reader["TOTALCOUNT"]);
                            employee.Id = Convert.ToInt32(reader["Id"]);
                            employee.Name = reader["Name"].ToString();
                            employee.Salary = Convert.ToInt32(reader["Salary"]);
                            employee.Overtime = Convert.ToInt32(reader["Overtime"]);

                            employees.Add(employee);
                        }
                    }
                }

                var result = new
                {
                    iTotalRecords = _context.Employees.Count(),
                    iTotalDisplayRecord = filteredcount,
                    aaData = employees
                };



                return Ok(result);
            }

        }
    }

**如果我手动调用api,它的结果很好,但是我通过jquery datatable ajax方法调用它,它给出了两种错误No 1:无法读取未定义的属性No 2:Datatable无法再次重新初始化* *

谢谢

0 个答案:

没有答案