---
title: "Create a card in MVC and bind data with API CAlling client side."  
description: "Create a card in MVC and bind data with API CAlling client side."  
author: "Ravi Misra"  
published: 2023-08-30  
updated: 2023-08-30  
canonical: https://www.mindstick.com/forum/159797/create-a-card-in-mvc-and-bind-data-with-api-calling-client-side  
category: "web api"  
tags: ["c#", "api(s)", "web api", ".net core api"]  
reading_time: 2 minutes  

---

# Create a card in MVC and bind data with API CAlling client side.

Create a card in [MVC](https://www.mindstick.com/forum/155803/define-cache-profile-in-mvc) and [bind data](https://www.mindstick.com/forum/415/how-to-bind-data-in-windows-phone-7-using-wcf-service) with [API](https://www.mindstick.com/articles/12641/instagram-api-upgraded-to-facebook-graph) CAlling [client side](https://www.mindstick.com/forum/160418/what-are-the-best-practices-for-securely-storing-bearer-tokens-on-the-client-side).

## Replies

### Reply by Aryan Kumar

Sure, here are the steps on how to create a card in MVC and bind [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science) with API calling [client](https://www.mindstick.com/articles/23198/3-steps-to-ensure-that-your-client-portal-is-impeccable) side:

1. Create a new MVC project in Visual Studio.
2. Add a new controller called `CardController`.
3. Add a new action method called `GetCards`. This action method will be responsible for fetching the data from the API.
4. In the `GetCards` action method, create a new `HttpClient` object.
5. Use the `HttpClient` object to call the API endpoint.
6. Deserialize the response from the API into a list of cards.
7. Return the list of cards from the action method.
8. Create a new view called `CardsView`.
9. In the `CardsView` view, create a loop to iterate through the list of cards.
10. For each card, create a card element.
11. Bind the data from the card to the card element.
12. Render the card element.

Here is an example of the code for the `GetCards` action method:

C#

```plaintext
public async Task<IEnumerable<Card>> GetCards()
{
    var httpClient = new HttpClient();
    var response = await httpClient.GetAsync("https://api.example.com/cards");

    if (response.IsSuccessStatusCode)
    {
        var cards = await response.Content.ReadAsJsonAsync<IEnumerable<Card>>();
        return cards;
    }

    return null;
}
```

Here is an example of the code for the `CardsView` view:

HTML

```plaintext
<h1>Cards</h1>

<ul>
    @foreach (var card in Model)
    {
        <li>
            <h2>@card.Name</h2>
            <p>@card.Description</p>
        </li>
    }
</ul>
```


---

Original Source: https://www.mindstick.com/forum/159797/create-a-card-in-mvc-and-bind-data-with-api-calling-client-side

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.