How to pass clicked Jquery Datatables row to controller asp.net mvc

Question

I need to send send the whole row (and its data) to the controller method on clicking of some button in the row. I am newbie to asp.net mvc.

That my table definition:

<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>

I want when im click on the dropdown "Show" button, to pass the row object to the controller and make some operations on it.

The table look like this:

Have a look at this [SO Question](http://stackoverflow.com/questions/39397202/how-to-get-id-value-by-clicking-edit-button-on-the-same-row-of-datatable) — mmushtaq, Jan 07 '17 at 18:53

score 0 · Answer 1 · answered Jan 07 '17 at 20:08

First add a function referance to the "SHOW" anchor like this;

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

second, add a name or id to element for creating a json element's properties, as same as your mvc JsonResult model parameter. (The json element must have same properties with the jsonResult which is you post the data. If you dont have a model for this, you can create a data transfer object class has same properties. Or hard way; give all parameters to the action :)

change the table html like this;

<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>

way 1 example;

 // 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();
 }

way 2 example;

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

third, you need postRow function (put this in the table view after the jquery reference)

<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>

finally, if you want to use ActionResult or PartialViewResult instead of JsonResult you need to create a view. Plus, if you use ActionResult you must post data while submit a form.

If i give to each , id "td1", "td"2 and so on, its not good because i have many row, i dont need iterator variable for the id ? — Ballon Ura, Jan 08 '17 at 13:26
You need a property name inside of td or child elements. may be you can use Html.LabelFor instead of Html.DisplayFor.. then you can catch the property name from label name.. try this. — Serhat MERCAN, Jan 08 '17 at 14:46

How to pass clicked Jquery Datatables row to controller asp.net mvc

1 Answers1