I want to develop a project with ASP.NET Core 5.0, in this project I receive my data using a Web API, but I could not transfer the incoming data to the image page. I need help on this. Appropriate classes have been created for the JSON data returned, I will share some of them. I can see the data is coming, but I'm having trouble transferring it to the image part.

Web API: https://gutendex.com/

public class BookListModel
{
        [JsonPropertyName("count")]
        public int count { get; set; }

        [JsonPropertyName("next")]
        public string next { get; set; }

        [JsonPropertyName("previous")]
        public object previous { get; set; }

        [JsonPropertyName("results")]
        public List<Result> results { get; set; }
}

public class Result
{
    [JsonPropertyName("id")]
    public int id { get; set; }

    [JsonPropertyName("title")]
    public string title { get; set; }

    [JsonPropertyName("authors")]
    public List<AuthorModel> authors { get; set; }

    [JsonPropertyName("translators")]
    public List<Translator> translators { get; set; }

    [JsonPropertyName("subjects")]
    public List<string> subjects { get; set; }

    [JsonPropertyName("bookshelves")]
    public List<string> bookshelves { get; set; }

    [JsonPropertyName("languages")]
    public List<string> languages { get; set; }

    [JsonPropertyName("copyright")]
    public bool copyright { get; set; }

    [JsonPropertyName("media_type")]
    public string media_type { get; set; }

    [JsonPropertyName("formats")]
    public Formats formats { get; set; }

    [JsonPropertyName("download_count")]
    public int download_count { get; set; }
}

Controller:

public async Task<IActionResult> GetBooksFromApi()
{
        var books = new BookListModel();

        using (var httpClient = new HttpClient())
        {
            using (var response = await httpClient.GetAsync("https://gutendex.com/books"))
            {
                string apiResponse = await response.Content.ReadAsStringAsync();
                books = JsonConvert.DeserializeObject<BookListModel>(apiResponse);
            }
        }
        return View(books);
}

View:

@model BookListModel

<div>
@foreach (var item in Model.results)
{
        @Model.results.ToString()
}
</div>

Json

CodePudding user response：

To transfer the incoming data to the image page, you need to pass the data to the view in the controller. In the controller, you are calling the View method and passing the books object as the parameter. This will make the books object available in the view, which you can use to display the data.

For example, you can use the @foreach loop in your view to iterate over the results property of the books object and display each result. You can then access the properties of each Result object, such as the title and authors, to display the relevant information on the page.

Here is an example of how you could display the data in your view:

@model BookListModel

<div>
@foreach (var item in Model.results)
{
        <h2>@item.title</h2>
        <p>Authors:
        @foreach (var author in item.authors)
        {
            @author.name
        }
        </p>
        <p>Subjects:
        @foreach (var subject in item.subjects)
        {
            @subject
        }
        </p>
        <p>Bookshelves:
        @foreach (var bookshelf in item.bookshelves)
        {
            @bookshelf
        }
        </p>
}
</div>

This code will display the title, authors, subjects, and bookshelves for each Result object in the results list. You can customize this code to display the information in the way that you want.

Alternative

To transfer the incoming data to the image page, you can use the Razor syntax to loop through the results and display the data for each book. For example:

@foreach (var item in Model.results)
{
<div>
<h3>@item.title</h3>
<p>Authors: @string.Join(", ", item.authors.Select(a => a.name))</p>
<p>Subjects: @string.Join(", ", item.subjects)</p>
<p>Download count: @item.download_count</p>
<img src="@item.formats.GetImageUrl()" />
</div>
}

You can also create a helper method in the Result class to get the image URL from the formats object, like this:

public class Result { // other properties

To transfer the incoming data to the image page, you can use the Razor syntax to loop through the results and display the data for each book. For example:

@foreach (var item in Model.results)
{
<div>
<h3>@item.title</h3>
<p>Authors: @string.Join(", ", item.authors.Select(a => a.name))</p>
<p>Subjects: @string.Join(", ", item.subjects)</p>
<p>Download count: @item.download_count</p>
<img src="@item.formats.GetImageUrl()" />
</div>
}

You can also create a helper method in the Result class to get the image URL from the formats object, like this:

public class Result
{
// other properties

public string GetImageUrl()
{
    // return the first image format found in the formats object, or empty string if none found
    return formats.Where(f => f.Key.StartsWith("image/")).FirstOrDefault().Value ?? "";
}

}

Then in the view, you can simply call the GetImageUrl() method to get the image URL:

@foreach (var item in Model.results)
{
<div>
<h3>@item.title</h3>
<p>Authors: @string.Join(", ", item.authors.Select(a => a.name))</p>
<p>Subjects: @string.Join(", ", item.subjects)</p>
<p>Download count: @item.download_count</p>
<img src="@item.GetImageUrl()" />
</div>
}