Home > Blockchain >  Populate DropDown List in MVC App that Consumes a Web API
Populate DropDown List in MVC App that Consumes a Web API

Time:06-08

I have a simple MVC app that is consuming a web api via REST. The controller in the MVC app makes http calls to the web api to populate views within the MVC app with razor syntax.

I am trying to figure out how to populate a drop down list on one of the 'create' actions. I'm currently just using the scaffolded page:

@model ComicBookInventory.Shared.ComicBookWithAuthorsAndCharactersViewModel

@{
    ViewData["Title"] = "CreateComicBook";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>CreateComicBook</h1>

<hr />
<div >
    <div >
        <form asp-action="CreateComicBook">
            <div asp-validation-summary="ModelOnly" ></div>
            <div >
                <label asp-for="Id" ></label>
                <input asp-for="Id"  />
                <span asp-validation-for="Id" ></span>
            </div>
            <div >
                <label asp-for="Title" ></label>
                <input asp-for="Title"  />
                <span asp-validation-for="Title" ></span>
            </div>
            <div >
                <label asp-for="Description" ></label>
                <input asp-for="Description"  />
                <span asp-validation-for="Description" ></span>
            </div>
            <div >
                <label >
                    <input  asp-for="IsRead" /> @Html.DisplayNameFor(model => model.IsRead)
                </label>
            </div>
            <div >
                <label asp-for="DateRead" ></label>
                <input asp-for="DateRead"  />
                <span asp-validation-for="DateRead" ></span>
            </div>
            <div >
                <label asp-for="Rating" ></label>
                <input asp-for="Rating"  />
                <span asp-validation-for="Rating" ></span>
            </div>
            <div >
                <label asp-for="Genre" ></label>
                <input asp-for="Genre"  />
                <span asp-validation-for="Genre" ></span>
            </div>
            <div >
                <label asp-for="CoverUrl" ></label>
                <input asp-for="CoverUrl"  />
                <span asp-validation-for="CoverUrl" ></span>
            </div>
            <div >
                <input type="submit" value="Create"  />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{
    await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}

Which gets populated from this action in the controller:

        public async Task<IActionResult> CreateComicBook(ComicBookWithAuthorsAndCharactersViewModel model)
        {
            string uri = $"https://localhost:5001/api/comicbook/add-book/";
            HttpClient client = _httpClientFactory.CreateClient(
                    name: "ComicBookInventory.Api");

            var postTask = await client.PostAsJsonAsync<ComicBookWithAuthorsAndCharactersViewModel>(uri, model);

            if (postTask.IsSuccessStatusCode)
            {
                return RedirectToAction("GetAllComics");
            }
            else
            {
                return View(model);
            }
        }

Here is the view model definition:

namespace ComicBookInventory.Shared
{
    public class ComicBookWithAuthorsAndCharactersViewModel
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public bool IsRead { get; set; }
        public DateTime? DateRead { get; set; }
        public int? Rating { get; set; }
        public string Genre { get; set; }
        public string? CoverUrl { get; set; }

        /// <summary>
        /// Navigation properties
        /// </summary>
        /// a book can have many authors
        public ICollection<string>? AuthorNames { get; set; }
        public ICollection<string>? CharacterNames { get; set; }

    }
}

My question is, I want to add a drop down checklist to the view, so that when I am creating a comic book, I can select Authors that currently exist in the database. The same for characters.

Here is the entire code base in case anyone is interested: enter image description here

  • Related