从 asp.net 网页中的 jQuery Ajax 调用中检索 JSON 数组答案

【问题标题】：Retrieve JSON Array from jQuery Ajax call in asp.net webpages从 asp.net 网页中的 jQuery Ajax 调用中检索 JSON 数组
【发布时间】：2012-12-17 15:09:41
【问题描述】：

我正在尝试通过 jQuery 的 ajax 调用发送一些数据。我的问题是：如何在我的Insert.cshtml 文件中获取这个 JSON 数组？ 我尝试了Request["rows"]、Request[0][rows] 等，但没有任何成功。

这里，我要发送的数据是这样的（多行表单数据）：

[
    {
        "sl": "1",
        "tname": "Gardening",
        "ttype": "4",
        "tduration": "12"
    },
    {
        "sl": "2",
        "tname": "Nursing",
        "ttype": "4",
        "tduration": "45"
    }
]

jQuery 代码：

$.ajax({
    type: "POST",
    url: "/Insert",
    data: rows,
    contentType: "application/json",
    success: function (data, status) {
        alert(status);
    },
    error: function (xhr, textStatus, error) {
        var errorMessage = error || xhr.statusText;
        alert(errorMessage);
    }
});

更新：jsfiddle 中的部分演示 - http://jsfiddle.net/rafi867/gprQs/8/

【问题讨论】：

@qwerty 我正在尝试访问引用页面（在本例中为 Insert.cshtml）中的值，而不是当前页面中的值。无论如何，我猜你的建议会带来一个错误，比如“名称'数据'在当前上下文中不存在”。
您不会碰巧有指向您网站的链接，是吗？还是 jsfiddle？
@qwerty 这是我在 jsfiddle 上的内容：jsfiddle.net/gprQs/5。我真的不知道如何模拟对另一个 .cshtml 页面的调用，但我想你会明白的。
我相信类似的问题是这样的：bit.ly/UMdnQ2 但不幸的是，这也没有答案。
对不起，我帮不了你。

标签： c# jquery asp.net json webmatrix

【解决方案1】：

我试图模拟您在 App_Code 中创建 Sample.cs 类的问题：

public class Sample
{
    public string sl { get; set; }
    public string tname { get; set; }
    public string ttype { get; set; }
    public string tduration { get; set; }
}

现在您的 Insert.cshtml 文件应如下所示：

@{
    var sample = new Sample[]{
    new Sample{ sl = "1", tname = "Gardening", ttype = "4", tduration = "12" },
    new Sample{ sl = "2", tname = "Nursing", ttype = "4", tduration = "45" }
    };
    Json.Write(sample, Response.Output);
}

保存 Sample 对象的文件 (ReadSample.cshtml?) 应该是：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="~/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $.getJSON('/Insert', function (sample)
            {
                var custList = "";
                $.each(sample, function (index, obj) {
                        custList += "<li>" + obj.sl + " - " + obj.tname + 
                                " - " + obj.ttype + " - " + obj.tduration + "</li>";
                })
                $("#list").html("<ul>" + custList + "</ul>")
            })
        </script>
    </head>
    <body>
        <div id="list"></div>
    </body>
</html>

在我的示例中，我已经阅读了 objects 数组

$.getJSON('/Insert', function (sample)

并创建了一个无序列表来显示其内容

$.each(sample, function (index, obj) {
        custList += "<li>" + obj.sl + " - " + obj.tname + 
                " - " + obj.ttype + " - " + obj.tduration + "</li>";
})
$("#list").html("<ul>" + custList + "</ul>")

我希望这会有所帮助。

【讨论】：

【解决方案2】：

我放了一个示例代码来展示如何使用 jquery 和 css 在网页上显示数组项。通过使用这个尝试理解这个概念，然后将它应用到你的场景中。

HTML

 <div class="dialog" id="unpaid-dialog" data-width="550" data-title="Checkout">
        <ul>
            <li id="serviceAndRetailDetails" style="text-align: left;"></li>
        </ul>
    </div>

jQuery

<script type="text/javascript">


    var toBePaidItems = new Array();//create a array
    var make = "";

    $.ajax({
        type: "GET",
        url: "/Portal/GetServiceAndRetailSalesDetails",
        dataType: 'json',
        contentType: "application/json; charset=UTF-8",
        data: { invoiceOrSaleId: invoiceOrSaleId, providerKey: providerKey },
        success: function (response) {
            make = "<table id='tblPayment'>";
            toBePaidItems = [];

            $.each(response, function (index, sr) {

                make += "<tr id=" + sr.AllocationOrInvoiceOrSaleId + " class=" + sr.Class + ">" + "<td style='padding-right:100px'>" + sr.Name + "</td><td class='colTotal' style='padding-right:45px'>" + '$ ' + sr.Price.toFixed(2) + "</td><td></tr>";

                //insert into array
                toBePaidItems.push(sr.AllocationOrInvoiceOrSaleId);
            });

            make += "</table>";
            $("#serviceAndRetailDetails").html(make);
        }
    });

</script>

控制器动作方法

[HttpGet]
public JsonResult GetServiceAndRetailSalesDetails(Guid invoiceOrSaleId, string providerKey)
        {

            var items = new List<CheckOutServiceAndRetailItem>();

            var serviceDetails = Repository.GetAllPayableItems(invoiceOrSaleId).ToList();

            foreach (var s in serviceDetails)
            {
                var item = new CheckOutServiceAndRetailItem
                {
                    AllocationOrInvoiceOrSaleId = s.Allocation.AllocationId,
                    Name = s.Allocation.Service.Name,
                    Price = s.LatestTotal,
                    Class = s.Allocation.Service.IsAnExtra,
                };
                items.Add(item);
            }

            return Json(items, JsonRequestBehavior.AllowGet);
        }

数组输出

如何操作数组Here

希望对你有所帮助。

【讨论】：

谢谢，但这并没有真正帮助我。我猜在 MVC 中你可以使用一个函数来接收数据；我的问题是如何为 asp.net 网页做类似的事情。
@lazylionking 从您发送数据的位置，是从 Insert.cshtml 还是从另一个网页？你能更详细地解释一下这个场景吗？
我有一个带有表单的页面（假设 Default.cshtml），如果需要，用户可以在其中添加新行，最后，如果他们按下提交，我想要所有数据（由多个行）要插入到数据库中。由于我无法使用纯 html 访问动态添加的行，因此我使用 jQuery 将所有行打包到一个 json 对象中，并将其传递给应该处理数据库任务的 Insert.cshtml 文件。但我无法访问 Insert.cshtml 文件中的 json 对象，这是我的问题。有关部分概述，请查看此小提琴：jsfiddle.net/rafi867/gprQs/8

【解决方案3】：

data 参数旨在将名称-值对映射到查询字符串参数，正如您可以通过 docs 判断的那样：

数据

要发送到服务器的数据。它被转换为查询字符串，如果还不是一个字符串。它附加到 GET 请求的 url。看 processData 选项来防止这种自动处理。 对象必须是 Key/Value 对。 如果 value 是一个 Array，jQuery 会序列化多个基于传统设置的值具有相同键的值（如下所述）。

如果您继续阅读 .param() 方法的文档，这应该可以帮助您了解您的请求发生了什么以及 jQuery 如何将您的对象发送到服务器。

您可能只需在 data 对象中命名您的对象/数组，以便在 Request.Forms 对象中引用它们。

【讨论】：