时间戳

首页 > 解决方案 > 使用 API 数据填充 MVC 中的下拉菜单

c# - 使用 API 数据填充 MVC 中的下拉菜单

问题描述

我对 MVC 比较陌生，仍然很困惑，因此我需要帮助解决问题。

我创建了一个网络爬虫控制台应用程序，我在其中比较了两篇文章（我从某个 API 获取数据），现在我想让它成为一个 MVC 项目，其中我有两个下拉列表需要用上面的数据填充-提到的API，以便我可以比较两篇文章。

对我来说不幸的是，我不知道如何填充这些下拉列表，也就是说，我不知道控制器和模型中的逻辑是什么......有人可以给我一个提示或推荐一个好的阅读，因为我完全迷失了.

提前致谢！

编辑：像这样的东西： MVC 应用程序

标签： c#apimodel-view-controllerhtml.dropdownlistforselectlistitem

解决方案

填充下拉列表的一种方法是使用 ViewData。

假设您对 API 的调用驻留在单独的服务中。API 需要返回一个列表。在此示例中，列表将属于自定义类：List<CustomClass>. 假设您的自定义类包含一个 propertyId和一个 property 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>

更新

以下代码将通过 AJAX 调用您的 API 端点。我们假设您已经创建了一个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);  
        }  
    });  
});

推荐阅读