Question

我有一个简单的页面，它使用ID从数据库中返回的产品列表中查找特定产品，然后在html页面中显示该产品。我能够看到我希望在使用/ api / products / 12345时看到的JSON，但是当我尝试从Index.cshtml页面查询数据时，我得到了结果 - ＆gt; undefined：$ undefined在我的页面中。我将通过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匹配的数据已成功返回。

感谢。

Answer 1

没有看到代码，很难确切地知道，但我猜测api/products处的控制器操作的代码它返回一个对象数组作为JSON - 可能是这样的：{{1} }。因此，使用[{ID: 5, MSRP: 20.10},{ID: 6, MSRP: 10.10}]查看项目列表是有道理的。

但是，我猜测$.each(data, function() {...})会将单个对象作为JSON返回 - 如下所示：api/products/5。如果没有包装数组，{ID: 5, MSRP: 20.10}将无法执行您想要的操作。在find（）中尝试使用这个回调函数：

$.each(data, function() {...})

如果这不起作用，您是否可以显示function (data) { // On success, 'data' contains a *single* product. var str = data.ProductDescription + ': $' + data.MSRP; $('#products').html(str); })返回的数据与api/products返回的数据的片段？

undefined：$ undefined在返回成功结果后显示在cshtml页面中

1 个答案: