使用JQuery Ajax將控制器數據作為段落插入div中

Question

我有一個控制器，它從模型中檢索數據，並希望添加在稱為test的div中檢索到的數據的每一位，數據是div中的一個段落，但是我無法使它起作用。

這是我的控制器：

namespace MyGamesProject.Controllers
{
public class GamesController : ApiController
{
    private GamesDBEntities db = new GamesDBEntities();

    // GET: api/Games
    public IQueryable<object> GetAllGames()
    {
       var games = db.Games.Include(d => d.DailyDatas)
                    .GroupBy(d => new { d.name, d.year })
                    .OrderBy(d => d.Key.name)
                    .Select(d => new
                    {
                        d.Key.year,
                        d.Key.name
                    }
                    );
        return games;
    }

}
}

這是我在cshtml視圖頁面中使用的ajax：

<div id="test"></div>

@section Scripts {
<script>
    $.ajax({
        url: "/api/Games/",
        method: "GET",
        dataType: 'json',
        success: success
    });

    function success(data)
    {
        $.each(data, function (i, val)
        {
            var $data = $('<p>' + val.name + ' ' + ' was released in ' + val.year + '</p>')
            $data.appendTo($('#test'));
        });
    }
</script>
}

加載頁面時，頁面為空白，將檢索到的數據作為一個段落添加到div中似乎沒有用，我不確定為什么它不起作用。 我在測試div中的段落結構不正確，還是在錯誤的位置插入了這些段落？ 任何幫助都會很棒。

Answer 1

變量games仍然是LINQ查詢。 您需要對此調用ToList()或ToArray() ，以便執行查詢並為您提供結果項。

public IEnumerable<object> GetAllGames()
{
   var games = db.Games.Include(d => d.DailyDatas)
                .GroupBy(d => new { d.name, d.year })
                .OrderBy(d => d.Key.name)
                .Select(d => new
                       {
                        d.Key.year,
                        d.Key.name
                       }
                );
    return games.ToList();
}

在這里，由於我們正在調用ToList方法，所以該方法的返回值是一個匿名對象列表（具有year和name屬性）。 因此，我們不得不將方法的返回類型更改為IEnumerable<object>

您可以打開瀏覽器devtools（F12）->網絡選項卡，查看正在進行的ajax調用及其響應。 如果有關url和路由的一切都很好，您應該在響應正文中看到帶有json數組的200 OK響應。 如果看到404，則表示未正確設置客戶端代碼嘗試訪問的網址的路由。 如果看到500，則表示服務器代碼已被調用，但由於在執行代碼期間發生某些異常而崩潰。 您可能將能夠在“響應”選項卡中查看異常詳細信息。

另外，您當前的代碼正在循環內執行jquery選擇器$('#test') 。 您可以通過將容器元素選擇器緩存在循環外部來改善這一點。

function success(data) {
    var $container = $('#test');
    var items = '';
    $.each(data, function (i, val) {
        items += '<p>' + val.name + ' ' + ' was released in ' + val.year + '</p>';
    });
    $container.append(items);
}

Answer 2

調用/api/Games/ URL時默認情況下，API會在api中調用Get Method。 如果要覆蓋此設置，則需要URL路由。 如果繼續使用GetAllGames()則使用屬性route或在WebApiConfig.cs文件中寫入路由。 （另請參見下面的@Shyju評論）

另外，變量games是LINQ查詢，您需要調用ToList()來執行數據。

控制器：

namespace MyGamesProject.Controllers
 {
    public class GamesController : ApiController
    {
         public IHttpActionResult Get(long id)
         {
            var games = db.Games.Include(d => d.DailyDatas)
                         .GroupBy(d => new { d.name, d.year })
                         .OrderBy(d => d.Key.name)
                         .Select(d => new
                         {
                          d.Key.year,
                          d.Key.name
                         }).ToList();

         return Ok(games);
      }    
     }
    }

查看頁面：

<div id="test"></div>

@section Scripts {
 <script>
  $(function () {
    $.ajax({
        url: "/api/Games/",
        method: "GET",
        dataType: 'json',
        success: success
    });

    function success(data)
    {
        $.each(data, function (i, val)
        {
            var $data = $('<p>' + val.name + ' ' + ' was released in ' + val.year + '</p>')
            $data.appendTo($('#test'));
        });
    }
});
</script>
}

Answer 3

IQueryable只是一個查詢。 它不會產生結果。 將其附加到tolist（）。 在這種情況下，它不會給您結果，因為沒有數據庫上下文可以觸發IQueryable。 當控件查看時，數據庫上下文被配置。

修正

namespace MyGamesProject.Controllers
{
    public class GamesController : ApiController
    {
        private GamesDBEntities db = new GamesDBEntities();

        // GET: api/Games
        public IHttpActionResult GetAllGames()
        {
            var games = db.Games.Include(d => d.DailyDatas)
                         .GroupBy(d => new { d.name, d.year })
                         .OrderBy(d => d.Key.name)
                         .Select(d => new
                         {
                             d.Key.year,
                             d.Key.name
                         }
                         ).ToList();
            return Ok(games);
        }

    }
}