使用 .NET Core Razor 頁面在單頁提交表單上儲存發票標題和發票行

Question

1.說明

#我想打開「建立」頁面，填寫發票抬頭數據，填寫發票動態行數據並將所有內容保存在一次提交中。

（* 更新程式碼） 我設法解決了 RowList 錯誤，該錯誤不允許我添加多行：

如何在 ASP.NET Core Razor 頁面中使用 AddRange 插入多行

現在我收到錯誤

1.1 錯誤

#ArgumentNullException：值不能為空。 （參數“來源”）

System.Linq.ThrowHelper.ThrowArgumentNullException（ExceptionArgument 參數）

ArgumentNullException：值不能為空。 （參數“來源”）

System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
System.Linq.Enumerable.Count<TSource>(IEnumerable<TSource> source)
EPIDENT5.Pages.Magazina.Pages_Magazina_Create.<ExecuteAsync>b__28_0() in Create.cshtml

...

@for (int i = 0; i < Model.RowList.Count(); i++)

Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.GetChildContentAsync（bool useCachedResult，HtmlEncoder編碼器） Microsoft.AspNetCore.Mvc.TagHelpers.RenderAtEndOfFormTagHelper.ProcessAsync（TagHelperContext 上下文，TagHelperOutput 輸出） Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.g__Awaited|0_0（任務任務，TagHelperExecutionContextexecutionContext，int i，int count） Create.cshtml 中的 EPIDENT5.Pages.Magazina.Pages_Magazina_Create.ExecuteAsync()

ViewData["Title"] = "Create";

我知道我錯過了一些東西，但我不明白問題出在哪裡。

2.問題

#如何做到這一點？

<强>3。前端程式碼：

<form method="post">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>


// This is the header table 



                <table class="table table-striped border-0"
                       style="width: 100%; text-align: left;">
                    <thead class="border-0">

 <tr class="border-0">
                    <td class="border-0" style="min-width:100%;">
                        <div class="border border-secondary p-4">
                            <div class="row ">
                                <div style="float:left;width:50%;">
                                    <div class="form-group m-1">
                                        <label asp-for="InvHeader.Cli" class="control-label" style="font-size:80%;">Client</label>
                                        <input asp-for="InvHeader.Cli" class="form-control" value="clients name" />
                                    </div>
                                </div>
                                <div style="float:left;width:25%;">
                                    <div class="form-group m-1">
                                        <input asp-for="InvHeader.InvDate" class="form-control" type="date" value="@(DateTime.UtcNow.Date.ToString("yyyy-MM-dd"))" />
                                        <span asp-validation-for="InvHeader.InvDate" class="text-danger"></span>
                                    </div>
                                </div>
                                <div style="float:left;width:25%;">
                                    <div class="form-group m-1">
                                        <input asp-for="InvHeader.InvNr" class="form-control" value="33" />
                                        <span asp-validation-for="InvHeader.InvNr" class="text-danger"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                    </thead>
                </table>



//This is the dynamic rows table



 <table id="table1" border="0">
            <tr style="font-size:80%;">                  
                <th style="width:50%;">Product</th>
                <th style="width:5%;">qty</th>
                <th style="width:5%;">price</th>
            </tr>
                        foreach (var item in Model.PL)
                {
                    <tr class="border-bottom">                           
                        <td>
                            <select id="Products" asp-for="@Model.PL[@i].ProdId" class="form-control" type="text" name="data[@i][ProdId]" style="width:100%;"    >
                              
                                @foreach (var item in Model.PL)
                                {
                                    <option    value="@item.ProdId"    
                                            qty="@qty"
                                        price="@Convert.ToInt32(item.price)">@item.name,   @Convert.ToInt32(item.price)</option>
                                }
                            </select>
                        </td>
                        <td><input asp-for="@Model.MR[@i].qty" class="form-control" type="text" name="qty[@i]" style="width:100%;" /></td>
                                <td><input asp-for="@Model.MR[@i].price" class="form-control" type="text" name="price[@i]" style="width:100%;" /></td>
                     </tr>
                     </table>
                     
                     </form>

4.後端程式碼

#//資料綁定部分

[BindProperty]
    public InvHeader InvHeader { get; set; } = default!;
    public IList<InvRow> RowList { get; set; }

//onget方法，其中row count id red

public IActionResult OnGetAsync()
    {

        var rr = new List<InvRow>()
        {
            new InvRow() { Name = "Apple", Qty = 5, Price = 100 },
             new InvRow() { Name = "Peach", Qty = 3, Price = 500 },
              new InvRow() { Name = "Ananas", Qty = 1, Price = 1100 },
        };

        RowList = rr;

        return Page();
    }

//Onpost方法

public async Task<IActionResult> OnPostAsync(IList<InvRow> RowList)
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

         _context.InvHeaders.Add(InvHeader);

        await _context.InvRows.AddRangeAsync(RowList);

        await _context.SaveChangesAsync();

        return RedirectToPage("./Index");
    }

Answer 1

模型綁定透過名稱屬性綁定屬性。與參數相符的正確名稱屬性應類似於：addrows[index].propertyName。

不確定頁面中的 PL 是什麼，但似乎只有 qty 和 price 輸入與 InvRows 相關模型。您需要更改兩個輸入名稱，如下所示：

如果 select 元素也與 InvRows 模型相關，只需更改 select 名稱，例如：addrows[@i].ProdId。無論如何，名稱取決於您的模型。

此外，您的頁麵包含重複的同名 foreach，這是不正確的。假設應該是：

@for(int i = 0;i
    
        

            @foreach (var item in Model.PL)
            {
                @item.name,   @Convert.ToInt32(item.price)
            }
        
    
    
    

}

您可以遵循的完整工作演示：

型號

public class InvHeaders
{
    public int CliId { get; set; }
    public DateTime InvDate { get; set; }
    public string InvNr { get; set; }
}
public class InvRows 
{
    public int qty { get; set; }
    public int price { get; set; }
}
public class Product
{
    public int ProdId { get; set; }
    public string name { get; set; }
    public int price { get; set; }
}

頁面

@page
@model IndexModel

Client

@for(int i = 0;i }

Product	qty	price
@foreach (var item in Model.PL) { @item.name, @Convert.ToInt32(item.price) }

頁面模型

public class IndexModel : PageModel
{
    [BindProperty]
    public InvHeaders InvHeader { get; set; } = default!;
    [BindProperty]
    public InvRows InvRow { get; set; } = default!;
    public IList MR { get; set; } = default!;
    public List PL { get; set; }

    public void OnGet()
    {   
        //hard-coded the value is just for easy testing
        PL = new List()
        {
            new Product(){ProdId=1,name="aa",price=12},
            new Product(){ProdId=2,name="bb",price=16},
            new Product(){ProdId=3,name="cc",price=21}
        };
    }
    public void OnPost(List addrows)
    {
         //do your stuff....
    }
}

---

請注意，下面的預設option 元素中沒有qty 或price 屬性，不確定您想做什麼，但是我需要提醒您，這對於模型綁定沒有任何意義。