Question

我有一个类，我想用它作为复杂<；表单/>，下面是示例表单


// Model
public class Member
{
    [BsonId] 
    public ObjectId Id { get; set; }

    public string? Name { get; set; }
    public DateTime? Birthdate { get; set; }

    public List<MemberChild>? Children { get; set; } = new();
}

// MemberChild class
public class MemberChild
{
    public string? Name { get; set; }
    public DateTime? Birthdate { get; set; }
}

// Main form view for Member object
@model Member
<form method="post"
      autocomplete="off" action="/register">
        <div class="mb-2 ms-2">
            <label asp-for="Name"></label>
            <input asp-for="Name">
            <span asp-validation-for="Name></span>
        </div>
        <button>Add Child</button>

...and so on

现在，这个＜code＞MemberChild＜/code＞模型有自己的局部视图，看起来是这样的：
// MemberChildForm.cshtml partial view
@model MemberChild

<div>
        <input placeholder="0"
               type="hidden"
               asp-for="Name"
               class="d-inline">
        <input placeholder="0"
               type="hidden"
               asp-for="Birthdate"
               class="d-inline">
</div>

它可以从该控制器操作中获取
[HttpGet("/children-form")]
public async Task<IActionResult> AssistanceDataForm()
{
    return PartialView("MemberChildForm", assistance);
}

我希望每当用户单击“+添加子项”按钮时，都会有一个新的MemberChildForm添加到表单中
我已经尝试过使用ajax来获得“/children-form”部分视图的html部分视图，但问题是<；输入/>或名称的code>sasp与父<；表单/>，它应该是Member.Children[].Name，但它只显示Name，有内置的ASP Core解决方案吗？

为了让事情变得更容易，我想实现这样的东西https://cms.jotform.com/uploads/answers/answer/perkplanning/2110000_Screen%20Shot%202020-01-10%20at%209.30.38%20AM.png

Answer 1

在您的局部视图中，您不需要使用asp来，我建议您直接使用名称属性，因为您可以自己在其中添加索引，这里有一个基于您的项目的简单演示，希望您能帮助您解决问题。

局部视图

@model int 
<div>
    <input placeholder="xxx"
           name="Children[@Model].name"
           class="d-inline">
    <input placeholder="0"
            type="date"
           name="Children[@Model].Birthdate"
           class="d-inline">
</div>

操作

[HttpGet("/children-form")]
public async Task<IActionResult> AssistanceDataForm(int index)
{
     return PartialView("MemberChild", index);
}

查看

@model Member
<form method="post"
      autocomplete="off" action="/register">
        <div class="mb-2 ms-2">
            <label asp-for="Name"></label>
            <input asp-for="Name">
            <span asp-validation-for="Name"></span>
        </div>
        <div class="mb-2 ms-2">
            <label asp-for="Birthdate"></label>
            <input asp-for="Birthdate">
            <span asp-validation-for="Birthdate"></span>
        </div>
        <input type="hidden" value="0" id="index"/>
        <div id="child">

        </div>
    <button type="button" id="add">Add Child</button>
        <button>Create</button>
</form>

<script>
    var index = document.getElementById("index").value

    document.getElementById("add").addEventListener( click ,e=>{
        $.ajax({
            type: "Get",
            url: "/children-form?index="+index,
            success: function(data){
                document.getElementById("child").insertAdjacentHTML("beforeend", data)
                index++; // Increment the index value
                document.getElementById("index").value = index; // Update the hidden field value
            }
        })
    })
</script>

Gif演示

友情链接