0

我有一个简单的页面，它使用 ID 从数据库返回的产品列表中查找特定产品，然后在 html 页面中显示该产品。当我使用 /api/products/12345 时，我能够看到我希望看到的 JSON，但是当我尝试从 Index.cshtml 页面查询数据时，我得到了结果 --> undefined: $undefined in my page。我将通过 Product 类和我的 html 页面。请注意，所有产品的显示都完美呈现。

public class Product
{
    public int ID { get; set; }
    public string ProductDescription { get; set; }
    public string UnitOfMeasure { get; set; }
    public decimal MSRP { get; set; }
    public string Category { get; set; }
    public int CategoryID { get; set; }
    public string ZipCode { get; set; }
}

这是我的 Index.cshtml 页面

<html lang="en">
<head>
<title>.:: Web API ::.</title>
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // Send an AJAX request - the second parameter is a callback function that is invoked when the request successfully completes.
        $.getJSON("api/products/",
        function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, val) {

                // Format the text to display.
                var str = val.ProductDescription + ': $' + val.MSRP;

                // Add a list item for the product.
                $('<li/>', { html: str }).appendTo($('#products'));
            });
        });
    });

    function find() {
        var id = $('#prodId').val();
        // Again, we call the jQuery getJSON function to send the AJAX request, but this time we use the ID to construct the request URI.
        $.getJSON("api/products/" + id,
            function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, val) {

                    // Format the text to display.
                    var str = val.ProductDescription + ': $' + val.MSRP;
                    $('#products').html(str);
                });
            })
        .fail(
            function (jqXHR, textStatus, err) {
                $('#products').html('Error: ' + err);
            });
        }     
</script>
</head>
<body>
<div>
    <h1>All Products</h1>
    <ul id='products' />
</div>
<div>
    <label for="prodId">ID:</label>
    <input type="text" id="prodId" size="5"/>
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
</div>

我遇到的问题是 find() 函数渲染到 UI 有意义的数据，我看到匹配 ID 12345 的数据已成功返回。

谢谢。

4

1 回答 1

0

没有看到代码，很难确定，但我猜测控制器操作的代码api/products返回一个 JSON 格式的对象数组 - 可能是这样的：[{ID: 5, MSRP: 20.10},{ID: 6, MSRP: 10.10}]. 因此，使用$.each(data, function() {...})遍历项目列表是有意义的。

但是，我猜它会以 JSON 形式api/products/5返回单个对象 - 像这样：{ID: 5, MSRP: 20.10}. 没有包装数组，$.each(data, function() {...})就不会做你想做的事。在 find() 中为你的回调函数试试这个：

function (data) {
    // On success, 'data' contains a *single* product.
   var str = data.ProductDescription + ': $' + data.MSRP;
   $('#products').html(str);
})

如果这不起作用，您能否显示由返回的api/products数据与由返回的数据的片段api/products/5？

于 2012-07-07T16:05:17.720 回答