模型不通过DataTables.net在Razor Page .cshtml中绑定。

发布于 2025-02-11 18:47:05 字数 3789 浏览 1 评论 0原文

我是ASP.NET Core Razor页面的新手，并尝试使用DataTables.net构建示例应用程序。

我试图从.CS将数据发送到CSHTML页面，但可以看到数据。如果我尝试以JSON格式查看数据，但是DataTable不会与之相关。

以下是相同的代码。

通过Nuget Package Manager for解决方案，已安装DataTables.net和DataTables.net-DT

我需要在表下显示的示例数据，并用datatables.net

cshtml.cs

namespace Razor_Harshit.Pages
{
public class IndexModel : PageModel
{
   List<Employees> _employee = new List<Employees>()
    {
        new Employees(){ Name="Harshit", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Nitin", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Narasi", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Shivani", 
Email="[email protected]",Gender="FeMale",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Vineet", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Kaashu", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"}
    };

    public void OnGet()
    {

    }

    public IActionResult OnGetDisplay()
    {
        return new JsonResult(_employee);
        //return Page();
    }
}

public class Employees
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Gender { get; set; }
    public string Mobile { get; set; }
    public string City { get; set; }
    }
}

cshtml

@page
@model Razor_Harshit.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
}

<html>
<head>
<link rel="stylesheet" type="text/css" 
href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" 
src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>    
<script>
    $(document).ready(function () {
        debugger;
        $('#table1').dataTable({
            pageLength: 2,
            ajax: "?handler=Display",                  ,
            columns: [
                { data: 'Name' },
                { data: 'Email'},
                { data: 'Gender' },
                { data: 'Mobile' },
                { data:'City' }
            ]
        });
    });
</script>
</head>
<body>
<div>
    
</div>
<div>
    <table id="table1" class="display" width="100%">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Mobile</th>
            <th>City</th>
        </tr>
    </table>
</div>
</body>
</html>

bended bended bended 在此处输入图像描述在此处输入图像描述

原文

I am new to Asp.Net Core Razor Pages and trying to build a sample application with Datatables.net.

I am trying to send data to cshtml page from .cs but can see the data. If I try to view the data in JSon format can see then but datatable is not getting binded with it.

Below is the code for the same.

Installed datatables.net and datatables.net-dt through Nuget Package Manager for Solution

I need the sample data to be showed under the tables with the UI classses binded with datatables.net

CSHTML.CS

namespace Razor_Harshit.Pages
{
public class IndexModel : PageModel
{
   List<Employees> _employee = new List<Employees>()
    {
        new Employees(){ Name="Harshit", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Nitin", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Narasi", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Shivani", 
Email="[email protected]",Gender="FeMale",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Vineet", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"},
        new Employees(){ Name="Kaashu", 
Email="[email protected]",Gender="Male",Mobile="1234567890",City="Bengaluru"}
    };

    public void OnGet()
    {

    }

    public IActionResult OnGetDisplay()
    {
        return new JsonResult(_employee);
        //return Page();
    }
}

public class Employees
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Gender { get; set; }
    public string Mobile { get; set; }
    public string City { get; set; }
    }
}

CSHTML

@page
@model Razor_Harshit.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
}

<html>
<head>
<link rel="stylesheet" type="text/css" 
href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" 
src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>    
<script>
    $(document).ready(function () {
        debugger;
        $('#table1').dataTable({
            pageLength: 2,
            ajax: "?handler=Display",                  ,
            columns: [
                { data: 'Name' },
                { data: 'Email'},
                { data: 'Gender' },
                { data: 'Mobile' },
                { data:'City' }
            ]
        });
    });
</script>
</head>
<body>
<div>
    
</div>
<div>
    <table id="table1" class="display" width="100%">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Mobile</th>
            <th>City</th>
        </tr>
    </table>
</div>
</body>
</html>

Results :
enter image description here
enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝海 2025-02-18 18:47:05

请这样修改您的代码：

<html>
<head>
<script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>    
<script>
    $(document).ready(function () {
        debugger;
        $.noConflict();
        $('#table1').dataTable({
            pageLength: 2,
            ajax: {url: "?handler=Display",dataSrc:""},                  
            columns: [
                { data: 'name' },
                { data: 'email'},
                { data: 'gender' },
                { data: 'mobile' },
                { data:'city' }
            ]
        });
    });
</script>
</head>
<body>
<div>
    
</div>
<div>
    <table id="table1" class="display" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Gender</th>
                <th>Mobile</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
</html>

您需要注意以下几点：

首先，默认情况下，传递的参数名称将更改为所有小写。

其次，对jQuery库的引用应在数据列表之前。

第三，如果收到此错误：“ typeError：$（...）。数据词不是函数”，则可以调用$。noconflict（）。

第四，更改AJAX属性以匹配参数类型。

第五，您需要添加＆lt; tbody＆gt;标签，否则将更换标头行。

测试结果：

Please modify your code like this:

<html>
<head>
<script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>    
<script>
    $(document).ready(function () {
        debugger;
        $.noConflict();
        $('#table1').dataTable({
            pageLength: 2,
            ajax: {url: "?handler=Display",dataSrc:""},                  
            columns: [
                { data: 'name' },
                { data: 'email'},
                { data: 'gender' },
                { data: 'mobile' },
                { data:'city' }
            ]
        });
    });
</script>
</head>
<body>
<div>
    
</div>
<div>
    <table id="table1" class="display" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Gender</th>
                <th>Mobile</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
</html>

You need to pay attention to the following points：

First,The passed parameter name will be changed to all lowercase by default.

Second,The reference to the jquery library should be before datatables.

Third,If you get this error: "TypeError: $(...).DataTable is not a function", you can call $.noConflict().

Fourth,Change the ajax attribute to match the parameter type.

Fifth,You need to add the <tbody> tag, otherwise the header row will be replaced.

Test Result: