Pass Object Parameter from javascript\ajax to function in Controller

Question

I have a table that i want to be able to update the status of each line that checkbox is on (see attached screenshot)

The checkbox propery in the Model is Not Mapped to the database ([NotMapped]) Html:

<div class="row">
    <div class="col-12 text-right">
        <button class="btn btn-primary" onclick="ApproveStatus()">Approve Checked Lines</button>
    </div>
</div>

javaScript:

@section Scripts{
    <script type="text/javascript">
        function ApproveStatus() {
            var pdata = new FormData();

            swal({
                title: "Are you sure?",
                text: "Once Updated, you will not be able to Undo this",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
                .then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            url: "PaymentHistory/ApproveStatus",
                            type: "POST",
                            data: pdata,
                            processData: false,
                            contentType: false,
                            success: function (data) {
                                swal("Success!", {
                                    icon: "success",
                                });
                            }
                        });
                        setTimeout(function () {
                            location.reload()
                        }, 100);
                    } else {
                        swal("Nothing Changed!");
                    }
                });
        }
    </script>
}

And in the Controller i have the function (haven't written the logic yet)

[HttpPost]
public IActionResult ApproveStatus()
{
}

table in html:

<table id="tblData" class="table table-striped table-bordered" style="width:100%">
    <thead class="thead-dark">
        <tr class="table-info">
            <th>Address</th>
            <th>Payment Type</th>
            <th>Amount</th>
            <th>Payment Date</th>
            <th>Status</th>
            <th></th>
    </thead>
    @foreach (PaymentHistory paymentHistory in Model)
    {
        <tr>
   <td>@ViewBag.getPaymentAddress(paymentHistory.SentFromAddressId).ToString()</td>     <td>@ViewBag.getPaymentType(paymentHistory.SentFromAddressId).ToString()</td>
            <td>@paymentHistory.Amount$</td>
            <td>@paymentHistory.PayDate</td>
            <td>@paymentHistory.Status</td>
            @if (paymentHistory.Status != "Approved")
            {
                <td>
                    <div class="text-center">
                        <input type="checkbox" asp-for="@paymentHistory.isChecked"/>
                    </div>
                </td>
            }
            else
            {
                <td></td>
            }
        </tr>
    }
</table>

My only issue is that i want to pass the Object from the View (that contains the lines and status of the checkbox) to the function in the controller as a parameter, Any ideas how can i do this? Thank you

Can you share how the html for the check boxes were put togather? — Md Rahatur Rahman
– Md Rahatur Rahman, Commented Oct 19, 2020 at 9:23
That is my question, how to pass that array of id from javaxcript to Ajax and then to the controller :) — Kobi
– Kobi, Commented Oct 19, 2020 at 9:53
You can try to add a hidden filed for SentFromAddressId, so that you can get it for each checked row. — Fei Han
– Fei Han, Commented Oct 19, 2020 at 9:54

Fei Han · Accepted Answer · 2020-10-19 10:30:02Z

1

i want to pass the Object from the View (that contains the lines and status of the checkbox) to the function in the controller as a parameter, Any ideas how can i do this?

To achieve your requirement, you can try to add a hidden field for SentFromAddressId field, like below.

<td>
    <div class="text-center">
        <input type="hidden" asp-for="@paymentHistory.SentFromAddressId" />
        <input type="checkbox" asp-for="@paymentHistory.isChecked" />
    </div>
</td>

then you can get the sentFromAddressId of each checked row and populate it in form data object.

var pdata = new FormData();

$("input[name='paymentHistory.isChecked']:checked").each(function (index, el) {
    var sentFromAddressId = $(this).siblings("input[type='hidden']").val();
    pdata.append("Ids", sentFromAddressId);
})

and post the data to action method with following code snippet.

$.ajax({
    type: 'POST',
    url: '/PaymentHistory/ApproveStatus',
    data: pdata,
    processData: false,
    contentType: false,
    datatype: 'json',
    success: function (res) {
        //...
    }
});

ApproveStatus action method

public IActionResult ApproveStatus(int[] Ids)
{
    //code logic here
    //update corresponding record based on id within Ids

answered Oct 19, 2020 at 10:30

Fei Han

28k1 gold badge35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kobi Over a year ago

Amazing, Thank you!

Haris Khurshid · Accepted Answer · 2020-10-19 09:46:14Z

0

Get all checked checkboxes id in an array, use that array to update table

answered Oct 19, 2020 at 9:46

Haris Khurshid

3743 silver badges8 bronze badges

Collectives™ on Stack Overflow

Pass Object Parameter from javascript\ajax to function in Controller

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related