在cshtml列表中动态添加项目答案

【问题标题】：Add items dynamically in list in cshtml在cshtml列表中动态添加项目
【发布时间】：2022-11-21 17:39:28
【问题描述】：

我想通过按钮将动态字段添加到我的表中。

由于 for 循环取决于模型的计数，因此当我添加一个新对象时，我需要将另一个对象添加到列表中。


 <button type="button" onclick="addBtn()">Add</button>

 <table>
    <tr>
       <th>Page</th>
       <th>Price</th>
    </tr>
<button type="button" onclick="RazorFunction()">Click</button>

@for (int i = 0; i < Model.Books.Count; i++)
{
 tr>
  <td>
  <label asp-for="@Model.Books[i].Page" class="control-label">Page</label>
  <input type="number" asp-for="@Model.Books[i].Page" class="form-control" />
</td>

  <td>
  <label asp-for="@Model.Books[i].Price" class="control-label">Price</label>
  <input type="number" asp-for="@Model.Books[i].Price" class="form-control" />
  </td>
 </tr>
 }
</table>

它不起作用，如下所示。

@section Scripts {
    <script>
        function addBtn() {

        @Model.Books.Add(new BooksDto() { Page = 500, Price = 0 });

        }
    </script>
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

【问题讨论】：

你能分享一些关于你的模型的代码吗？
你现在的看法是什么？此外，您能否解释一下“在列表中动态添加项目”？如何向表中添加动态字段？结果视图是什么样的？

标签： c# asp.net asp.net-mvc asp.net-core razor

【解决方案1】：

如果您不想重新加载页面，则必须使用 javascript 创建 html 元素。在这种情况下，新行和输入具有正确的 name= 属性（从浏览器检查呈现的源 html）。

【讨论】：

【解决方案2】：

当我添加一个新的时，我需要将另一个对象添加到列表中。

下面是一个工作演示，你可以参考它。

图书：

 public class Books
    {
        public int Page { get; set; }
        public int Price { get; set; }  
    }

BooksDto：

 public class BooksDto
    {
        public int Page { get; set; }
        public int Price { get; set; }
    }

图书视图模型：

 public class BooksViewModel
    {       
        public int Id { get; set; }
        public List<Books> Books { get; set; }
        public List<BooksDto> BooksDto { get; set; }
    }

动态表控制器：

public class DynamicTableController : Controller
    {
        public IActionResult Index()
        {
            var books = new List<Books>()
            {
                new Books(){Page=1,Price=1},
                new Books(){Page=2,Price=2},
                new Books(){Page=3,Price=3},
            };//you can use your data...
            var model = new BooksViewModel() { Books = books };
            return View(model);
        }
        [HttpPost]      
        public IActionResult Index(BooksViewModel BooksViewModel)
        {
            var addBooksDto = BooksViewModel.BooksDto.Select(x => new Books() {Page=x.Page,Price=x.Price });
            BooksViewModel.Books.AddRange(addBooksDto);
            return View(BooksViewModel);
        }
    }

索引视图：

@model  BooksViewModel

   <form class="form-horizontal" method="post" >
 
     <button type="button" onclick="addBtn()">Add</button>
        <table id="myTable"  >
        <tr>
            <th>Page</th>
            <th>Price</th>
           
        </tr>
        @for (int i = 0; i < Model.Books.Count; i++)
{
 <tr>
  <td>
  <label asp-for="@Model.Books[i].Page" class="control-label">Page</label>
  <input type="number" asp-for="@Model.Books[i].Page" class="form-control" />
</td>

  <td>
  <label asp-for="@Model.Books[i].Price" class="control-label">Price</label>
  <input type="number" asp-for="@Model.Books[i].Price" class="form-control" />
  </td>
 </tr>
 
 }
       
    </table>
    
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Create</button>
        </div>
    </div>    
    </form>
    <script type="text/javascript">
        var mytab = document.getElementById("myTable");
        var i = 0;
        function addBtn() {
            document.getElementById("myTable").style.display = "block";
            document.getElementById("myTable").insertRow(-1).innerHTML =
               '<td>  <input type="number" name="BooksDto[' +i + '].Page"    value="500"/>       </td><td> <input type="number" name="BooksDto[' + i + '].Price" value="0" />    </td>';
            i++;
           
        }
    </script>

结果：

【讨论】：