如何在新视图中从数据表中加载数据进行编辑？

Question

我有一个视图可以将数据库中的数据显示到数据表中。在表格中，我有编辑、删除和详细信息选项来执行这些相应的功能。

我的编辑和详细信息视图是不同的页面（视图）。 现在，当我单击第 2 行的编辑或删除时，它会将我带到该编辑/详细信息页面，但这些页面文本框中没有加载任何数据。

我的代码和设计如下：

加载数据表的代码：

function SearchCategory(){
    $('#tblCategory').DataTable({
        "processing": false,
        "serverSide": false,
        "searchable": false,
        "ajax": {
            url: '@Url.Action("GetValues")',
            type: 'POST',
            dataSrc: 'data',
        },
        "columns": [{ data: "CategoryId" },
                { data: "Description" },
                {
                    "render": function (data, type, row) { return '<a class="text-center" href="/Master/CategoryDetails?id="' + row.CategoryId + '"><i class="fa fa-bars"></i></a>'; }
                },
                {
                    "render": function (data, type, row) { return '<a class="text-center" href="/Master/CategoryEdit?id="' + row.CategoryId + '"><i class="fa fa-edit"></i></a>'; }
                },
                {
                    data: null, render: function (data, type, row) {
                        return '<a href="#" class="text-center" onclick=DeleteData("' + row.CategoryId + '"); ><i class="fa fa-trash-o"></i></a>';
                }
            }]
        });
    }
}

餐桌设计：

<table cellspacing="1" cellpadding="2" style="width: 100%;" id="tblCategory" class="table table-striped table-hover table-bordered table-hd">
    <thead>
        <tr class="gridheader">                                              
            <td style="width: 30%;" class="search_field" search_field_value="CategoryId">Category Id</td>
            <td style="width: 30%;" class="search_field" search_field_value="Description">Description</td>
            <td style="width: 20%;" class="search_field" search_field_value="Details">Details</td>
            <td style="width: 10%;" class="text-center">Edit</td>
            <td style="width: 10%;" class="text-center">Delete</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

我的桌子设计：

当我单击每一行中的编辑或详细信息图标时，它必须将我带到他们尊重的编辑/详细信息页面，它确实如此，但尊重的数据未加载到编辑/详细信息页面文本框中。

示例编辑页面设计：

每个详细信息和编辑页面都在不同的视图中：我在他们的脚本中尝试了类似以下的内容。

<script>
    $(document).ready(function () {
        $("#txtCategoryId").text = row.CategoryId;
        $("#txtDescription").text = row.Description;

    });
</script>

但它不工作如何做到这一点。还有如何删除选定的行？请帮助。TIA。

Answer 1

对于 SearchCategory 函数的 a 标签中的 href，试试这个：

href="@url.Action("CategoryDetails","Master", new { id = row.CategoryId })"

-> 对 CategoryEdit href 做同样的事情。

然后，确保您的函数（CategoryEdit 和 CategoryDe​​tails）将 id 作为参数并将指定 id 的模型发送到正确的视图！

视图的文件开头应该有类似@model Category 的内容。

检查this作为参考

---

编辑：

在视图中，你必须改变

row.CategoryId => @this.Model.CategoryId

与

row. Description => @this.Model.Description

我再说一遍，你的视图文件以@model Category开头很重要

查看此链接：https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/controller-methods-views?view=aspnetcore-2.2