I’m new to ASP.NET and I’m developing a simple CRUD web. It consist of a Notes web where you can publish/edit/delete your own notes and see and like notes from other users.

I have 2 views that share the same table with notes, the only thing that changes is the content you see in them (all the notes or only yours). So I created 2 views (Index and MyNotes) and a partial view (_NotesTable) to avoid repeating the code. The problem is that I’ve done some research and I found out that @Script section doesn’t work, so the like and delete button don’t work.
These are the simplified scripts:

//Index.cshtml
@model IndexNoteDto

@{
    ViewData["Title"] = "Notes";
    Model.ThisUrl = "Index";
}

<partial name="_SubMenu" Model="SubMenuNotes.All" />

<h1>Notes</h1>

<h5>See notes from everyone!</h5>


<partial name="Shared/_NotesTable" Model="Model" />

//MyNotes.cshtml
@model IndexNoteDto

@{
    ViewData["Title"] = "My notes";
    Model.ThisUrl = "MyNotes";
}

@if (Model.UserId == -1)
{
    <script>window.location.href = '@Url.Action("Login", "User")';</script>
}

<partial name="_SubMenu" Model="SubMenuNotes.Mine" />

<h1>Notes</h1>

<h5>All your notes, here!</h5>

<partial name="Shared/_NotesTable" Model="Model" />

//_NotesTable.cshtml
@model IndexNoteDto

<br />

<a asp-action="Create" class="btn btn-primary mb-3">Add new</a>

<!-- Delete modal -->
<div class="modal fade" id="toastRemove" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <!-- Delete functionalities -->
</div>

<table class="table">
    <thead>
    <th>User</th>
    <th>Note</th>
    <th>Importance</th>
    <th>Creation Date</th>
    <th>Likes</th>
        @if (Model.UserId != -1)
        {
        <th>Actions</th>
        }
    </thead>

    <tbody>
        @foreach (Note n in Model.Notes)
        {
            <tr id="@n.Id">
                <td id="[email protected]"> @n.User.UserName</td>
                <td id="[email protected]"> @n.Text</td>
                <td id="[email protected]"> @n.NoteImportance.Importance</td>
                <td id="[email protected]"> @n.CreationDate</td>
                <td id="[email protected]"> @n.Likes.Count</td>

                @if (Model.UserId != -1)
                {
                    <td>
                        @if (n.UserId == Model.UserId)
                        {
                            <a id="[email protected]" class="btn btn-primary" asp-action="Edit" asp-route-id="@n.Id" [email protected]><i class="bi-pencil-fill"></i></a>
                            //<a id="[email protected]" class="btn btn-danger deleteButton" asp-action="Delete" asp-route-id="@n.Id"><i class="bi-trash-fill"></i></a>
                            <a id="[email protected]" class="btn btn-danger deleteButton"><i class="bi-trash-fill"></i></a>
                        }
                        else
                        {
                            if (n.Likes.Find(item => item.UserId == Model.UserId) != null)
                            {
                                <a id="[email protected]" class="btn btn-success likeButton"><i class="bi-hand-thumbs-up-fill"></i></a>
                            }
                            else
                            {
                                @* <a id="[email protected]" class="btn btn-info likeButton" asp-action="Like" asp-route-id="@n.Id"><i class="bi-hand-thumbs-up-fill"></i></a> *@
                                <a id="[email protected]" class="btn btn-secondary likeButton"><i class="bi-hand-thumbs-up-fill"></i></a>
                            }
                        }
                    </td>
                }
            </tr>
        }
    </tbody>

</table>

@section Scripts {

    <script>

        function getNoteId(button) {
            return button.attr("id").split('-')[1];
        }

        $(function () {
            $(".deleteButton").on('click', function (e) {
                //Some functionalities
            });
        })
        
        $(function () {
            $("#toastRemoveButton").on('click', function (e) {
                
                //Some functionalities
                $.ajax({
                    //Some functionalities
                });
            });
        })
        
        
        $(function () {
            $(".likeButton").on('click', function (e) {
                //Some functionalities
                
                if (button.attr("class").includes("success")) {
                    $.ajax( {
                        //Some functionalities
                    });
                }
                else {
                    $.ajax({
                        //Some functionalities
                    });
                }
            });
        });
    </script>
}

I know I could put all the code in a single page and display some information or another based on the Model, but I think my architecture would make more sense. If I had 10 views with the same format I would have to write 10 if-else / a switch, what I think is less clean.

What would be the correct solution for this case?