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

时间:2018-01-21 13:27:12

标签: c# jquery ajax asp.net-mvc razor

这是我的视图代码,其中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方法发送了&#39; id&#39;到了&#39; ReceivePayment&#39;路径值参数控制器的操作方法。以下是我的控制器的行动方法的代码:

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

在上面的代码中,我想发布&#39; Id&#39;价值收入&RecifePaymentAjax&#39;我的控制器的Action方法用于进一步处理,但在Ajax.ActionLink的路由值参数中,我收到错误&#39;当前上下文中不存在名称项&#39;。我怎么解决这个问题?如果有任何其他方法可以实现这一点,请建议我。

1 个答案:

答案 0 :(得分:0)

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

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

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

所以简单地创建一个锚标记,给它一个css类,我们将用它来连接ajax帖子行为

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

此代码仍在使用Url.Action辅助方法生成基本网址(不带参数),我们使用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调用的action方法返回视图结果也没有意义。您可以返回json结果或部分视图结果。如果您想使用从ajax调用返回的响应,请将done回调事件添加到您的$.post方法。

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