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

debugcn 发表于 Dev

Truong Hoang

单击标签到控制器时，我想发送参数，但始终为null。使用数据表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" },
    ]

安德鲁杰姆斯

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

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

您可以dataToSend在document.ready函数开始时将其声明为空的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();
});

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

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

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

linkData=pending

因此，您可以以通常的方式访问它并相应地设置响应格式。

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

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

对于一个值，将按以下示例所示创建：

{ "linkData": "pending" }

如果您需要发送多个值（例如，如果您正在处理表单），则可以构建一个JavaScript对象，如下所示：

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

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

对于简单的表单，JavaScriptserializeArray()函数可以帮助实现这一点-例如：

$( "#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。