Использовать частичное представление для генерации данных динамической формы

Question

В моем приложении я хочу сгенерировать список атрибутов ViewModel, используя PartialView , но я могу добавить только один, потому что после добавления другого он помещается вместо предыдущего. Есть ли способ сделать это, используя PartialView / ViewComponents или любую другую вещь? Просмотр без атрибутов: При добавлении первого атрибута: При добавлении второго первый не виден:

@model ProviderViewModel
<form asp-action="Create">
    <div>
        @Html.LabelFor(m => m.Name)
        @Html.TextBoxFor(m => m.Name)
    </div>
    <div>
        @Html.LabelFor(m => m.Url)
        @Html.TextBoxFor(m => m.Url)
    </div>
    <div>
        @Html.Label("Attributes")
    </div>
    @if (Model.Attributes.Count > 0)
    {
        @for (var i = 0; i < Model.Attributes.Count; i++)
        {
            @await Html.PartialAsync("_ProviderAttribute", Model.Attributes[i])
        }
    }
    <div>
        <input type="submit" value="+" formaction="AddAttribute" formmethod="post" />
    </div>
    <br/>
</form>

Метод AddAttribute просто добавляет новый объект в коллекцию. Добавлен Guid, чтобы убедиться, что атрибуты не совпадают.

[HttpPost]
        public IActionResult AddAttribute(ProviderViewModel provider)
        {
            provider.Attributes.Add(new AttributeViewModel
            {
                Guid = Guid.NewGuid().ToString()
            });
            return View(nameof(Provider), provider);
        }

Answer 1

Попробуйте использовать javascript для добавления нового атрибута, ниже приведена демонстрация, которую я сделал, вы можете изменить в соответствии со своими потребностями.

ViewModel

public class ProviderViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Url { get; set; }
    public List<AttributeViewModel> Attributes { get; set; }
}

public class AttributeViewModel
{
    public string Guid { get; set; }
    public string Name { get; set; }

}

Главный вид, Редактировать: использовать скрытый ввод для записи значения индекса нового элемента атрибута, а вычисление значения индекса реализовано в js

@model WebAppDemo.Models.ViewModels.ProviderViewModel

<form asp-action="Create" method="post">
<div>
    @Html.LabelFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name)
</div>
<div>
    @Html.LabelFor(m => m.Url)
    @Html.TextBoxFor(m => m.Url)
</div>
<div>
    @Html.Label("Attributes")
</div>
<div class="attribute">
   <input hidden id="index" value="0"/>
   // render partial view
</div>

<div>
    <input type="button" id="btnAdd" value="+" />
</div>
<br />
</form>

@section Scripts
{
<script type="text/javascript">
    $("#btnAdd").click(function () {
       var num = document.getElementById("index").value;
        $.ajax({
            type: "get",
            url: "/Home/AddAttribute?index=" + num,
            success: function (result) {
                $(".attribute").append(result);
                num++;
                document.getElementById("index").value = num;
            }
        });
    });
</script>
}

Метод AddAttribute, Редактировать: использовать ViewBag для сохранения индекса

public IActionResult AddAttribute(string index)
    {
        ViewBag.Index = index;
        ProviderViewModel provider = new ProviderViewModel {
            Attributes=new List<AttributeViewModel>()
        };
        provider.Attributes.Add(new AttributeViewModel
        {
            Guid = Guid.NewGuid().ToString()
        });
        return PartialView("_ProviderAttribute", provider);
    }

Частичное представление _ProviderAttribute, Редактировать: для списка атрибутов связывания с ProviderViewModel от представления к контроллеру определите атрибут имени ввода следующим образом:

@model WebAppDemo.Models.ViewModels.ProviderViewModel
@{
  ViewData["Title"] = "_ProviderAttribute";
 }
<div class="atrritem">
    <input name="Attributes[@ViewBag.Index].Guid" asp-for="Attributes[0].Guid" class="form-control" />
    <input name="Attributes[@ViewBag.Index].Name" asp-for="Attributes[0].Name" class="form-control" />
    <br />
</div>