在 MVC Core 中将多个参数从 link 传递给 Ajax

Question

我有这个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>

我想将 asp-route-id="@item.Appid" asp-route-mem="@item.Memid" asp-route-amt="@item.Areq" 传递给 Ajax，我完全不知道如何在 Ajax 中接收它们。我在网上搜索过，也许我问的问题不对，所以没有得到答案。

这是完整的视图，你可以看到 Ajax 部分还没有写，因为我不知道如何捕获参数。我也知道我可以使用 closet(tr) 但一些参数不在 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

你可以尝试在<td></td>中添加一个按钮，其中包含<a></a>，点击按钮时，从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
   }

Answer 2

经过搜索，我之前得到了这个，但这对我有用。我希望这可以帮助另一个和我一样困惑的人。

我更改了按钮：

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

至：

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

然后像这样修复 jquery 部分：

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

        });

谢谢大家指点

在 MVC Core 中将多个参数从 link 传递给 Ajax

Pass multiple parameter to Ajax from link in MVC Core

c#

jquery

asp.net

asp.net-core

model-view-controller