在视图组件中找不到字段答案

【问题标题】：Field not being found in view component在视图组件中找不到字段
【发布时间】：2020-07-06 16:31:51
【问题描述】：

好的，所以这在视图模型中可以正常工作，但是当我将它移到视图组件时它就不行了。

@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>
}

这是我在同一个视图组件中的模型

<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>

在这里我告诉它在此处附加注释 ID，但由于某种原因，它没有找到注释 ID 正在通过上面按钮的 data-id="@notes.Id" 传递的文本字段。

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

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

我收到以下错误，我认为这与 jquery 尚未准备好有关。

【问题讨论】：

试试这个 $(document).ready(function() { function myfunction(param) { } });

标签： c# asp.net-core

【解决方案1】：

这是一个使用视图组件的演示：

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>
}

查看组件/注释：

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

结果：

【讨论】：

【解决方案2】：

你应该使用 jquery 的事件绑定而不是点击。

首先通过添加其他类来更新您的锚标记。

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

然后确保@section Scripts 块位于主视图而不是局部视图上。然后使用以下方式绑定类

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

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

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

    </script>

【讨论】：