如何使用 Ajax.ActionLink 将数据发布到 actionResult 方法？

Question

这是我的视图代码，其中 ActionLink 方法将数据发布到控制器的 ActionResult 方法：

@foreach (var item in Model)
        {
            <tr>
                <td>@item.Deal_Date</td>
                <td>@item.Total_Amount_Remaining</td>
                <td>@item.Dealer_Name</td>
                <td>@item.Validity_Date</td>
                <td>@item.Location</td>
                <td>@item.Deal_Amount</td>
                <td>@item.Client_Info.Client_Name</td>
                <td>@Html.ActionLink("Recieve payment", "RecievePayment", new { id = item.Deal_ID })</td>

            </tr>
        }

在上面的代码中，@Html.ActionLink 方法通过 Route Values 参数将 'id' 发送到 Controller 的 'ReceivePayment' Action 方法。以下是我的控制器的 Action Method 的代码：

public ActionResult RecievePayment(decimal id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Sell_Deal sell_deal = db.Sell_Deal.Find(id);
        if (sell_deal == null)
        {
            return HttpNotFound();
        }
        ViewBag.Client_ID = new SelectList(db.Client_Info, "Client_ID", "Client_Name", sell_deal.Client_ID);
        return View(sell_deal);
    }

我想用 Ajax.ActionLink 方法实现同样的效果。以下是我的 Ajax 方法在视图中的代码：

<script>
$(document).ready(function () {

    $("#BtnSearch").click(function () {
        var SearchBy = $("#SearchBy").val();
        var SearchValue = $("#Search").val();
        var SetData = $("#DataSearching");
        SetData.html("");
        debugger;
        $.ajax({
            type: "POST",
            contentType: "html",
            url: "/SelectDeal/GetSearchingData?SearchBy=" + SearchBy + "&SearchValue=" + SearchValue,
            success: function (result) {
                debugger;
                if (result.length == 0) {
                    SetData.append('<tr style="color:red"><td colspan="3">No Match Data</td></tr>');
                }
                else {
                    $.each(result, function (i, item) {
                        //var clientName = item.

                        var DealDateString = item.Deal_Date;
                        var valDealDate = new Date(parseInt(DealDateString.replace(/(^.*\()|([+-].*$)/g, '')));
                        var finalDealDate = valDealDate.getMonth() + 1 + "/" + valDealDate.getDate() + "/" + valDealDate.getFullYear();
                        var ValidityDateString = item.Validity_Date;
                        var valValidityDate = new Date(parseInt(ValidityDateString.replace(/(^.*\()|([+-].*$)/g, '')));
                        var finalValidityDate = valValidityDate.getMonth() + 1 + "/" + valValidityDate.getDate() + "/" + valValidityDate.getFullYear();
                        var val = '<tr>' +
                       '<td>' + finalDealDate + '</td>' +
                       '<td>' + item.Total_Amount_Remaining + '</td>' +
                       '<td>' + item.Dealer_Name + '</td>' +
                       '<td>' + finalValidityDate + '</td>' +
                       '<td>' + item.Location + '</td>' +
                       '<td>' + item.Deal_Amount + '</td>' +
                       '<td> @Ajax.ActionLink("Receive Payment", "RecievePaymentAjax", new { id = item.Deal_ID }, new AjaxOptions { HttpMethod = "POST" }) <td>' +
                       '</tr>';

                        SetData.append(val);
                    });
                }
            },
            error: function (data) {
                alert(data);
            }
        });
    });
});

在上面的代码中，我想将“Id”值发布到我的控制器的“RecievePaymentAjax”Action Method 以进行进一步处理，但在 Ajax.ActionLink 的路由值参数中，我收到错误“名称项确实”在当前上下文中不存在'。我怎么解决这个问题？如果有任何其他方法可以实现这一点，请建议我。

Answer 1

您不能将 javascript 变量值作为路由值参数值传递给 Ajax.ActionLink 方法调用，因为此方法是 C# 代码，它会在服务器中执行。 razor 视图引擎执行服务器代码的响应将发送到浏览器，并由浏览器的 javascript 引擎执行 javascript。

C#代码在服务器中执行，js代码在浏览器中执行。

Ajax.ActionLink 基本上为带有一些 html5 数据属性的a 标记生成标记，jquery.unobtrusive-ajax 脚本使用这些标记将这个标记上的正常链接点击行为转换为它的 ajaxified 版本。好消息是，我们可以做同样的事情。

所以只需创建一个锚标记，给它一个 css 类，我们将使用它来连接 ajax 发布行为

"<td><a class='myAjaxlink' 
        href='@Url.Action("RecievePayment","Home")?id=" + item.Id+"'>My link</a></td>" +

这段代码仍然使用Url.Action 辅助方法来生成基本url（不带参数），并且我们使用我们的javascript 变量显式地将查询字符串id 添加到它。如果你检查视图源，你会看到类似

<a href='./Home/RecievePayment?id=101' class='myAjaxlink'>My link</a>

假设item.Id 在您的集合中的某行具有101 的值。

现在将一些点击事件处理程序连接到我们的带有myAjaxlink css 类的标签以使其成为 ajaxy。

$(function () {

    $(document).on("click","a.myAjaxlink", function(e) {
            e.preventDefault();  // Stop the normal navigation behavior
            var url = $(this).attr("href");  // Get the href of clicked link
            $.post(url);  // Make an ajax post
    });

});

此外，从 ajax 调用的操作方法返回视图结果也是没有意义的。您可以返回 json 结果或部分视图结果。如果您想使用从 ajax 调用返回的响应，请将 done 回调事件添加到您的 $.post 方法中。

$.post(url).done(function(r) {
    alert(r);
});