时间戳

首页 > 解决方案 > 使用局部视图生成动态表单数据

c# - 使用局部视图生成动态表单数据

问题描述

在我的应用程序中，我想使用PartialView生成 ViewModel 的属性列表，但我只能添加一个，因为在添加另一个之后，它会代替前一个。有没有办法使用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);
        }

标签： c#asp.net-mvcasp.net-core

解决方案

尝试使用javascript添加新的属性，以下是我做的demo，你可以根据需要修改。

视图模型

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 Partial View , Edit :for bind Attributes list to the ProviderViewModel from view to controller ，定义 input 的 name 属性如下：

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

推荐阅读