首页 > 解决方案 > ASP.NET Core 5 - 具有动态字段数的表单

问题描述

我在 ASP.NET Core 5 中做一个网页项目,我遇到了以下问题。我的模型看起来像这样

  public class Performance
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public string Dates { get; set; }
        public bool DatesRange { get; set; }
        public string Author { get; set; }
        public string Role { get; set; }
        public Venue Venue { get; set; }

    }

现在,在表单中,我想为 Performance 模型的所有字段提供输入字段,日期除外。这个想法是单个表演可以有一个或多个日期,因此用户可以在创建新表演时根据需要在表单中添加额外的行。

我想做但不知道如何手动处理提交数据的绑定,因此我可以解析所有提交的日期并将它们转换为单个字符串以保存在数据库中。不过,我不确定如何,或者更确切地说,在哪里这样做,因为在点击提交按钮后触发的第一件事就是这个

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

            _context.Performance.Add(Performance);
            await _context.SaveChangesAsync();

            return RedirectToPage("./Index");
        }

并且提交的数据已经绑定到模型上。任何与模型不对应的表单字段都将被忽略。你能为我指出正确的方向吗?

标签: c#asp.netasp.net-coreasp.net-core-5.0

解决方案


您可以使用asp-page-handler从剃刀页面的内部表单发出另一个请求。此外,您需要定义日期,因为List<string>您的Performance模型看起来像

在您的剃须刀页面中,您需要设置多个帖子

<form method="post">
<input asp-for="perf.Date" value="Date" />
<button asp-page-handler="Date">Add</button>
<table>
    <th>
        <td>Date</td>
    </th>
    @if (Model.Dates != null)
    {
        for (int i = 0; i < Model.Dates.Count; i++)
        {
            <tr>
                <td>@Model.Dates[i] @Html.HiddenFor(model => Model.Dates[i])</td>
            </tr>
        }
    }
   
    
</table>
<input type="submit" value="Save"/>

cshtml.cs文件将遵循签名。OnPostDate将处理单独的帖子以添加日期。'OnPost' 将处理完整的模型发布。

  [BindProperty] public Performance perf { get; set; }
    [BindProperty] public List<string> Dates { get; set; }
    public void OnGet()
    {
        perf = new Performance();
    }

    public void OnPost()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }
        foreach (string dt in Dates)
        {    
            perf.Date = dt;
            _context.Performance.Add(Performance);
        }
        await _context.SaveChangesAsync();
        return RedirectToPage("./Index");       
    }
    public IActionResult OnPostDate()
    {
        if (Dates.Count == 0)
        {
            Dates = new List<string>();
            Dates.Add(perf.Date);
        }
        else
        {
            Dates.Add(perf.Date);
        }

        
        return Page();
    }

输出:

在此处输入图像描述


推荐阅读