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的代码段：

@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被调用的地方。它在另一个表单中，因为我需要一次提交主表单和所有ViewComponent：

           <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>

一键提交多个相同表格

1 个答案: