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.