Going back to our ASP.NET code, we can now hook up the searchDiscog function for retrieving our images. The first thing we need to do is include the reference to the search script:

<script src="~/js/discogHelper.js"></script>

With this in place, we can now expand our image section to include the search script:

<td>
  <img id="img_@index" width="150" height="150" />
  <script type="text/javascript">
      searchDiscog('@item.ResourceUrl', 'img_@index');
  </script>
</td>

Putting this all together, our Index page now looks like this:

@{
  ViewData["Title"] = "Home Page";
}
<div id="pageRoot">
  <form asp-controller="Home" asp-action="Index" class="form-inline">
    <div class="form-group mx-sm-3 mb-10">
      <input type="text" name="SearchString" class="form-control" 
         placeholder="Enter artist to search for" />
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
  </form>
</div>
@{ if (ViewBag.Result != null)
  {
    <script src="~/js/discogHelper.js"></script>
    <table class="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Artwork</th>
        </tr>
      </thead>
      <tbody>
        @{
          int index = 0;
        }
        @foreach (var item in ViewBag.Result)
        {
          <tr>
            <td>@item.Title</td>
            <td>
              <img id="img_@index" width="150" height="150" />
              <script type="text/javascript">
                  searchDiscog('@item.ResourceUrl', 'img_@index');
              </script>
            </td>
          </tr>
          index++;
        }
      </tbody>
    </table>
  }
}

Now, when we run the application, both the title and the image will be returned after we have performed a search. Rerunning the same search now gives us this:

And that's it. We have an ASP.NET Core MVC application that we can use to search for artists and retrieve titles and artwork. All of this was achieved using a combination of ASP.NET MVC, HTML, Bootstrap, C#, and TypeScript.