Вставьте данные контроллера в div как абзац, используя JQuery ajax

Question

У меня есть контроллер, который извлекает данные из модели, и я хочу добавить каждый бит данных, извлеченных внутри div, называемого test, с данными в виде абзаца внутри 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;
    }

}
}

И это ajax, который я использую на странице просмотра cshtml:

<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

Когда вы звоните /api/Games/ URL По умолчанию вызов API Get Метод в вашем API.Если вы хотите изменить это, вам нужна маршрутизация 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 2

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);
        }

    }
}

Answer 3

Переменная 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, возвращаемое значениеметода представляет собой список анонимных объектов (со свойствами года и имени).Поэтому нам пришлось изменить тип возвращаемого метода на IEnumerable<object>

. Вы можете открыть вкладку сети вашего браузера devtools (F12) -> и увидеть, как выполняется вызов ajax и каков его ответ.Если все в отношении URL и маршрутизации хорошо, вы должны увидеть ответ 200 OK с массивом json в теле ответа.Если вы видите 404, это означает, что маршрутизация не настроена должным образом для URL, который пытается получить клиентский код.Если вы видите 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);
}