Question

在我的应用中，我想使用 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);
        }

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

}

主视图编辑：使用隐藏输入记录新Attribute项目的索引值，并在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>

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

1 个答案: