Add items dynamically in list in cshtml-CodePudding

I want to add dynamic fields to my table via button.

since the for loop depends on the model's count, when I add a new , I need to add another object to the list.


 <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" >Page</label>
  <input type="number" asp-for="@Model.Books[i].Page"  />
</td>

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

it doesn't work as below.

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

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

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

CodePudding user response：

If you dont want to reload the page, then you have to create html elements with javascript. In this case a new row and input with the right name= attribute (check the rendered source html from the browser).

CodePudding user response：

when I add a new , I need to add another object to the list.

Below is a work demo, you can refer to it.

Books:

 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; }
    }

BooksViewModel:

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

DynamicTableController:

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);
        }
    }

Index view:

@model  BooksViewModel

   <form  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" >Page</label>
  <input type="number" asp-for="@Model.Books[i].Page"  />
</td>

  <td>
  <label asp-for="@Model.Books[i].Price" >Price</label>
  <input type="number" asp-for="@Model.Books[i].Price"  />
  </td>
 </tr>
 
 }
       
    </table>
      <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>
    <div >
        <div >
            <button type="submit" >Create</button>
        </div>
    </div>    
    </form>

result: