Как динамически извлекать данные из базы данных для кода Javascript в ASP.NET MVC 5?

Question

Я создаю приложение ASP.NET MVC 5, и я довольно новичок в этой технологии. Я был бы очень благодарен за каждый совет, потому что я застрял.

Я строю игру с памятью. Я уже создал JavaScript-код игры, и игра работает как автономный код со статически определенным массивом карт/изображений для игры. Но теперь я хочу включить его в структуру приложения MVC, используя карты, извлеченные из базы данных.

Модель:

using System; 
using System.Web.Mvc; 
using System.ComponentModel.DataAnnotations; 

namespace SmartBunnyApp.Models 
{ 
    public class Word 
    { 

     public int WordId { get; set; } 
     public string EnglishWord { get; set; } 
     public string PolishTranslation { get; set; } 
     public string Category { get; set; } 
     public byte[] ImageData { get; set; } 
     public string ImageMimeType { get; set; } 
    } 
} 

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using SmartBunnyApp.Models; 

namespace SmartBunnyApp.Models 
{ 
    public class WordsListViewModel 
    { 
     public IEnumerable<Word> Words { get; set; } 
     public PagingInfo PagingInfo { get; set; } 
     public string CurrentCategory { get; set; } 
     public byte[] ImageData { get; set; } 
    } 
} 

Контроллер:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using SmartBunnyApp.Abstract; 
using SmartBunnyApp.Models; 

namespace SmartBunnyApp.Controllers 
{ 
    public class WordController : Controller 
    { 
     private IWordRepository repository; 
     public int PageSize = 4; 

     public WordController(IWordRepository wordRepository) 
     { 
      this.repository = wordRepository; 
     } 

     public ViewResult List(string category, int page = 1) 
     { 

      WordsListViewModel viewModel = new WordsListViewModel 
      { 
       Words = repository.Words 
        .Where(p => category == null || p.Category == category) 
        .OrderBy(p => p.WordId) 
        .Skip((page - 1) * PageSize) 
        .Take(PageSize), 
       PagingInfo = new PagingInfo 
       { 
        CurrentPage = page, 
        ItemsPerPage = PageSize, 
        TotalItems = category == null ? 
         repository.Words.Count() : 
         repository.Words.Where(e => e.Category == category).Count() 
       }, 
       CurrentCategory = category 
      }; 
      return View(viewModel); 
     } 

     public IEnumerable<Word> GetAllWords() 
     { 
      return repository.Words; 
     } 

     public FileContentResult GetImage(int wordId) 
     { 
      Word word = repository.Words.FirstOrDefault(p => p.WordId == wordId); 
      if (word != null) 
      { 
       return File(word.ImageData, word.ImageMimeType); 
      } else 
      { 
       return null; 
      } 
     } 
    } 
} 

И теперь мне нужно иметь JavaScript (или, как я уже должен знать) JQuery код, который поможет мне получить слова и их изображения из базы данных для выбранной категории и помещают их в простую многомерную таблицу, такую ​​как:

var memory_matching_array = [['dog.jpg','DOG],['penguin.jpg','PENGUIN']]; 

Я попытался реализовать его так, как кто-то предложил в комментарии ниже, но я все время получаю сообщение об ошибке. Особенно тот факт, что мне приходится указывать URL-адрес в функции jQuery, трудно для меня (я понятия не имею, как этот URL должен выглядеть точно), а затем часть, когда мне приходится помещать данные в таблицу, чтобы она выглядела тот, который я вставил выше.

Спасибо, ребята, за помощь!

Answer 1

Если вы сохранили данные в БД (не уверены в том, что вы упомянули об table words), вы можете создать веб-контроллер API и внутри него создать метод get, который вернет вам нужные данные.

Причина, по которой я упоминал API-контроллер, заключается в том, что с интеграцией с javascript проще интегрировать, поскольку вам нужно создать представление и модель, а объем работы, требуемый для выполнения работы, выше, но выполним.

Вам понадобится класс для представления структуры данных, которая будет возвращена с сервера.

В качестве примера:

public class Card 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
} 

Тогда ваш контроллер может быть таким:

using ProductsApp.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Web.Http; 

namespace App.Controllers 
{ 
    public class CardsController : ApiController 
    { 
     Card[] cards = new Card[] 
     { 
      new Product { Id = 1, Name = "Card 1"}, 
      new Product { Id = 2, Name = "Card 2"} 
     }; 

     public IEnumerable<Card> GetAllCards() 
     { 
      return cards; 
     } 

     public IHttpActionResult GetCardById(int id) 
     { 
      var card = cards.FirstOrDefault((p) => p.Id == id); 
      if (card == null) 
      { 
       return NotFound(); 
      } 
      return Ok(card); 
     } 
    } 
} 

Конечно, вы можете прочитать карты из БД или что-то, но это не точка здесь.

Следующий шаг - получить их, вызвав этот метод из вашего JS-кода. Самый простой способ заключается в использовании JQuery и сделать вызов Ajax, как это:

function GetAllCards() { 
    $.ajax({ 
     url: 'http://{Server Address}/{WebAppName}/api/Cards', 
     type: 'GET', 
     dataType: 'json',    
     success: function (data) {     
      //do something with data 
     }, 
     error: function (error) { 
      //log or alert the error 
     } 
    });   
} 

Если вы хотите использовать получить методом ID:

function GetCardById(id) {  
    $.ajax({ 
     url: 'http://{Server Address}/{WebAppName}/api/Cards/'+id, 
     type: 'GET', 
     dataType: 'json', 
     success: function (data) { 
      //do something 
     }, 
     error: function (error) { 
      //log or alert the error 
     } 
    }); 
}