ASP.NET MVC/JavaScript 添加带有 JS 的表单元素 & link 元素到模型

Question

我正在尝试制作一个页面，您可以在其中按下一个按钮 'Add Option'，它会在运行时向表单添加另一个 <input asp-for>，然后它会附加新的将 <input asp-for> 的值添加到模型的 IEnumerable<PollOption>.

如果可能的话，使用 JavaScript 的最佳方法是什么？

这是我的：

index.cshtml

<form method="post">
    <div id="optionsContainer" class="col-8 pt-4">
        <div class="form-group row">
            <div class="col-6 text-center text-light">
                Poll Title
            </div>
            <div class="col-6">
                <input asp-for="PollTitle" class="form-control" />
            </div>
        </div>
        <br />
        <div class="form-group row">
            <button id="addNewOptionBtn" class="btn btn-primary">Add New Option</button>
            <div class="col-6 text-center text-light">
                Options:
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-success form-control">Create Poll</button>
</form>

PollModel

[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

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

感谢任何帮助。

Answer 1

添加 div 名称 class option-container。

<form method="post">
    ...
    <div class="form-group row">
       <button id="addNewOptionBtn" class="btn btn-primary">Add New Option</button>
       <div class="col-6 text-center text-light">
          Options:
          <div class="option-container">
          </div>
       </div>
    </div>
    ...
</form>

然后添加此脚本（jquery 默认包含在 .net mvc 中），这将为您的按钮添加一个点击事件，该事件将添加输入字段。

@section scripts {
   <script>
      $(document).ready(function(){

         // click event
         $("#addNewOptionBtn").click(function(e){
            e.preventDefault();

            // this will be used as the index of the Ienumerable
            var count = $(".options").length;

            // new input fields to be inserted
            var newOption = "<input name='PollOptions["+count+"].OptionId' placeholder='Option ID' value='"+count+"' /><input name='PollOptions["+count+"].Option' placeholder='Option' /><br/><br/>";

            // insert the new input fields
            $(newOption).appendTo(".option-container");
         })
      });
   </script>
}

在您的表单中点击提交，在您的代码上添加一个断点并检查新的投票选项是否绑定到该模型。

ASP.NET MVC/JavaScript 添加带有 JS 的表单元素 & link 元素到模型

ASP.NET MVC/JavaScript Add form element with JS & link element to model

javascript

jquery

asp.net-mvc

asp.net-core-mvc