Кликабельная кнопка внутри стола

Question

Я пишу Просмотр составного списка информации о сотрудниках.Представление будет отображать такую ​​информацию, как имя, фамилия, код задания и т. Д. Моя единственная проблема заключается в том, что я хотел бы, чтобы логические ячейки были нажимаемыми кнопками.

Например: столбец HasHealthcare будет содержать логические значения.

<thead>
<tr>
<th><label> FirstName</label></th>
<th><label> LastName</label></th>
<th><label> HasHealthcare</label></th>
</tr>
</thead>

<tbody>
@for (int i=0; i < Model.Employees.Count; i++)
{
<tr>
<td>@Model.Employees[i].FirstName</td>
<td>@Model.Employees[i].LastName</td>
<td>@Model.Employees[i].HasHealthcare</td>
</tr>
</tbody>

Таблица:

First Name | Last Name | Has Healthcare

Bob        |  Smith    | True

Мне бы хотелось, чтобы "True" была нажимаемой кнопкой, чтобыесли я щелкну по нему, появится противоположное логическое значение.

Answer 1

Если вы не возражаете против использования флажка, вам могут помочь:

<table>
     <thead>
            <tr>
                <th><label> FirstName</label></th>
                <th><label> LastName</label></th>
                <th><label> HasHealthcare</label></th>
            </tr>
        </thead>

    <tbody>
        @for (int i = 0; i < Model.Employees.Count; i++)
        {
            <tr>
                <td>@Model.Employees[i].FirstName</td>
                <td>@Model.Employees[i].LastName</td>
                <td>@Html.CheckBoxFor(x => x.Employees[i].HasHealthCare, false)</td>
            </tr>
        }
    </tbody>
</table>

Answer 2

Если вам нужно автоматически сохранять при каждом нажатии, вы можете использовать Ajax и JQuery, как показано ниже.И вам также потребуется соответствующий метод действия [HttPost].

<thead>
<tr>
<th><label> FirstName</label></th>
<th><label> LastName</label></th>
<th><label> HasHealthcare</label></th>
</tr>
</thead>

<tbody>
@for (int i=0; i < Model.Employees.Count; i++)
{
<tr>
<td>@Model.Employees[i].FirstName</td>
<td>@Model.Employees[i].LastName</td>
<td><a class="healthcare" data-id="@Model.Employees[i].Id" href="#">@Model.Employees[i].HasHealthcare</a></td>
</tr>
}
</tbody>

<script>
$().ready(function(){
     $(".healthcare").click(function(){
      var element = this;
      $.ajax({
        type: "POST",
        url: url,
        data: {isHealthcare:$(element).text().toLowerCase()==='true', id:$(this).data("id") },
        success: function(result){
           $(element).text(result);
        },
        dataType: "json"
     });
   });
})
</script>