如何使用参数 ASP.NET MVC 调用 Ajax 数据表？答案

【问题标题】：How to call Ajax datatables with parameter ASP.NET MVC?如何使用参数 ASP.NET MVC 调用 Ajax 数据表？
【发布时间】：2020-07-25 20:20:04
【问题描述】：

我想在单击标签时向控制器发送参数，但始终为空。使用数据表ajax时如何获取参数？请帮帮我。

我在控制器中的代码：

public JsonResult Getdata(string isvk)
{
        var orders = from o in db.Orders
                     select o;

        if (isvk == null)
        {
            return Json(new { data = orders }, JsonRequestBehavior.AllowGet);
        }

        switch (isvk)
        {
            case "canceled":
                orders = db.Orders.Where(o => o.Status == -1 || o.Status == -2);
                break;

            case "pending":
                orders = db.Orders.Where(o => o.Status == 0);
                break;

            case "approved":
                orders = db.Orders.Where(o => o.Status == 1);
                break;

            case "delivered":
                orders = db.Orders.Where(o => o.Status == 2);
                break;

            default:
                orders = db.Orders;
                break;
        }

        return Json(new { data = orders.ToList() }, JsonRequestBehavior.AllowGet);
}

标签<a>在表外：

<a href="@Url.Action("Index","Cart", new {isvk = "pending" })">peding</a>

我的脚本：

var datatable = $("#myTable").DataTable({
        ajax: {
            type: "GET",
            url: "@Url.Action("Getdata","Cart")",

    },
    columns: [
        { data: "CodeOrder"},
        { data: "FullName"},
        { data: "Email"},
        { data: "Phone" },
    ]

【问题讨论】：

标签： c# asp.net-mvc razor datatables

【解决方案1】：

要将数据从 DataTables 发送到服务器（即发送到您的控制器），请使用 ajax 函数的 data 选项。所以，首先，添加：

ajax: {
  type: "GET",
  url: "@Url.Action("Getdata","Cart")",
  data: function() {
    return dataToSend;
  }
},

您在document.ready 函数的开头将dataToSend 声明为一个空的JavaScript 对象：

var dataToSend = {};

这是我的<a> 标签的简化版：

<a id="linkOne" linkData="pending" href="#">submit</a>

在dataToSend 声明之后，我为<a> 标签添加了以下点击处理程序：

$("a#linkOne").on('click', function() {
  event.preventDefault();
  var linkDataValue = $( this ).attr( 'linkData' )
  dataToSend = { "linkData": linkDataValue };
  //console.log( dataToSend );
  table.ajax.reload();
});

此代码从<a> 标记中的linkData="pending" 中提取“待定”文本，并将其添加到dataToSend 对象中。

最后，我使用 reload() 触发 DataTable ajax 调用。

在控制器中，此数据将作为标准 URL 查询参数接收（因为您使用的是GET）：

linkData=pending

因此，您可以以通常的方式访问它并相应地格式化您的回复。

在您的情况下，您需要将我的dataToSend 逻辑替换为您所需的逻辑，用于您的特定<a> 标签。

这里很重要的一点是您需要正确创建dataToSend 对象。

对于一个值，它是这样创建的，如上例所示：

{ "linkData": "pending" }

如果您需要发送多个值（例如，如果您正在处理一个表单），那么您可以像这样构建一个 JavaScript 对象：

[
  {
    "name": "fieldOne",
    "value": "x"
  },
  {
    "name": "fieldTwo",
    "value": "y"
  }
]

在这种情况下，对象是一个键对值数组。

对于简单的表单，JavaScript serializeArray() 函数可以提供帮助 - 例如：

$( "#formOne" ).on( "submit", function( event ) {
  event.preventDefault();
  dataToSend = $( "#formOne" ).serializeArray();
  //console.log( dataToSend );
  table.ajax.reload();
});

更新

如果有帮助，这里是我的测试代码的完整 HTML 页面。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Personnel</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Name</th>
            <th>Phone</th>
        </tr>
    </thead>
</table>

<br>
<form id ="formOne">
    <input id="fieldOne" type="text" name="fieldOne"></input>
    <input id="fieldTwo" type="text" name="fieldTwo"></input>
    <input type="submit" value="Submit">
</form>
<br>
<a id="linkOne" linkData="pending" href="#">submit</a>

</div>

<script type="text/javascript">

  $(document).ready(function() {

    var dataToSend = {};

    $( "#formOne" ).on( "submit", function( event ) {
      event.preventDefault();
      dataToSend = $( "#formOne" ).serializeArray();
      //console.log( dataToSend );
      table.ajax.reload();
    });

    $("a#linkOne").on('click', function() {
      event.preventDefault();
      var linkDataValue = $( this ).attr( 'linkData' )
      dataToSend = { linkData: linkDataValue };
      //console.log( dataToSend );
      table.ajax.reload();
    });

    var table = $('#example').DataTable( {
      ajax: {
        url: "http://localhost:7000/personnel",
        method: "POST",
        data: function( ) {
          return dataToSend;
        },
        dataSrc: ''
      },
      "columns": [
        { "data": "id" },
        { "data": "firstname" },
        { "data": "name" },
        { "data": "phone" }
      ]

    } );

  } );

</script>

</body>

</html>

【讨论】：

哦，太酷了，我将参数发送到控制器，数据返回相同的参数，但是 datatable.ajax.reload 不起作用。通知错误：未捕获的类型错误：无法读取未定义的属性“长度”
我在浏览器和视觉上都使用了断点，我注意到在将参数发送到控制器之前调用了 datatable.ajax.reload()。
只是为了检查 - 在我的测试代码中，我使用了这个：var table = $('#example').DataTable( {...});。看起来您正在使用 var datatable 代替。我假设您更新了我的代码示例以解决这个问题。
我添加了完整的客户端代码，以防整体结构对您有所帮助。
我也更新了我的代码，你能帮我检查一下吗？我试过了，但还是不行。

【解决方案2】：

欢迎来到 StackOverflow！

您已经非常接近了，您提供的 sn-ps 很有帮助。您缺少的是您希望数据在不离开页面的情况下更新。以您的方式使用锚标记会将您定向到该页面。此外，您的控制器操作正在返回一个JsonResult，它不会返回任何类型的视图（但在这种情况下是正确的）。

您需要添加一个页面事件，该事件在单击按钮时触发并刷新数据源。

您可以采取几种方法，但这里是其中之一：

<button class="filter-datatable" data-url="@Url.Action("Index","Cart", new {isvk = "pending" })">

// pageScript.js
// jquery, initialization, etc...

$('.filter-datatable').on('click', function() {
    var newSource = $(this).data('url');
    datatable.ajax.url(newSource).load();
}

【讨论】：

请帮帮我！但是当我尝试你的方式时，它不起作用并且发生错误datatables.net/tn/1。我不知道如何解决这个问题，抱歉我第一次使用数据表。
我意识到当我点击按钮时，我无法向Action Getdata发送参数（“pendding”），我不知道使用load data = ajax时如何发送参数。

【解决方案3】：

更新脚本

$(document).ready(function () {
        //test
        var dataToSend = {};
        $("a#linkOne").on('click', function () {
            event.preventDefault();
            var linkDataValue = $(this).data('id')
            var linkurl = $(this).data('url')
            dataToSend = { isvk: linkDataValue };
            datatable.ajax.reload();
        });
        var datatable = $("#myTable").DataTable({
            ajax: {
                type: "GET",
                url: "@Url.Action("Getdata","Cart")",
                data: function () {
                    return dataToSend;
                }
            },
            columns: [
                { data: "CodeOrder" },
                { data: "FullName" },
                { data: "Email" },
                { data: "Phone" },
                
            ],
          
        });
    });

标记<a>:

<a id="linkOne" data-id="pending" href="#">submit</a>

【讨论】：