1. How to display a picture, checkbox, combobox for the current model in the table?
2. How to make the model correctly in order to display a picture, checkbox, combobox in the table?
Currently, I get the result, which is shown in the picture.
ASP.NET Core 3.1
public class Company { public int Id { get; set; } public string Picture { get; set; } public string Name { get; set; } public string Description{ get; set; } public bool Status { get; set; } public Status2 Status2Value { get; set; } public class Status2 { public int ID { get; set; } public string Status { get; set; } } }</div> <div> </div> <div>HomeController.cs</div> <div>public class HomeController : Controller { public IActionResult Index() { List<Company> companies_List = new List<Company>(); companies_List = MockCompanyData.CompanyList_prop; List<Company.Status2> status2_List = new List<Company.Status2>(); status2_List = MockCompanyData.CompanyStatus2_prop; IndexVM indexVM = new IndexVM { Companies = companies_List, companyStatus2 = status2_List }; return View(indexVM); } }</div> <div> </div> <div>IndexVM.cs</div> <div>public class IndexVM { public IEnumerable<Company> Companies { get; set; } public IEnumerable<Company.Status2> companyStatus2 { get; set; } }</div> <div> </div> <div>MockCompanyData.cs</div> <div>static class MockCompanyData { static string mainPathForImg = @""; static List<Company.Status2> companyStatus2List = new List<Company.Status2> { new Company.Status2 {ID=1, Status = ""}, new Company.Status2 {ID=2, Status = "Yes"}, new Company.Status2 {ID=3, Status = "No"} }; static List<Company> companyList = new List<Company> { new Company {Id = 1, Picture = mainPathForImg + @"~/img/number_1_blue.png", Name ="Name_Company_1", Description ="Description_1", Status = true, Status2Value = companyStatus2List[0]}, new Company {Id = 2, Picture = mainPathForImg + @"~/img/number_2_blue.png", Name ="Name_Company_2", Description ="Description_2", Status = false, Status2Value = companyStatus2List[1]}, new Company {Id = 3, Picture = mainPathForImg + @"~/img/number_3_blue.png", Name ="Name_Company_3", Description ="Description_3", Status = true, Status2Value =companyStatus2List[0]} }; public static List<Company> CompanyList_prop { get { return companyList; } set { companyList = value; } } public static List<Company.Status2> CompanyStatus2_prop { get { return companyStatus2List; } set { companyStatus2List = value; } } }</div> <div> </div> <div>Index.cshtml</div> <div>@using WebApplCore.Core.ViewModels;
@using WebApplCore.Models;
@model IndexVM;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <head> <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css" /></head> <body> <div class="container"> <table class="table table-sm table-hover table-striped"> <thead class="thead-dark"> @{var headerMetadata = Model.Companies.FirstOrDefault();} <tr> <th> @Html.DisplayNameFor(model => headerMetadata.Id) </th> <th> @Html.DisplayNameFor(model => headerMetadata.Picture) </th> <th> @Html.DisplayNameFor(model => headerMetadata.Name) </th> <th> @Html.DisplayNameFor(model => headerMetadata.Description) </th> <th> @Html.DisplayNameFor(model => headerMetadata.Status) </th> <th> @Html.DisplayNameFor(model => headerMetadata.Status2Value) </th> <th></th> </tr> </thead> <tbody> @foreach (Company item in Model.Companies) { <tr> <td> @Html.DisplayFor(modelItem => item.Id) @*@item.Id*@ </td> <td> <img src="@Html.DisplayFor(modelItem => item.Picture)" class="rounded-circle" asp-append-version="true" alt="No Picture"> </td> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Description) </td> <td> <input type="checkbox" value=@Html.DisplayFor(modelItem => item.Status)> </td> <td> <select name="companyId" class="form-control"> @foreach (Company.Status2 status2 in Model.companyStatus2) { <option value="@status2.ID">@Html.DisplayFor(modelItem => status2.Status)</option> } </select> </td> <td> <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> | <a asp-action="Details" asp-route-id="@item.Id">Details</a> | <a asp-action="Delete" asp-route-id="@item.Id">Delete</a> </td> </tr> } </tbody> </table> </div></body>
</div> <div></div> <div>
</div>