Question

我是jquery ajax编程的新手，我遇到了问题。我有一个超链接文本，可以通过clikced来订购产品。我希望单击此链接，并使用jquery ajax呈现部分视图。我不能让它工作，我不知道为什么。希望有人会帮忙。

这是我的html操作链接。所以我循环浏览了一系列产品。当用户按下链接时，将向控制器发送productID和tableID。

视图在div中呈现：

<div id='divResult'>
    @Html.Action("TableTransactions", new { tableID = 2 });
</div>

@Html.ActionLink(item.Omschrijving,"Orders","Tables",
new { tableID = Request.Params["tableID"]), productID = item.ProductID },
            new { @class = "UpdateTransactionLink" });

这是控制器方法：

public ActionResult TableTransactions(int? tableID, int? productID)
{
 return PartialView(transactionBL.TransactionList(tableID.Value));  
}

这是ajax jquery：

<script type="text/javascript">

    $(document).ready(function () {
        $('.UpdateTransactionLink').click(function () {
            alert("Clicked via ajax");

            $.ajax({
                url: "/Tables/TableTransactions",
                datatype: "text",
                type: "POST",
                success: function (data) {
                    $('#divResult').html(data);
                },
                error: function () {
                    $("#divResult").html("ERROR");
                }
            });


        });
    });    

</script>

但是当我点击链接时，tableID和productID仍为null，并且会触发两次。

有人可以帮帮我吗？

Answer 1

问题在于你的ajax调用，你应该在ajax中设置参数值，以便他们使用Ajax发布。其他一些参数缺失我完成了你的ajax电话请试着告诉我。

请使用某些按钮或其他元素来处理静态链接当您对Ajax调用感兴趣时不需要使用ActionLink

<script type="text/javascript">

    $(document).ready(function () {
        $('.UpdateTransactionLink').click(function (e) {
            alert("Clicked via ajax");
e.preventDefault();
            $.ajax({
                url: "/Tables/TableTransactions",
                type: "POST",
                data: { tableID: 1,productID=4 //set values accordingly },
                contentType: "application/json; charset=utf-8"
                datatype: "html", //Should be html
                success: function (data) {
                    $('#divResult').html(data);
                },
                error: function () {
                    $("#divResult").html("ERROR");
                }
            });


        });
    });    

</script>

Answer 2

您正在使用post但是您没有在请求中传递数据，您可以使用$ .ajax的数据参数，或者您可以使用以下代码，其中数据是url的一部分。另请从点击事件返回false以防止链接的默认href。

<script type="text/javascript">

$(document).ready(function () {
    $('.UpdateTransactionLink').click(function () {
        alert("Clicked via ajax");

        $.ajax({
            url: $(this).attr("href"), // used data from url
            datatype: "text",
            type: "POST",
            success: function (data) {
                $('#divResult').html(data);
            },
            error: function () {
                $("#divResult").html("ERROR");
            }
        });
        return false;

    });
});

使用jquery ajax在mvc中渲染局部视图失败

2 个答案: