Pass multiple parameter to Ajax from link in MVC Core

Question

I have this link

<a asp-action="goPay" asp-route-id="@item.Appid" asp-route-mem="@item.Memid" asp-route-amt="@item.Areq" asp-controller="Withdraw" class="btn btn-outline-primary mx-1 btn-xs">Pay</a>

I want to pass asp-route-id="@item.Appid" asp-route-mem="@item.Memid" asp-route-amt="@item.Areq" to Ajax, I am totally lost on how to receive them in Ajax. I have searched the web, maybe I am not asking the right query so not getting the answers.

Here is the full view, as you can see the Ajax part has not been written as I don't know how to catch the parameters. I also Know I can use closet(tr) but some of the parameters are not in the table.

<section class="content">
    <div class="container-fluid">

        <h3> Approved for Payment </h3>
        <hr />

        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-edit"></i>
                            Pending Withrawals
                        </h3>
                    </div>
                    <div class="card-body small table-responsive">

                        @if (Model.Count() > 0)
                        {

                            @*scrolling bootstarp table, check css in top of this page*@
                            <div class="table-wrapper-scroll-y my-custom-scrollbar">

                                <table class="table table-bordered table-striped mb-0">
                                    <thead>
                                        <tr>
                                            <th scope="col">
                                                @Html.DisplayNameFor(model => model.Memid)
                                            </th>
                                            <th scope="col">
                                                @Html.DisplayNameFor(model => model.Areq)
                                            </th>
                                            <th scope="col">
                                                @Html.DisplayNameFor(model => model.WhoDid)
                                            </th>
                                            <th scope="col">
                                                @Html.DisplayNameFor(model => model.DateDid)
                                            </th>
                                            <th scope="col">
                                                Actions
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model)
                                        {
                                            <tr>
                                                <td>
                                                    @*@Html.DisplayFor(modelItem => item.Member.Fname)*@
                                                    @String.Concat(item.Member.Fname, " ", item.Member.Sname)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.Areq)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.dUser.Name)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.DateDid)
                                                </td>
                                                <td>
                                                    <a asp-action="goPay" asp-route-id="@item.Appid" asp-route-mem="@item.Memid" asp-route-amt="@item.Areq" asp-controller="Withdraw" class="btn btn-outline-primary mx-1 btn-xs">Pay</a>
                                                    <a asp-action="dontPay" asp-route-id="@item.Appid" asp-controller="Withdraw" class="btn btn-outline-danger mx-1 btn-xs">Cancel Payment</a>
                                                </td>
                                            </tr>

                                        }

                                    </tbody>
                                </table>

                            </div>
                        }
                        else
                        {
                            <h5>No approved payments for you yet, contact the approver.</h5>
                        }

                    </div>
                </div>
            </div>
        </div>

        
    </div>

</section>

<div class="form-row">
    <partial name="_PaymentComplete", model="new ToxAccInfo()" />
</div>

@section Scripts{
    @{
        <partial name="_ValidationScriptsPartial" />
    }

<script type="text/javascript">
    $(document).ready(function () {

    }
</script>

Answer 1

After searching I got this sometime ago, but this worked for me. I hop this helps another that's confused as I was.

I changed the button from:

<td>
   <a asp-action="goPay" asp-route-id="@item.Appid" asp-route-mem="@item.Memid" asp-route-amt="@item.Areq" asp-controller="Withdraw" class="btn btn-outline-primary mx-1 btn-xs">Pay</a>
   <a asp-action="dontPay" asp-route-id="@item.Appid" asp-controller="Withdraw" class="btn btn-outline-danger mx-1 btn-xs">Cancel Payment</a>
</td> 

to:

 <td>
        <a id="@item.Appid" asp-route-id="@item.Appid" asp-route-mem="@item.Memid" asp-route-amt="@item.Areq" asp-route-nam="@String.Concat(@item.Member.Fname, " ", @item.Member.Sname)" asp-controller="Withdraw" class="btn btn-outline-primary mx-1 btn-xs">Pay</a>
        <a asp-action="dontPay" asp-route-id="@item.Appid" asp-controller="Withdraw" class="btn btn-outline-danger mx-1 btn-xs">Cancel Payment</a>
</td>

Then fixed the jquery part like this:

         $('a.btn-outline-primary').click(function () {
            event.preventDefault(); // prevent default behavior of link click
            var id = $(this).attr('id');
            var mem = $(this).attr('asp-route-mem');
            var amt = $(this).attr('asp-route-amt');
            var nam = $(this).attr('asp-route-nam');
            var url = '@Url.Content("~/")' + "Withdraw/goPay";
            //console.log("Clicked");
            // now make an AJAX request to server by passing some data
            //alert("link clicked " + id + "\n" + mem + "\n" + amt );

            $("#dcomplete").load(url, { id: id, mem: mem, amt: amt, nam: nam });

        });

Thank you everyone for your pointers.

Answer 2

You can try to add a button in <td></td> which contains <a></a>,and when click the button,get the data from link:

 <td>
        <a asp-action="goPay" asp-route-id="@item.Appid" asp-route-mem="@item.Memid" asp-route-amt="@item.Areq" asp-controller="Withdraw" class="btn btn-outline-primary mx-1 btn-xs">Pay</a>
        <a asp-action="dontPay" asp-route-id="@item.Appid" asp-controller="Withdraw" class="btn btn-outline-danger mx-1 btn-xs">Cancel Payment</a>
        <button onclick="callAjax(this)">callAjax</button>
 </td>

js:

    function callAjax(t) {
                var href = $(t).parent().find("a")[0].href.split("/");
                var id = href[href.length - 1].split("?")[0];
                var mem = href[href.length - 1].split("?")[1].split("&")[0].split("=")[1];
                var amt = href[href.length - 1].split("?")[1].split("&")[1].split("=")[1];
               //call ajax here
   }