Заполните Dropdown в MVC данными API - PullRequest
Новая
       44

Заполните Dropdown в MVC данными API

0 голосов
/ 26 марта 2019

Я относительно новичок в MVC, и все еще растерялся, поэтому мне нужна помощь с проблемой.

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

К сожалению для меня, я не знаю, как заполнить эти выпадающие списки, то есть я не знаю, какая логика идет в контроллере и модели ... Может кто-нибудь дать мне подсказку или порекомендовать хорошее чтение, потому что я Я полностью потерян.

Заранее спасибо!

Edit: Что-то вроде этого: Приложение MVC

1 Ответ

0 голосов
/ 26 марта 2019

Один из способов заполнения раскрывающихся списков - использование ViewData.

Предположим, что ваши вызовы API находятся в отдельном сервисе.API должен будет вернуть список.В этом примере список будет иметь пользовательский класс: List<CustomClass>.Предположим, что ваш пользовательский класс содержит свойство Id и свойство Name.Ваш контроллер будет выглядеть так: 

public class HomeController : Controller
{
    private readonly IApiService _apiService;

    public HomeController(
        IApiService apiService)
    {
        _apiService = apiService;
    }

    public IActionResult Index()
    {
        // Get the data from the API into the ViewData
        // In this example, Id will be the Id of the dropdown option,
        // and the Name will be what's displayed to the user

        ViewData["DataFromArticle1"] = new SelectList(
                await _apiService.GetDataFromArticle1Async(), 
                "Id", "Name");

        ViewData["DataFromArticle2"] = new SelectList(
                await _apiService.GetDataFromArticle2Async(), 
                "Id", "Name");

        return View();
    }
}

Теперь, чтобы заполнить выпадающие списки в вашем представлении: 

<select asp-items="ViewBag.DataFromArticle1"></select>
<select asp-items="ViewBag.DataFromArticle2"></select>

ОБНОВЛЕНИЕ

Следующий кодвызовет вашу конечную точку API через AJAX.Мы предполагаем, что вы создали WebApi, и что в вашем WebAPI есть ArticleDataController с методом, называемым GetDataFromArticle1.

Ваше мнение: 

<select id="dataFromArticle1"></select>

Ваш JavaScript: 

$(document).ready(function () {  
    $.ajax({  
        type: "GET",  
        url: "/api/ArticleData/GetDataFromArticle1",   
        success: function (data) {  
            var s = '<option value="-1">Please Select a Department</option>';  
            for (var i = 0; i < data.length; i++) {  
                s += '<option value="' + data[i].Id+ '">' + data[i].Name + '</option>';  
            }  
            $("#dataFromArticle1").html(s);  
        }  
    });  
});
...