ASP.NET MVC/JavaScript 只有 1 个添加的输入被插入到数据库中

Question

我有一个 JS 可以将输入添加到 option-container div。

当我提交表单时，只有1个选项被添加到数据库中，并且数据库中的ID也显示为0 .这就是我的：

index.cshtml

@model AoTWiki.Models.DB.PollModel
...
<div class="form-group row">
    <h4 class="col-4 col-form-label text-light">Options <button id="addNewOptionBtn" class="btn btn-primary">+</button></h4>
    <div class="col-8">
        <div class="option-container">
        </div>
    </div>
    </div>
    <hr />
    <div class="form-group row">
        <div class="col-8 offset-4">
            <div class="row">
                <div class="col">
                    <a asp-action="index" asp-controller="home" class="btn btn-warning text-white form-control">Cancel</a>
                </div>
                <div class="col">
                    <button type="submit" class="btn btn-success form-control">Create Poll</button>
                </div>
           </div>
     </div>
</div>

@section Scripts
{
    <script>
        $("document").ready(function() {
            $("#addNewOptionBtn").click(function(e) {
                e.preventDefault();

                var count = $(".options").length;

                var newOption = "<input name='PollOptions["+count+"].OptionId' value='"+count+"' /><input name='PollOptions["+count+"].Option' placeholder='Option' /><br/><br/>";
                $(newOption).appendTo(".option-container");
            })
        });
    </script>

    <partial name="_ValidationScriptsPartial" />
}

PollController.cs

[HttpPost]
public ActionResult add(PollModel poll)
{
    if (ModelState.IsValid)
    {
        if (poll != null)
        {
            _mongo.ConnectToMongo<PollModel>("polls").InsertOne(poll);
        }
    }

    return RedirectToAction("index", "home");
}

PollModel.cs

[BsonId]
public ObjectId Id { get; set; }
public int PollId { get; set; }
public string? PollTitle { get; set; }
public IEnumerable<PollOptionModel>? PollOptions { get; set; }
public DateTime? CreatedAt { get; set; }
public bool IsActive { get; set; }

PollOptionModel.cs

[BsonId]
public ObjectId Id { get; set; }
public int OptionId { get; set; }
public string? Option { get; set; }

这是数据库的样子：

编辑：

这是调试显示的内容。我做了 3 个选项，然后按下提交。

另外值得一提的是，即使 input 中的 Id 值也是 0，即这个，如果我没记错的话，它应该根据 JS 递增：

Answer 1

看起来我们忘记用 div 和 class="options" 包裹我们的输入字段。因此 var count = $(".options").length;.

只返回 0

查看下面的更新脚本，var new option = "<div class='options'><input..."

<script>
   $("document").ready(function() {
      $("#addNewOptionBtn").click(function(e) {
         e.preventDefault();

         var count = $(".options").length;

         var newOption = "<div class='options'><input name='PollOptions["+count+"].OptionId' value='"+count+"' /><input name='PollOptions["+count+"].Option' placeholder='Option' /><br/><br/></div>";
         
         $(newOption).appendTo(".option-container");
      })
   });
</script>

ASP.NET MVC/JavaScript 只有 1 个添加的输入被插入到数据库中

ASP.NET MVC/JavaScript only 1 of added inputs is inserted into db

javascript

c#

asp.net

asp.net-mvc