How to consume multiple GET API in one view in MVC

Introduction

In this article, we'll look at how to use MVC to consume several GET APIs in a single view. We'll go over how to create a Model to store the data, a Controller action to contact the APIs and fill the Model, and a View to display the data.

The Controller in the Model-View-Controller (MVC) architecture processes data, receives user input, and returns views. It is typical for web app developers to need several APIs to retrieve data for a single view. In this situation, we may design a Controller action that queries several APIs and then sends a ViewModel to the View, which can render the retrieved information understandable.

The following steps must be followed to use multiple GET APIs in a single MVC view.

Step 1

The initial step is to create a model to store the information collected from the APIs. The model's properties must align with the information the APIs have returned. A new or existing class can be created to represent this Model.

public class ProjectCol
    {
        public List<master> master { get; set; }
        public List<Project> projects { get; set; }
        public List<User> users { get; set; }

    }
public class master
    {
            public int Id { get; set; }
            public string RoleName { get; set; }
    }
 public class Project
    {
        public int Id { get; set; }
       
        public string ProjectName { get; set; }    
    }
public class User
    {
        public string UserId { get; set; }
        public string Name { get; set; }
    }

Step2

Creating a Controller action to make API calls and add data to the Model comes next. GET queries to the appropriate APIs can be sent using the HTTPClient or WebClient libraries.

       public async Task<ActionResult> ProjectTest(ProjectCol projectallot)
        {
            string url = configuration.GetValue<string>("Projectapi:BaseApi");
            ProjectCol projectAllotment = new ProjectCol();
        
            List<master> _master = new List<master>();
            var baseurl = ServicesEndPonit.usermanagement.Getallrole(url);
            HttpResponseMessage Res = await httpClient.GetAsync(baseurl);
            if (Res.IsSuccessStatusCode)
            {
                var data = Res.Content.ReadAsStringAsync().Result;
                _master = JsonConvert.DeserializeObject<List<master>>(data);
            }
            List<User> user = new List<User>();
            var baseurl_ = ServicesEndPonit.usermanagement.GetUsers(url);
            HttpResponseMessage Res_ = await httpClient.GetAsync(baseurl_);
            if (Res_.IsSuccessStatusCode)
            {
                var data_ = Res_.Content.ReadAsStringAsync().Result;
                user = JsonConvert.DeserializeObject<List<User>>(data_);
            }
            List<Project> projects = new List<Project>();
            var baseurl_pro = ServicesEndPonit.ProjectManagement.GetProjects(url);
            HttpResponseMessage Res_pro = await httpClient.GetAsync(baseurl_pro);
            if (Res_pro.IsSuccessStatusCode)
            {
                var data_pro = Res_pro.Content.ReadAsStringAsync().Result;
                projects = JsonConvert.DeserializeObject<List<Project>>(data_pro);
            }
            projectAllotment.projects = projects;
            projectAllotment.users = user;
            projectAllotment.master = _master;
            return View(projectAllotment); 
        }

Step 3

We can provide the Model to the view after populating it with data from the APIs. The data from each API model can then be displayed in the view using the Model attributes. The view's Razor syntax can be used to accomplish this.

<div class="row">
    <div class="col-sm-4">
        <label> User</label>
        <select class="form-select" required name="AssignedTo" id="ddlAllmember">
            <option value="hidden">Select AssginTo </option>
            @foreach (var item in Model.users)
            {
                <option value="@item.UserId">@item.Name</option>
            }
            
        </select>
</div>
    <div class="col-sm-4">
        <label>Job Role</label>
        <select class="form-select" required name="RoleID" id="ddlJobroleId">
            <option value="hidden">Select Job role </option>
            @foreach (var item in Model.master)
            {
                <option value="@item.Id">@item.RoleName</option>
            }
        </select>
    </div>
    <div class="col-sm-4">
        <label>Project </label>
        <select class="form-select" required name="ProjectID" id="ddlProjectName">
            <option value="hidden">Select ProjectCode </option>
            @foreach (var item in Model.projects)
            {
                <option value="@item.Id">@item.ProjectName</option>
            }
        </select>
    </div>
    
</div>

output

Conclusion

MVC can make consuming several GET APIs in a single view difficult. Still, it is possible by defining API models, creating a Model, using the APIs in the controller, and finally providing the Model to the view.

Follow C# Corner to learn more new and amazing things about ASP.NET MVC or to explore more technologies. If you have any queries/suggestions on the article, please leave your questions and thoughts in the comment section below.

Thanks for reading, and I hope you like it.