locked
How to display a picture, checkbox, combobox in a table? RRS feed

  • Question

  • User1134142769 posted

    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

    Company.cs
    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; }
            }
        }
     
    HomeController.cs
    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);
             
            }
           
        }
     
    IndexVM.cs
    public class IndexVM
        {
            public IEnumerable<Company> Companies { get; set; }
            public IEnumerable<Company.Status2> companyStatus2 { get; set; }  
     
        }
     
    MockCompanyData.cs
    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;
                }
            }
     
        }
     
    Index.cshtml
    @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>
    Saturday, May 23, 2020 4:38 PM

Answers

  • User2078676645 posted

    Hi,

    I understand the difficulty you're having with this page working properly like.

    <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="@item.Picture" width="100" 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>
                                @Html.CheckBoxFor(modelItem => item.Status)
                                @*<input type="checkbox" value="" checked="@item.Status" />*@
                                @*<input type="checkbox" value=@Html.DisplayFor(modelItem => item.Status)>*@
                            </td>
                            <td>
                           @{ SelectListItem items;
                             List<SelectListItem> selectListItem = new List<SelectListItem>(); }
    @foreach (Company.Status2 status2 in Model.companyStatus2) { items = new SelectListItem(); items.Text = status2.Status; items.Value = status2.ID + ""; items.Selected = status2.ID==item.Status2Value.ID; selectListItem.Add(items); } @Html.DropDownList("companyId", selectListItem) </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>

    Regards,

    Evern

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 25, 2020 2:53 AM

All replies

  • User2078676645 posted

    Hi,

    I understand the difficulty you're having with this page working properly like.

    <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="@item.Picture" width="100" 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>
                                @Html.CheckBoxFor(modelItem => item.Status)
                                @*<input type="checkbox" value="" checked="@item.Status" />*@
                                @*<input type="checkbox" value=@Html.DisplayFor(modelItem => item.Status)>*@
                            </td>
                            <td>
                           @{ SelectListItem items;
                             List<SelectListItem> selectListItem = new List<SelectListItem>(); }
    @foreach (Company.Status2 status2 in Model.companyStatus2) { items = new SelectListItem(); items.Text = status2.Status; items.Value = status2.ID + ""; items.Selected = status2.ID==item.Status2Value.ID; selectListItem.Add(items); } @Html.DropDownList("companyId", selectListItem) </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>

    Regards,

    Evern

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 25, 2020 2:53 AM
  • User283571144 posted

    Hi frmasp897654,

    According to your codes and result image, I found you have used the wrong img src `@Html.DisplayFor(modelItem => item.Picture)` parameter. The result of `@Html.DisplayFor(modelItem => item.Picture)` isn't the right image path.

    I suggest you could try to modify this part to @item.Picture, then it will work well.

                                <img src="@item.Picture" class="rounded-circle" asp-append-version="true" alt="No Picture">
    

    More details, you could refer to below codes:

    @using CoreNormalIssue.Models;
    
    @model IndexVM;
    
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        <title>Index</title>
    </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="@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>
    </html>
    

    Best Regards,

    Brando

    Monday, May 25, 2020 5:30 AM