将列表属性添加到我的表单并绑定其值时出现问题

Question

我有一个 .net 6 项目，其中有一个包含列表的模型的视图，但我不确定如何以正确的方式正确绑定它，因为我尝试只获取电子邮件和消息属性。你能帮帮我吗？

我的控制器：

    [HttpPost]
    public async Task<IActionResult> PreInscription([FromForm] PreInscription preInscription)
    {            
        return Json(new { response = "sucess" });
    }

我的模特：

[BindProperties]
public class PreInscription
{
    public PreInscription()
    {
        Kids = new();
    }

    [Required]
    [MaxLength(100)]
    public string FullName { get; set; }

    [Phone]
    [Required]
    public string Phone { get; set; }

    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [Required]
    public bool IsVisit { get; set; }

    public string Message { get; set; }

    public List<KidsInformation> Kids { get; set; }
}

[BindProperties]
public class KidsInformation
{
    [Required]
    public int KidsCount { get; set; }

    [Required]
    public int KidAge { get; set; }
}

我的看法：

<form asp-controller="Inscription" asp-action="PreInscription">
<section id="content">
    <div class="row">
        <div class="form-group">
            Nom Prenom
            <input asp-for="FullName" type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            Telephone
            <input asp-for="Phone" type="text" class="form-control" name="phoneNo" id="phoneNo" placeholder="Phone No" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            Email
            <input asp-for="Email" type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
            <div class="validation"></div>
        </div>
        <input asp-for="IsVisit" id="visitCheckBox" type="checkbox" name="intrest" />&nbsp;&nbsp; Visite virtuel
        <div class="form-group">
            <br />
            Enfants
            @for (int i = 0; i < 1; i++)
            {
                <div class="row" id="divAddChild" style="margin-bottom: 5px;">
                    <div class="span6 form-group">
                        <input asp-for="Kids[i].KidsCount" type="number" class="form-control" name="howMany" id="howMany" placeholder="Combien pour cet age" />
                    </div>
                    <div class="span6 form-group">
                        <input asp-for="Kids[i].KidAge" type="number" class="form-control " name="age" id="age" placeholder="Age" />
                    </div>
                </div>
            }
        </div>
        <div class="form-group">
            Message
            <textarea asp-for="Message" class="form-control" name="message" rows="12" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
            <div class="validation"></div>

            <p class="text-center">
                <button id="submitButton" class="btn btn-large btn-theme margintop10" type="submit">Envoyer</button>
            </p>
        </div>
    </div>

</section>

<script>

function runMethod(dataForm){
    $.ajax({
        url: '@Url.ActionLink("PreInscription", "Inscription")',
        type: 'POST',
        dataType: 'json',
        async: true,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(dataForm),
        success: function (response) {
            Swal.fire(
                'Submitted!',
                'Your request has been sent. Thank you!',
                'success'
            );
        },
        error: function (request, status, error) {
            //alert(request.responseText);
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: request.responseText,
            })
        }
    });
}

$(document).ready(function () {
    $('form').submit(function (event) {
        let allForm = this.serialize();
        event.preventDefault();
        runMethod(allForm);
    });

});

关于视图中的 for，当我这样做时

@for (int i = 0; i < Model.Kids; i++)

我得到空引用异常

现在，当我出于某种原因尝试时，我只收到消息和电子邮件。请帮我解决这个问题

Answer 1

基于属性名称的Asp.net core模型绑定。因此，您需要确保

<input>

标签的名称属性应与属性名称相同。

从您提供的视图代码中，您不需要手动指定 name 和 id 属性，因为

asp-for="xxx"

会自动翻译为 html 中的

name="xxx"

和 'id="xxx"'。所以只需删除

<input>

标签中的所有 name 和 id 属性即可正常工作。