How to display gender as text instead of checkbox bool in View in MVC

Question

How can I display text Male or Female of gender which is of type bool in table of a view in MVC. Currently, when I added new column Empgender for a DB First approach I'm getting checkboxes for gender column. How can I format this with text. I tried with ternary operator over the column but its not working. My Model :

    public partial class EmployeeInfo
    {
        public int Empid { get; set; }
        public string Empname { get; set; }
        public Nullable<int> Empsalary { get; set; }
        public bool Empgender { get; set; }
    }

My view for displaying the records :

@model IEnumerable<WebApplication1.Models.EmployeeInfo>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Empname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Empsalary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Empgender)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Empname)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Empsalary)
        </td>
        <td>
            @Html.DisplayFor(modelItem =>  item.Empgender)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Empid }) |
            @Html.ActionLink("Details", "Details", new { id=item.Empid }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Empid })
        </td>
    </tr>
}

</table>

My current result :

Answer 1

How can I display text Male or Female of gender which is of type bool in table of a view in MVC. Currently, when I added new column Empgender for a DB First approach I'm getting checkboxes for gender column. How can I format this with text.

Actually, it can simply be resolved by using if conditional within your foreeach loop. Apart from this, a alternative way can also meet your expected output. I have tried with your snippet and both scenarios working as expected. You can refer to below sample:

Controller:

public IActionResult Index()
        {

            var listEmployee = new List<EmployeeInfo>()
            {
                new EmployeeInfo() { Empid=1,Empname="Dev", Empsalary=95000, Empgender = true },
                new EmployeeInfo() { Empid=2,Empname="Maria", Empsalary=75000, Empgender = false },
                new EmployeeInfo() { Empid=3,Empname="Tim", Empsalary=55000, Empgender = true }

            };
            return View(listEmployee);
        }

View:

@model IEnumerable<ProjectName.Model.EmployeeInfo>

@{
    ViewData["Title"] = "Index";
}

<h2>Employee List</h2>


<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Empid)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Empname)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Empsalary)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Empgender)
            </th>
            <th>
                Employees Details
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Empid)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Empname)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Empsalary)
                </td>

                @if (item.Empgender)
                {
                    <td>Female</td>
                }
                else
                {
                    <td> Male </td>
                }

                <td>
                    <a asp-action="Details" class="btn btn-primary" asp-route-id="@item.Empid">Details</a> |  <a asp-action="Edit" class="btn btn-success" asp-route-id="@item.Empid">Edit</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Alternative Way:

As displayFor tag helper requires IEnumerable so you cannot pass ternary operator directly which would cause runtime exception. Instead you can call it within a variable inside foreeach loop and then pass the value in @Html.DisplayName tag helper that will also meet your requirement.

Here is the example:

<tbody>
        @foreach (var item in Model)
        {

            var gender = @item.Empgender ? "Male" : "Female";

            <tr>
                <td>
                    @Html.DisplayName(gender)
                </td>
            </tr>
        }
    </tbody>

Output:

Note: Please refer to this official document, in order to learn more about ternary operator and it's implementation.