如何将单击的 Jquery Datatables 行传递给控制器​​ asp.net mvc

Question

单击行中的某个按钮时，我需要将整行（及其数据）发送到控制器方法。我是 asp.net mvc 的新手。

那我的表定义：

<tr>

    <td align="center">
        <div class="dropdown">
            <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button>
            <div id="@TableRowId" class="dropdown-content">
                <a href="#">Show</a>
                <a href="#">Edit</a>
            </div>
        </div>
    </td>

    <td align="center">
        <a class="btn btn-default"><span class="glyphicon glyphicon-usd"></span></a>
    </td>

    <td>

        @Select Case item.Status
        Case 0
        @<b style="color:red">Cancelled</b>
        Case 1
        @<b style="color:green">OK</b>

        End Select

    </td>

    <td>
        @Html.DisplayFor(Function(modelItem) item.AxCompany)
    </td>

    <td>
        @Html.DisplayFor(Function(modelItem) item.CreditCardType)
    </td>

    <td>
        @Html.DisplayFor(Function(modelItem) item.CreditCardInternalIdentifier)
    </td>

    <td>
        @Html.DisplayFor(Function(modelItem) item.CreditCardExpirationDate)
    </td>

    <td>
        @Html.DisplayFor(Function(modelItem) item.CreditCardIdentifier)
    </td>

</tr>

我希望当我单击下拉“显示”按钮时，将行对象传递给控制器​​并对其进行一些操作。

表格如下所示：

Answer 1

首先像这样为“SHOW”锚添加一个函数引用；

<div id="@TableRowId" class="dropdown-content">
    <a onclick="postRow(this)">Show</a>
    <a href="#">Edit</a>
</div>

其次，为元素添加名称或 id 以创建 json 元素的属性，与您的 mvc JsonResult 模型参数相同。 （json 元素必须与您发布数据的 jsonResult 具有相同的属性。如果您没有为此的模型，您可以创建一个具有相同属性的数据传输对象类。或者硬方式；将所有参数提供给操作： )

像这样更改表格html；

<tr>
    <td align="center">
        <div class="dropdown">
            <button onclick="DropdownShow(this)" class="btn btn-default     glyphicon glyphicon-picture"></button>
            <div id="@TableRowId" class="dropdown-content">
                <a href="#">Show</a>
                <a href="#">Edit</a>
            </div>
        </div>
    </td>

    <td align="center" id="td1">
    <a class="btn btn-default"><span class="glyphicon glyphicon-usd"></span>    </a>
    </td>

    <td id="td2">

        @Select Case item.Status
        Case 0
        @<b style="color:red">Cancelled</b>
        Case 1
        @<b style="color:green">OK</b>

        End Select

    </td>

    <td id="td3">
        @Html.DisplayFor(Function(modelItem) item.AxCompany)
    </td>

    <td id="td4">
        @Html.DisplayFor(Function(modelItem) item.CreditCardType)
    </td>

    <td id="td5">
        @Html.DisplayFor(Function(modelItem) item.CreditCardInternalIdentifier)
    </td>

    <td id="td6">
        @Html.DisplayFor(Function(modelItem) item.CreditCardExpirationDate)
    </td>

    <td id="td7">
        @Html.DisplayFor(Function(modelItem) item.CreditCardIdentifier)
    </td>
</tr>

方式 1 示例；

 // rowDTO.css created for catching the posted data
 public class rowDTO
 {
    public string td1 {get;set;}
    public string td2 {get;set;}
    public string td3 {get;set;}
    public string td4 {get;set;}
    public string td5 {get;set;}
    public string td6 {get;set;}
    public string td7 {get;set;}
 }

 // in the controller
 [HttpPost]
 public JsonResult catchRowData(rowDTO data)
 {
     // put your codes..
     return View();
 }

方式 2 示例；

[HttpPost]
public JsonResult catchRowData(string td1, string td2, string td3, string td4, string td5, string td6, string td7)
{
     // put your codes 
     return View();
}

第三，你需要postRow函数（把这个放在jquery引用之后的table view中）

<script>
    function postRow(tr){
        var data={};

        $(tr).closest("tr").find("td[id]").each(function(ind,td){

             $(data).attr($(td).attr("id"), $(td).html() );
        });

        $.post("/yourController/catchRowData",data).done(function(result){

            // play with result :)

        }).fail(function(){

            alert("some things wrong!"); // probably could't find the action

        });
    }
</script>

最后，如果你想使用 ActionResult 或 PartialViewResult 而不是 JsonResult 你需要创建一个视图。另外，如果您使用 ActionResult，您必须在提交表单时发布数据。