Ajax調用成功，但從Web API填充未定義的數據

Question

我無法弄清楚為什么我的Ajax調用僅在此調用中始終顯示未定義，但在所有其他代碼中都可以正常工作。

這就是我得到的：

這是我按ID搜索時得到的：

這是我的ajax代碼：

$("#btnGetTaxByBL").click(function () {
            var strURL = "https://localhost:44395/api/ServiceDeed/GetByBlockNLot/" + blockNo + "/" + lotNo;

            $("#display").html("");
            $("#msg").html("");
            $("#update").html("");
            $("#updateResult").html("");

            console.log("btnGetTaxByBL clicked");

            var blockNo = $("#txtBlockNo").val();
            var lotNo = $("#txtLotNo").val();

            $.ajax({
                type: "GET",
                url: strURL,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var owner = data;

                    $("#display").html("<hr><p>".concat("HomeOwnerID: ", owner.HomeOwnerID,
                        "<br>FirstName: ", owner.FirstName, "<br>LastName: ", owner.LastName,
                        "<br>Address: ", owner.Address, "<br>City: ", owner.City,
                        "<br>State: ", owner.State, "<br>ZipCode: ", owner.ZipCode,
                        "<br>Telephone Number: ", owner.TelNo, "<br>Email: ", owner.Email,
                        "<br>Block Number: ", owner.BlockNo, "<br>Lot Number: ", owner.LotNo,
                        "<br>Date of Sale: ", owner.SaleDate, "<br>Sale Price: $", owner.SalePrice,
                        "<br>Sold Status: ", owner.IsSold, "<br>Accessed Value: ", owner.AccessedVal,
                        "<br>Land Value: ", owner.LandVal, "<br>Additional Value: ", owner.AdditionalVal,
                        "<br>Tax Rate: ", owner.TaxRate, "<br>Tax Per Year: ", owner.TaxPerYear,
                        "<br>Real Estate Tax: ", owner.RealEstateTax));

                },
                error: function (req, status, error) {
                    alert("Error: " + req.responseText + " | " + status + " | " + error);
                }
            }); //end of ajax method
        }); // end of btnGetTaxByBL click event

這是我的控制器的代碼：

[HttpGet("GetByBlockNLot/{block}/{lot}")]
    public List<HomeTax> GetByBlockNLot(int block, int lot)
    {
        List<HomeTax> homeTaxList = new List<HomeTax>();
        DBConnect objDB = new DBConnect();
        String strSQL = "SELECT * FROM HomeOwnership_T INNER JOIN TaxInfo_T ON HomeOwnership_T.HomeOwnerID=TaxInfo_T.HomeOwnerID WHERE BlockNo =" + block + " AND LotNo =" + lot;
        int count = 0;

        objDB.GetDataSet(strSQL, out count);

        for (int i = 0; i < count; i++)
        {
            HomeTax objOwner = new HomeTax();
            objOwner.HomeOwnerID = (int)objDB.GetField("HomeOwnerID", i);
            objOwner.FirstName = (string)objDB.GetField("FirstName", i);
            objOwner.LastName = (string)objDB.GetField("LastName", i);
            objOwner.Address = (string)objDB.GetField("Address", i);
            objOwner.City = (string)objDB.GetField("City", i);
            objOwner.State = (string)objDB.GetField("State", i);
            objOwner.ZipCode = (string)objDB.GetField("ZipCode", i);
            objOwner.TelNo = (string)objDB.GetField("TelNo", i);
            objOwner.Email = (string)objDB.GetField("Email", i);
            objOwner.BlockNo = (int)objDB.GetField("BlockNo", i);
            objOwner.LotNo = (int)objDB.GetField("LotNo", i);
            objOwner.SaleDate = (DateTime)objDB.GetField("SaleDate", i);
            objOwner.SalePrice = (Decimal)objDB.GetField("SalePrice", i);
            objOwner.IsSold = (string)objDB.GetField("IsSold", i);
            objOwner.AccessedVal = (Decimal)objDB.GetField("AccessedVal", i);
            objOwner.LandVal = (Decimal)objDB.GetField("LandVal", i);
            objOwner.AdditionalVal = (Decimal)objDB.GetField("AdditionalVal", i);
            objOwner.TaxRate = (Decimal)objDB.GetField("TaxRate", i);
            objOwner.TaxPerYear = (Decimal)objDB.GetField("TaxPerYear", i);
            objOwner.RealEstateTax = (Decimal)objDB.GetField("RealEstateTax", i);

            homeTaxList.Add(objOwner);
        }
        return homeTaxList;
    }

Answer 1

您的API返回一個列表，因此您應該添加“ for”語句以顯示對象列表，不能將“ owner”變量用作對象，因為它是對象數組。

Answer 2

這是你的問題

您在strURL中使用blockNo和lotNo之前已strURL分配了值

$("#btnGetTaxByBL").click(function () {
    var strURL = "https://localhost:44395/api/ServiceDeed/GetByBlockNLot/" + blockNo + "/" + lotNo;
    // at this point, blockNo and lotNo are "undefined
        $("#display").html("");
        $("#msg").html("");
        $("#update").html("");
        $("#updateResult").html("");

        console.log("btnGetTaxByBL clicked");

        var blockNo = $("#txtBlockNo").val();
        var lotNo = $("#txtLotNo").val();

只需在strUrl使用它們之前更改代碼以獲取blockNo和lotNo解決第一個問題

$("#btnGetTaxByBL").click(function () {
    var blockNo = $("#txtBlockNo").val();
    var lotNo = $("#txtLotNo").val();
    var strURL = "https://localhost:44395/api/ServiceDeed/GetByBlockNLot/" + blockNo + "/" + lotNo;
    // now you are passing values rather than undefined
    $("#display").html("");
    $("#msg").html("");
    $("#update").html("");
    $("#updateResult").html("");

    console.log("btnGetTaxByBL clicked");

下一個問題是，結果是一個列表（從外觀上看，它將作為數組發送）-但是您沒有將響應用作數組

通過改變

success: function (data) {
    var owner = data;
    $("#display").html( ... rest of your code

至

success: function (data) {
    var owner = data[0];
    $("#display").html( ... rest of your code

即訪問接收到的數組中的FIRST結果，您現在將根據需要顯示數據

如果您期望一個數組，即多個記錄，那么您的代碼將需要進行重大更改，因為您需要遍歷數據並輸出多個記錄

也許像

success: function (data) {
    var owner = data;
    var html = data.map(function(owner) {
        return "<hr><p>".concat("HomeOwnerID: ", owner.HomeOwnerID,
        "<br>FirstName: ", owner.FirstName, "<br>LastName: ", owner.LastName,
        "<br>Address: ", owner.Address, "<br>City: ", owner.City,
        "<br>State: ", owner.State, "<br>ZipCode: ", owner.ZipCode,
        "<br>Telephone Number: ", owner.TelNo, "<br>Email: ", owner.Email,
        "<br>Block Number: ", owner.BlockNo, "<br>Lot Number: ", owner.LotNo,
        "<br>Date of Sale: ", owner.SaleDate, "<br>Sale Price: $", owner.SalePrice,
        "<br>Sold Status: ", owner.IsSold, "<br>Accessed Value: ", owner.AccessedVal,
        "<br>Land Value: ", owner.LandVal, "<br>Additional Value: ", owner.AdditionalVal,
        "<br>Tax Rate: ", owner.TaxRate, "<br>Tax Per Year: ", owner.TaxPerYear,
        "<br>Real Estate Tax: ", owner.RealEstateTax);
    }).join('');
    $("#display").html(html);
},