How to include a copy button in Razor pages

Question

I'm new to .Net Razor pages and followed this tutorial by FreeCodeCamp
I made an Index page with the help of the tutorial and wanted to add a copy button beside the entries but can't find a way to do so, here is the image of how the table looks, and here is the code:

//Index.cshtml.cs
private readonly ApplicationDbContext _db;

public IndexModel(ApplicationDbContext db)
{
    _db = db;
}

public IEnumerable<PasswordEntry> PasswordEntries { get; set; }
public async Task OnGet()
{
    PasswordEntries = await _db.PasswordEntry.ToListAsync();
}

//Index.cshtml
<br />
<div class="container row p-0 m-0">
    <div class="col-9">
        <h4>Passwords</h4>
    </div>
</div>

<div class="col-12 border p-3 mt-3">
    <form method="post">
        @if (Model.PasswordEntries.Count() > 0)
        {
            <table class="table table-striped border">
                <tr class="table-secondary">
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
                    </th>
                    <th>

                    </th>
                </tr>
                @foreach (var item in Model.PasswordEntries)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(m => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Url)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Email)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Username)
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
                        </td>
                        <td>
                            <button asp-page-handler="Delete" asp-route-id="@item.Id">Delete</button>
                            <a asp-page="Edit" asp-route-id="@item.Id">Edit</a>
                        </td>
                        
                    </tr>
                }
            </table>
        }
        else
        {
            <h1>no entries available</h1>
        }
    </form>
</div>

I did try adding a copy button beside the delete and edit buttons with onClick function, on click it would call a funcition in @section Script area, but it didn't work probably cause the foreach loop ends after displaying the result, what would be a good way to implement the copy button?

Answer 1

If you want to copy the line when click Copy button,here is a demo:

<div class="col-12 border p-3 mt-3">
    <form method="post">
        @if (Model.PasswordEntries.Count() > 0)
        {
            <table class="table table-striped border">
                <tr class="table-secondary">
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
                    </th>
                    <th>
                        <label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
                    </th>
                    <th>

                    </th>
                </tr>
                @foreach (var item in Model.PasswordEntries)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(m => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Url)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Email)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Username)
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
                        </td>
                        <td>
                            <button asp-page-handler="Delete" asp-route-id="@item.Id">Delete</button>
                            <button onclick="copy(this)">Copy</button>
                            <a asp-page="Edit" asp-route-id="@item.Id">Edit</a>
                        </td>
                        
                    </tr>
                }
            </table>
        }
        else
        {
            <h1>no entries available</h1>
        }
    </form>
</div>

js:

@section Scripts{

    <script>
        function copy(t) {
            $("table")[0].innerHTML += $(t).parent().parent()[0].outerHTML;
        }
    </script>
}

result:

Update:

If you want to copy password to clipboard.Try to use the folowing js function:

 function copy(t) {
            var password = $(t).parent().parent()[0].children[4].children[0].value;
            navigator.clipboard.writeText(password);
        }