I have a page that displays a list of items using a foreach loop within a form tag. Each item is displayed using a bootstrap Card. And In each card, I want to have an input field that a user can type/modify some text and then when the user clicks the update button(form's submit button), all the list items should be submitted to the Update() action method. The update action method takes a type of HomePageVM. And the HomepageVM contains one property: a list of listings
public class HomePageVM
{
public List<ListingBase> Listings { get; set; }
}
This is a skeleton of my view. I want to add the input field within each card item.
@model HomePageVM
<div class="text-center">
<div class="row justify-content-center">
<form method="post">
@{
int index = 0;
<!-- Listings start -->
@foreach (var listing in Model.Listings)
{
<div class="card border-top border-2 border-primary rounded-5 pb-2 ">
<div class="card-header text-center text-primary"><span class="m-0 p-0">@listing.Title</span></div>
<!-- Carousel Start -->
<div class="card-img-top">
<img class="img-fluid bg-secondary d-block w-100" style="height:200px;max-width:320px; max-height:200px" src="@listing.ThumbnailImage.ImageUrl" alt="https://placehold.co/300x500" />
</div>
<!-- Carousel End -->
<div class=" card-body text-center py-1 px-1">
<input id="@listing[index]" asp-for="@listing[index].Name" class="form-control" />
</div>
</div>
index++;
}
<button type="submit" asp-action="Update" asp-controller="Listing" asp-area="Admin" class="btn btn-primary">Update</button>
}
</form>
</div>
</div>
Below is my Post action method, expects as parameter a HomePageVM object
[ValidateAntiForgeryToken]
[Authorize(Roles = $"{SD.Role_User_Admin},{SD.Role_User_Emp}")]
[HttpPost]
public IActionResult UpdateListings(HomePageVM model)
{
// Update and save listings to db
// Return to index page
return View("Index");
}
However when I submit the form, the model always contains null for Listings Property. I have used index variable to give a dynamic id to each of the input fields when they're generated within the foreach loop. But still get the same result. How can a successfully post the updated list items to the action method without getting null? I've seen similar examples to this that use tables for submitting lists but I can't use table in this case. My scenario, requires I use a card because I also have to display images for each item in the list
