如何在asp.net core中使用ajax将表行数据发布到不带ajax的控制器

我想要实现的是，我有一个表单，可以将包含数据的行添加到html表中，这就像一个临时表，其中的所有数据都将添加到一个提交按钮中。我怎么可能做到这一点

这是我的示例表结构，其中的数据必须添加到数据库中

<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <table class="table">
        <thead>
            <tr>
                <!--some other fields-->
                <th>Amount</th>
                <th>Check #</th>
                <th>Check Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!--some other fields-->
                <td>
                    <input asp-for="Amount" class="form-control" />
                    <span asp-validation-for="Amount" class="text-danger"></span>
                </td>
                <td>
                    <input asp-for="Check_No" class="form-control" />
                    <span asp-validation-for="Check_No" class="text-danger"></span>
                </td>
                <td>
                    <input asp-for="Check_Date" class="form-control" />
                    <span asp-validation-for="Check_Date" class="text-danger"></span>
                </td>
            </tr>
            <!--row 2-->
            <!--row 3-->
            <!--row 4-->
            <!--etc..-->
        </tbody>
    </table>
</div>
<div class="form-group">
    <input type="submit" value="Create" class="btn btn-default" />
</div>

数量
检查#
核对日期

这是到目前为止我的控制器代码，我不知道我需要更改什么

// POST: Books/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("Id,Year,Month,Document_Code,GLA_Code,Expense_Code,Function_Code,Document_Reference_No,Document_Date,Quantity,Amount,Check_No,Check_Date,Remarks,Encoder")] Book book)
    {
        if (ModelState.IsValid)
        {
            _context.Add(book);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(book);
    }

//POST:Books/Create
//若要防止套印攻击，请启用要绑定到的特定属性，例如
//更多详细信息请参见http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
公共异步任务创建（[绑定（“Id、年、月、单据代码、GLA代码、费用代码、功能代码、单据参考号、单据日期、数量、金额、支票编号、支票日期、备注、编码”）]账簿）
{
if（ModelState.IsValid）
{
_添加（书本）；
wait_context.SaveChangesAsync（）；
返回重定向到操作（名称（索引））；
}
返回视图（书）；
}

我的观点和控制者需要改变什么，我们将非常感谢您的帮助

---

谢谢。

这里有几个问题

首先，如果您有一个“books”（复数）表，则需要为输入名称编制索引。然后，您还需要接受类似于

List

的内容，而不是

Book

作为操作方法的参数。仅凭提供的代码就有点难以判断，但我可以想象您正在重复这些输入，每行都有相同的名称。如果是这种情况，则仅发布最后一项的值。将其设置为项目列表可以让您发布所有项目

简单地说，这意味着您的输入需要有像

[0]这样的名称。Amount

，如果您使用

for

循环并像以下那样呈现输入，Razor将为您生成：

<input asp-for="@Model[i].Amount" class="form-control" />

如果要通过JavaScript添加额外的行（和包含的输入），则需要确保自己正确生成这些索引名称。JS模板库在这方面可能会有所帮助

---

其次，不要使用

Bind

。别这样。这是可怕的，可怕的，杀死了小狗和小猫。有关更多说明，请参阅我的帖子。改用视图模型。一般来说，您不应该发布实体类。实体类服务于数据库及其关注点，它们几乎总是与视图的关注点不同。此外，你不应该盲目地保存用户发布的内容。即使您坚持使用要绑定的实体类，您也可以通过将类的发布版本中的值映射到您创建的新实例，以指数方式提高代码的安全性和安全性。然后，您确切地知道要持久化到数据库中的内容（没有Godfasken

Bind

），并且您还可以根据需要对输入进行清理。

我遇到了类似的问题，但使用ASP.NET Core 3.1和Razor页面。我在寻找一种方法，用JavaScript在表中添加和删除行，然后发布它。我的问题是在没有Ajax的情况下发布表。根据问题和公认的答案，我可以这样做

这里是Index.cshtml.cs：

public class IndexViewModel {

    public string Name { get; set; }

    public IList<ResourceViewModel> Resources { get; set; }

}

public class ResourceViewModel {

    public string Key { get; set; }

    public string Value { get; set; }

}

public class IndexModel: PageModel {

    [BindProperty]
    public IndexViewModel ViewModel {get; set; }

    public void OnGet() {
        // You can fill your ViewModel property here.
    }

    public void OnPost() {
        // You can read your posted ViewModel property here.
    }

}

@page
@model IndexModel

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

<form method="post">
    <div class="form-group">
        <label asp-for="ViewModel.Name"></label>
        <input asp-for="ViewModel.Name" class="form-control" />
    </div>
    <div class="form-group">
        <table class="table">
            <thead>
                <th>Key</th>
                <th>Value</th>
            </thead>
            <tbody>
                @for(int i = 0; i < Model.ViewModel.Resources.Count; i++) {
                    <tr>
                        <td>
                            <input asp-for="ViewModel.Resources[i].Key" type="hidden" />
                            @Model.ViewModel.Resources[i].Key
                        </td>
                        <td>
                            <input asp-for="ViewModel.Resources[i].Value" type="hidden" />
                            @Model.ViewModel.Resources[i].Value
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

公共类索引模型{
公共字符串名称{get；set；}
公共IList资源{get；set；}
}
公共类资源视图模型{
公共字符串密钥{get；set；}
公共字符串值{get；set；}
}
公共类索引模型：PageModel{
[BindProperty]
public IndexViewModel ViewModel{get；set；}
公共互联网{
//可以在此处填充ViewModel属性。
}
邮政署公告{
//您可以在此处阅读发布的ViewModel属性。
}
}

这里是Index.cshtml：

public class IndexViewModel {

    public string Name { get; set; }

    public IList<ResourceViewModel> Resources { get; set; }

}

public class ResourceViewModel {

    public string Key { get; set; }

    public string Value { get; set; }

}

public class IndexModel: PageModel {

    [BindProperty]
    public IndexViewModel ViewModel {get; set; }

    public void OnGet() {
        // You can fill your ViewModel property here.
    }

    public void OnPost() {
        // You can read your posted ViewModel property here.
    }

}

@page
@model IndexModel

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

<form method="post">
    <div class="form-group">
        <label asp-for="ViewModel.Name"></label>
        <input asp-for="ViewModel.Name" class="form-control" />
    </div>
    <div class="form-group">
        <table class="table">
            <thead>
                <th>Key</th>
                <th>Value</th>
            </thead>
            <tbody>
                @for(int i = 0; i < Model.ViewModel.Resources.Count; i++) {
                    <tr>
                        <td>
                            <input asp-for="ViewModel.Resources[i].Key" type="hidden" />
                            @Model.ViewModel.Resources[i].Key
                        </td>
                        <td>
                            <input asp-for="ViewModel.Resources[i].Value" type="hidden" />
                            @Model.ViewModel.Resources[i].Value
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

@page
@模型索引模型
@{
ViewData[“标题”]=“索引”；
}
钥匙
价值
@for（int i=0；i

注意，我使用了

type=“hidden”

，因为我不希望用户直接编辑表。 我希望你觉得这个有用