Populate html table from api

Question

In the Visits controller I want to populate the index page from api and not from entity model

https://visitsapi.azurewebsites.net/api/Visits

I want to populate the html table with Visit Date and Notes

patid is being passed from earlier controller

https://github.com/KalyanAllam/PatientPortal/

C:\Users\allam\source\repos\PatientPortal\PatientPortal\Controllers\VisitsController.cs

Capturenotes.JPG

Answer 1

Hi @Dotnet Engineer,

If you just want to display the two columns, just remove the other unnecessary DisplayFor code.

If you want to receive the data without the other properties, you can create the View Model.

A simple working demo you could follow:

Model

public class VisitVM
{
    public string? Notes { get; set; }

    public DateOnly Visitdate { get; set; }
}

View

@model IEnumerable<VisitVM>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Notes)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Visitdate)
            </th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Notes)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Visitdate)
            </td>
        </tr>
}
    </tbody>
</table>

Controller

public async Task<IActionResult> Index(int patid)
{
    //....
    var client = new HttpClient();
    var data = client.GetAsync("https://visitsapi.azurewebsites.net/api/Visits").Result.Content.ReadAsStringAsync().Result;
    var model = JsonConvert.DeserializeObject<List<Visit>>(data);
    var usztgujuContext = _context.Visits.Include(v => v.Clinician).Include(v => v.Patient).Where(v => v.Patientid == patid)
        .Select(a => new VisitVM{
            Notes = a.Notes,
            Visitdate = a.Visitdate
        }).ToList();
    return View(usztgujuContext);
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

Answer 2

You can create a ViewModel with only those properties and pass a new instance of this class to the view. In the action method in the controller, you can then map the properties from the API call to the properties in the new ViewModel. You should of course use the new type in the View as well.