使用 jquery ajax 在 mvc 中渲染部分视图失败答案

【问题标题】：Render partial view in mvc using jquery ajax fails使用 jquery ajax 在 mvc 中渲染部分视图失败
【发布时间】：2015-09-18 12:03:22
【问题描述】：

我是 jquery ajax 编程的新手，我有一个问题。我有一个超链接文本，可以点击它来订购产品。我希望单击此链接并使用 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 仍然为空，并且会触发两次。

谁能帮帮我？

【问题讨论】：

它会触发两次，因为它是一个链接，因此您同时执行 ajax 调用和正常重定向 - 您需要取消默认操作。并且在 ajax 调用中，您不会将任何数据传递给该方法，因此参数为 null

标签： jquery ajax asp.net-mvc

【解决方案1】：

您正在使用 post 但您没有在请求中传递数据，您可以使用 $.ajax 的 data 参数，或者您可以使用下面的代码，其中 data 是 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;

    });
});

【讨论】：

感谢您的所有回答感谢您提供的帮助。但最终是 Dinesh 的回答解决了我的问题。使用来自 url 的数据将数据传递给请求中的控制器方法。谢谢！

【解决方案2】：

问题在于您的 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>

【讨论】：