如何一键提交多个相同的表单

Question

我目前正在 ASP.NET Core MVC 中构建和应用程序，但遇到了一个我无法解决的问题。

我有一个表单，该表单应该包含多个动态添加的相同字段 (1-10)。我已经设法通过创建一个包含这些表单字段的 ViewComponent 来做到这一点，并且如果用户选择添加这些字段的另一段，我会进行 Ajax 调用以将视图组件调用到选项卡中。

    function CallViewComponent(num_tabs) {
    var data = { id: num_tabs };
    $.ajax({
        type: 'POST',
        url: '/Create/CreateActivityForm',
        cache: false,
        data: data
    }).done(function (result) {
        var container = "#activity-" + num_tabs;
        $(container).html(result);
    });
}

出现问题是因为该视图组件中的每个字段都与其他字段共享一个名称，因此每次我调用另一个视图组件时，单选按钮都会在所有相同的字段之间共享。

这是 ViewComponent 的 sn-p：

@model CreateActivityViewModel

<div class="activity-tab">
    <div class="form-group">
        <label asp-for="La.OrdinalNumber">Redni broj aktivnosti</label><br />
        <select asp-for="La.OrdinalNumber" class="ordinals" style="width:50%">
            @foreach (var on in Model.OrdinalNumbers)
            {
                <option value="@on.Value">@on.Text</option>
            }
        </select>
    </div>
    <div class="form-group">
        <label asp-for="La.Latype">Tip aktivnosti</label><br />
        <select asp-for="La.Latype" class="activity-type" style="width:50%">
            @foreach (var lt in Model.LaTypes)
            {
                <option value="@lt">@lt.LatypeName</option>
            }
        </select>
    </div>
    <div class="form-group">
        <label asp-for="La.Laname">Naziv aktivnosti</label>
        <input asp-for="La.Laname" type="text" name="La.Laname" placeholder="Unesite naziv aktivnosti" class="f1-activity-name form-control" id="f1-activity-name">
    </div>

这是我的控制器，它返回 ViewComponent：

[HttpPost]
public IActionResult CreateActivityForm(int id)
{
    return ViewComponent("ActivityTab", id);
}

这是来自 ViewComponent 的 Invoke 方法：

    public IViewComponentResult Invoke(int id)
    {
        var latypes = _laTypeRepository.GetAllLaType.ToList();
        var ordinals = new List<SelectListItem>();
        var laperformances = _laPerformanceRepository.GetAllLaPerformance.ToList();
        var teachingAids = _teachingAidRepository.GetAllTeachingAid.ToList();
        var strategyMethods = _strategyMethodRepository.GetAllStrategyMethod.ToList();
        var laCollaboration = _laCollaborationRepository.GetAllLaCollaboration.ToList();

        for (int i = 1; i <= 100; i++)
        {
            ordinals.Add(new SelectListItem($"{ i }. aktivnost", i.ToString()));
        }

        return View( new CreateActivityViewModel
        {
            FormId = id,
            LaTypes = latypes,
            OrdinalNumbers = ordinals,
            LaPerformances = laperformances,
            StrategyMethods = strategyMethods,
            Lacollaborations = laCollaboration,
            TeachingAids = teachingAids,
            TeachingAidUser = new List<TeachingAid>(),
            TeachingAidStudent = new List<TeachingAid>()
        });
    }

最后，这是调用 ViewComponent 的地方。它在另一个表单中，因为我需要一次提交主表单和所有 ViewComponents：

           <fieldset>
            <h4>Aktivnosti</h4>
            <!-- Activity Tabs -->
            <div id='activity-tabs'>
                <!-- Activity Links -->
                <ol id="#activity-links">
                    <li><a href='#activity-1'>#1</a></li>
                    <li id="add-activity"><button type="button" id='add-activity'><i class="fa fa-plus"></i></button></li>
                </ol>

                <!-- Activity Content -->
                <div id='activity-1'>
                    <h3>Aktivnost #1</h3>
                    @await Component.InvokeAsync("ActivityTab")
                </div>
            </div>
            <!-- Navigation Buttons -->
            <div class="f1-buttons">
                <button type="button" class="btn btn-previous">Prethodna</button>
                <button type="submit" class="btn btn-submit">Kreiraj scenarij</button>
            </div>
        </fieldset>

我的问题是我如何分离这些相同的表单并能够提交它们并将这些表单中的每一个存储到一个对象数组中，然后我可以将这些对象存储到数据库中。

我对所有想法持开放态度，如有必要，我会更改整个代码。

谢谢！

Answer 1

如果您有一个对象数组，则需要使用 FOR 循环而不是 FOR-EACH 来呈现组件。我喜欢将通用代码推送到共享视图中，但您可以直接在视图中编写代码。您需要设置 asp-for 属性才能将值绑定到模型

@for (int index = 0; index < Model.Resources.Count; index++)
{
    <partial name="_ResourceHidden" for="@Model.Resources[index]" />

直接渲染

@for (int index = 0; index < Model.Resources.Count; index++)
{
    <tr>
        <td>
          @Model.Resources[index].ResourceName
        </td>