如何以asp.net core razor页面形式提交相关实体？

Question

我有两个型号Invoice和Product，一张发票可以像往常一样有很多产品。

public class InvoiceModel
{
    public string Name { get; set; }
    public string Description { get; set; }

    [Required(ErrorMessage = "Products are required!")]
    public List<ProductModel> Products { get; set; }

}

public class ProductModel
    {
        public string Name { get; set; }
        public string Model { get; set; }
        public string Brand { get; set; }
    }

我想用产品创建一张新发票。

所以当我为发票创建生成剃须刀页面时，它只为Name 和Description 生成输入字段，

然后我将产品表和按钮添加到表单中，当用户单击添加产品按钮时，使用 jsscript 将新行添加到表中。

我已经参考了这个Url 来绑定复杂的对象列表，但是当我提交表单时，新添加的产品并没有发布到服务器端。

谁能指出解决此问题的正确方法，

谢谢

Answer 1

试试我下面的代码和截图中的测试结果。

@page
@model IndexModel
@{

}
<h3>@ViewData["confirmation"]</h3>
<form class="form-horizontal" method="post">
    <div class="form-group">
        <label for="Name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input asp-for="CC.Name" type="text" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="Description" class="col-sm-2 control-label">Description</label>
        <div class="col-sm-10">
            <input asp-for="CC.Description" type="text" class="form-control">
        </div>
    </div>


    <script type="text/javascript">
        var mytab = document.getElementById("myTable");
        var i = 0;
        function myfunction() {
            document.getElementById("myTable").style.display = "block";
            document.getElementById("myTable").insertRow(-1).innerHTML =
                '<td>  <input type="text" name="cc.Products[' +i + '].Name" />       </td><td> <input type="text" name="cc.Products[' + i + '].Model" />    </td><td>     <input type="text" name="cc.Products[' + i + '].Brand" />       </td>';
            i++;
           
        }

    </script>
    <button type="button" onclick="myfunction()">Add Product</button>



    <table id="myTable" style="display: none;" class="table table-striped">
        <tr>
            <th>Name</th>
            <th>Model</th>
            <th>Brand</th>
        </tr>
    </table>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Create</button>
        </div>
    </div>
</form>

enter image description here

enter image description here

Answer 2

根据您的描述，我猜您输入的标签名称错误，这就是您无法获取 ProductModel 值的原因。

如果你的 post 方法的参数名称像 public InvoiceModel ProductModels { get; set; }，那么表的名称应该像 ProductModels.Products[0].Name 和 ProductModels.Products[1].Name。

更多细节，您可以参考以下代码：

<form class="form-horizontal" method="post">
    <div class="form-group">
        <label for="Name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input asp-for="ProductModels.Name" type="text" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="Description" class="col-sm-2 control-label">Description</label>
        <div class="col-sm-10">
            <input asp-for="ProductModels.Description" type="text" class="form-control">
        </div>
    </div>
    <button type="button" onclick="myFunction()">Add Product</button>
    <table id="myTable">
        <tr>
            <td>Name</td>
            <td>Model </td>
            <td>Brand</td>
        </tr>

        <tr>
            <td>
                <input type="text" name="productModels.Products[0].Name" />
            </td>
            <td>
                <input type="text" name="productModels.Products[0].Model" />
            </td>
            <td>
                <input type="text" name="productModels.Products[0].Brand" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="productModels.Products[1].Name" />
            </td>
            <td>
                <input type="text" name="productModels.Products[1].Model" />
            </td>
            <td>
                <input type="text" name="productModels.Products[1].Brand" />
            </td>
        </tr>
    </table>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Create</button>
            </div>
        </div>


</form>

后端：

    [BindProperty]
    public InvoiceModel ProductModels { get; set; }
    public void OnGet()
    {

    }

    public void OnPost(InvoiceModel productModels)
    {
        //var Name = Request.Form["Name"];
        //var Description = Request.Form["Description"];
        var Name = Request.Form["Name"];
        var Model = Request.Form["Model"];
        var Brand = Request.Form["Brand"];
        ViewData["confirmation"] = $"{Name},{Model},{Brand}";


    }

结果：