How to enable editing in html table in asp.net mvc?

Question

I am creating a user management page in asp.net mvc and it looks like this :

This is a simple html table and its code :

<table>
    <tr>
        <th>UserID
        </th>
        <th>Username
        </th>
        <th>Password
        </th>
        <th>FirstName
        </th>
        <th>LastName
        </th>
        <th>DisplayName
        </th>
        <th>Email
        </th>
        <th>Pref. Language
        </th>
        <th>CreatedBy
        </th>
        <th>CreatedTime
        </th>
        <th>ModifiedTime
        </th>
        <th>IsAdmin
        </th>
        <th>IsActive
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model.usersList)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.userId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.userName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.password)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.firstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.lastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.displayName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.languagePreference)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.createdBy)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.createdTime)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.modifiedTime)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.isAdmin)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.isActive)
            </td>
            <td>
                <button type="submit" name="btnEditUser" onclick="EditUserBtnClick(@item.userId)" id="buttonEdit">
                    <img src="~/Images/edit-icon.png" width="20" height="20" /></button>
            </td>
            <td>
                <button type="submit" name="btnDeleteUser" onclick="DeleteUserBtnClick(@item.userId)" id="buttonDelete">
                    <img src="~/Images/delete-icon.png" width="20" height="20" /></button>
                @*                @Html.ActionLink("Edit", "EditUser", new { id=item.userId } ) |
            @Html.ActionLink("Delete", "DeleteUser", new { id=item.userId })*@
            </td>
        </tr>
    }

</table>

Now the issue. I have 2 buttons in the table for editing user details and deleting user details. I want to know if it is possible to enable editing to the table when the edit button is clicked. I tried contenteditable="true" for each <tr/> . But it doesn't seem to be a good solution.

If there is any other way to do this, please guide me. Is there any other third party control which could do this? Sorry for asking this, but I am new to this and has no idea on how to implement it.

Thanks in advance.

Answer 1

单击按钮后，调用包含文本框等的局部视图以获取数据，然后将其存储在某处并再次刷新该视图。