Populate Dropdown in MVC with API data

Question

I am relatively new to MVC, and still confused, therefore I need help with a problem.

I have created a web scraper console app where I compare two articles(where I fetch the data from a certain API), now I want to make this an MVC project where I have two dropdown lists that need to be filled with data from the above-mentioned API so that I can compare the two articles.

Unfortunately for me, I do not know how to populate these drop downs, that is, I do not know what logic goes in the controller and the model... Can someone give me a hint or recommend a good read because I am totally lost.

Thanks in advance!

Edit: Something like this: MVC app

Read this if you want to populate from your controller: https://www.tutorialsteacher.com/mvc/htmlhelper-dropdownlist-dropdownlistfor. Read this link if you want to use AJAX to populate your dropdown: https://www.c-sharpcorner.com/article/populating-dropown-with-ajax-call/ — Rahul Sharma, Mar 26 '19 at 16:47

MarioMendieta · Answer 1 · 2019-03-29T15:14:25.760

1

One way to populate your dropdown lists is by using ViewData.

Let's assume that your calls to the API reside in a separate service. The API would need to return a List. In this example the List will be of a custom class: List<CustomClass>. Let's assume that your custom class contains a property Id, and a property Name. Your controller would look like:

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

Now, to populate the dropdowns in your View:

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

UPDATE

The following code will call your API endpoint by AJAX. We assume that you have created a WebApi, and that within your WebAPI you have an ArticleDataController with a method called GetDataFromArticle1.

Your view:

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

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

edited Mar 29 '19 at 15:14

answered Mar 26 '19 at 18:03

MarioMendieta

302
1
10

I updated my question with an image of what the app should do. Now I have two questions: The result of the compared articles should come from the API also. Do I need to make two separate web services, or should I put the entire code from the console app in the web service? – wizardress Mar 28 '19 at 09:42
In your question, you mention that you already have an API which your console app calls to (1) get the data, and (2) compare it. In my example, the ApiService will take care of calling your API for your different tasks (i.e. getting the data, comparing the data, etc.) I don't know how your console app calls the API, but my recommendation is that you should place the code that calls your API within the ApiService. The idea here is to separate concerns within your project (your Controller does not care how you get the data or how you compare it, it only cares that the data is there). – MarioMendieta Mar 28 '19 at 12:08
Thank you for your explanation, some things have become much clearer, I will follow your instructions and let you know how it goes. Thanks again! – wizardress Mar 28 '19 at 12:27
Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted. – MarioMendieta Mar 28 '19 at 13:22
Can I solve this problem by using ajax call instead? – wizardress Mar 29 '19 at 12:58
Yes, you can call your API by AJAX. Take a look at this example: https://www.c-sharpcorner.com/article/populating-dropown-with-ajax-call/ – MarioMendieta Mar 29 '19 at 14:22
I looked at this particular example, but this passes data from database. What should I put instead of database entities? – wizardress Mar 29 '19 at 14:34
Please take a look at my updated answer. To call your API from AJAX you would first need to create a WebAPI. This WebAPI will contain the same code from your console app for retrieving the article data. – MarioMendieta Mar 29 '19 at 15:16
Here I am again, I am trying another way to do this with something I understand more - If I get the data from the API and serialize it (in the controller), can I pass the same values in the view, and how can I do that, how to access the json data in the controller and use it in the view? I know how to populate dropdowns with json data, but this MVC thing is stumping me totally... – wizardress Apr 03 '19 at 09:41
I would recommend you to post another question, and send me the link. It is actually recommended to ask only one question per post, see: https://meta.stackexchange.com/a/222741. – MarioMendieta Apr 03 '19 at 12:00
Oops, sorry I did not know that, I will keep that in mind, thanks! Here is the other question https://stackoverflow.com/questions/55495005/get-json-data-from-controller-to-dropdown-in-view . – wizardress Apr 03 '19 at 12:19

Populate Dropdown in MVC with API data

1 Answers1