Field not being found in view component

Question

Ok So this works fine in a view model but when i move it out to a view component it doesnt.

@foreach (var notes in Model) {
        <tr>
            <td>@notes.LastModifedDate</td>
            <td>@notes.LastModifiedBy</td>
            <td>@notes.Notes </td>
            <td>
                <a class="btn btn-app">
                    <i class="fas fa-edit"></i> Edit
                </a>
                |<p>@notes.Id</p>   <a href="#" class="btn btn-success" data-id="@notes.Id" onclick="deleteModal(@notes.Id)" data-toggle="modal" data-target="#deleteLink"><i class="glyphicon glyphicon-trash"></i>Delete </a>

            </td>
        </tr>
}

This is my Model in the same view component

<div id="deleteLink" class="modal fade" role="dialog">
  <div class="modal-dialog">
    @using (Html.BeginForm("DeleteNotes", "MISObjects", FormMethod.Post)) {
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete Record!</h4>
            </div>
            <div class="modal-body">
                Are you sure you wish to delete this record ?.
                <!--this is how to pass the id through-->
                <input type="text" name="linkId" id="linkId" />

            </div>
            <div class="modal-footer">
                <button type="submit" id="btnSubmit" class="btn btn-danger"
                        onclick="$('#testForm').submit()">
                    Yes
                </button>
                <button class="btn btn-warning" data-dismiss="modal">No</button>
            </div>
        </div>
    }
  </div>
</div>

Here I am telling it to attach the notes Id here but for some reason its not finding the text field the notes id is being passed through the data-id="@notes.Id" of the button above.

@section Scripts
 {
  <script>
    function deleteModal(id) {
        alert(id);
        $("#linkId").val(id);
    }

    function EditModal(id) {
        $("#editMode").val(id);
    }
 </script>
}

I am getting the following error I presume this will be something to do with jquery not ready at this point.

Answer 1

Here is a worked demo to use view component:

TestViewComponent.cshtml:

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

<h1>TestViewComponent</h1>

<div>
    @await Component.InvokeAsync("Notes", new List<notes> { new notes { Id = "1", Notes = "note1", LastModifedDate = "2020/01/01", LastModifiedBy = "Joy" }, new notes { Id = "2", Notes = "note2" }, new notes { Id = "3", Notes = "note3" } })

</div>
@section Scripts
 {
    <script>
    function deleteModal(id) {
        alert(id);
        $("#linkId").val(id);
    }

    function EditModal(id) {
        $("#editMode").val(id);
    }
    </script>
}

Shared/Components/Notes/Default.cshtml:

@model IEnumerable<notes>

@foreach (var notes in Model)
{
    <tr>
        <td>@notes.LastModifedDate</td>
        <td>@notes.LastModifiedBy</td>
        <td>@notes.Notes </td>
        <td>
            <a class="btn btn-app">
                <i class="fas fa-edit"></i> Edit
            </a>
            |<p>@notes.Id</p>   <a href="#" class="btn btn-success" data-id="@notes.Id" onclick="deleteModal(@notes.Id)" data-toggle="modal" data-target="#deleteLink"><i class="glyphicon glyphicon-trash"></i>Delete </a>

        </td>
    </tr>
}

ViewComponents/Notes:

 public class Notes:ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(List<notes> list)
        {
            return View(list);
        }
    }

Result:

Answer 2

You should use jquery's event binding instead of on click.

1. First update your anchor tag by adding additional class.

<a href="#" class="delete-notes btn btn-success" data-id="@notes.Id" data-toggle="modal" data-target="#deleteLink"><i class="glyphicon glyphicon-trash"></i>Delete </a>

2. Then ensure that the @section Scripts block is on the main view not the partial view. Then bind the class using the following

    <script>
        $(window).on("load", function () {

            $(".delete-notes").on('click', function () {
                alert($(this).attr("data-id"));
            });

            function EditModal(id) {
                $("#editMode").val(id);
            }
        })

    </script>