如何使用 C# 在 Core MVC 中创建网格 ASP.NET 在其中插入记录并将整个数据保存到数据库中

Question

我想创建一个接受多个数据的网格或表，就像我们在 ASP.NET Web表单中所做的那样。

将有一个包含"名称"、"FName"、"类"和"性别"字段的表单以及文本框，包括表单末尾的"添加"按钮，用于在表/网格中添加数据。

网格/表将具有与字段名称相同的名称列。网格/表格将位于表单下方，表格/网格下方将有一个保存按钮。当我单击"保存"按钮时，表/网格中的数据应保存在数据库中。

我想在后端

使用 C# 的 ASP.NET Core MVC 中尝试这个。

我希望表单的数据应该添加到table/grid中，然后我应该能够通过单击"保存"按钮将网格/表中的数据保存到数据库。

伙计们，你们对此有什么建议吗？

Answer 1

你可以尝试使用另一个组件，我推荐MVC6网格 http://mvc6-grid.azurewebsites.net/

基本上它使用几乎相同的语法，所以你当前的代码会有细微的更改，请检查下面的示例代码

@model IEnumerable<PersonModel>
@(Html
.Grid(Model)
.Build(columns =>
{
columns.Add(model => model.Name).Titled("Name");
columns.Add(model => model.Surname).Titled("Surname");
columns.Add(model => model.Age).Titled("Age");
columns.Add(model => model.Birthday).Titled("Birth date");
columns.Add(model => model.IsWorking).Titled("Employed");
//popup part
columns.Add(model => $"<a  data-modal='' data-id="{model.Id}"     href='PasswordRestUser/{model.Id}'      id="ss"  asp-    action="PR" asp-route-id="@item.Id" class="btn     btn-info" '> PR <span class='glyphicon      glyphicon-user'> </span> </a>").Encoded(false);
})
.Filterable()
.Sortable()
.Pageable()
)
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

它还具有许多其他功能，这些功能将使.netcore变得更容易。

Answer 2

您可以尝试使用 JQuery 获取添加的数据列表并将它们发送到控制器。

这是一个简单的演示：

模型学生

信息和学生视图模型

public class StudentInfo
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string FName { get; set; }
    public string Class { get; set; }
    public string Gender { get; set; }
}
public class StudentViewModel
{
    public  List<StudentInfo> StudentInfos { get; set; }
}

控制器

 [HttpPost]
    public async Task<IActionResult> InsertStudents([FromBody]StudentViewModel studentVM)
    {
        List<StudentInfo> model = studentVM.StudentInfos;
        _context.AddRange(model);
        int insertedRecords=await _context.SaveChangesAsync();
        return Json(insertedRecords);
    }

视图

<table id="tblStudents" class="table" cellpadding="0" cellspacing="0">
<thead>
    <tr>
        <th style="width:150px">Name</th>
        <th style="width:150px">FName</th>
        <th style="width:150px">Class</th>
        <th style="width:150px">Gender</th>
        <th></th>
    </tr>
</thead>
<tbody>   
</tbody>
<tfoot>
    <tr>
        <td><input type="text" id="txtName" /></td>
        <td><input type="text" id="txtFName" /></td>
        <td><input type="text" id="txtClass" /></td>
        <td><input type="text" id="txtGender" /></td>
        <td><input type="button" id="btnAdd" value="Add" /></td>
    </tr>
</tfoot>
</table>
<br />
<input type="button" id="btnSave" value="Save All" />

JavaScript

@section Scripts
{
<script type="text/javascript">
$("body").on("click", "#btnAdd", function () {
    //Reference the Name and Country TextBoxes.
    var txtName = $("#txtName");
    var txtFName = $("#txtFName");
    var txtClass = $("#txtClass");
    var txtGender = $("#txtGender");
    //Get the reference of the Table's TBODY element.
    var tBody = $("#tblStudents > TBODY")[0];
    //Add Row.
    var row = tBody.insertRow(-1);
    //Add Name cell.
    var cell = $(row.insertCell(-1));
    cell.html(txtName.val());
    //Add FName cell.
    cell = $(row.insertCell(-1));
    cell.html(txtFName.val());
    //Add Class cell.
    cell = $(row.insertCell(-1));
    cell.html(txtClass.val());
    //Add Gender cell.
    cell = $(row.insertCell(-1));
    cell.html(txtGender.val());
    //Clear the TextBoxes.
    txtName.val("");
    txtFName.val("");
    txtClass.val("");
    txtGender.val("");
});

$("body").on("click", "#btnSave", function () {
    //Loop through the Table rows and build a JSON array.
    var students = new Array();
    $("#tblStudents TBODY TR").each(function () {
        var row = $(this);
        var student = {};
        student.Name = row.find("TD").eq(0).html();
        student.FName = row.find("TD").eq(1).html();
        student.Class = row.find("TD").eq(2).html();
        student.Gender = row.find("TD").eq(3).html();
        students.push(student);
    });
    //Populate invoice data
    var studentVM = {};
    studentVM.StudentInfos = students;
    //Send the JSON array to Controller using AJAX.
    $.ajax({
        type: "POST",
        url: "/StudentInfoes/InsertStudents",
        data: JSON.stringify(studentVM),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            alert(r + " record(s) inserted.");
        }
    });
});
</script>
}