How to populate a List in an html page?

Question

HTML

The model has an empty List, which, after filling, must be written to the DB.
That is, the user must manually write the values ​​​​for the list, as much as he wants. So far, it only occurred to me to apply string split with string values ​​separated by commas.
Maybe there is a way to make it prettier? For example, the user entered a word, clicked ok, a new field appeared that the user can fill in, or something else.
What is the trick to do this in html?
I will be glad for any help. Thank you!

Answer 1

You can either send this empty sheet for submission, or send it already filled out, for example, by clicking the save button.
To implement these actions, for example, I use:
1. Static library vue.js. To render the received data.
2. Axios. For requests to the server to get data.
3. Json data format.
In fact, it turns out like this. You go to the page. At this point, vue has a method that fires when the page loads.

mounted(){
axios.post("/Home/GetList", null).then(resp =>{
this.list = resp.data;
});
}

In this (mounted) method, we make a request to the server.
This request knocks on the GetList method in the Home controller on the server.

public JsonResult GetList(){
var res = db.TableList.GetAll();
return Json(res);
}

A request comes to the controller. In the controller, you pull data from the table and give it to the client.
Further on the client, the data is received into the list variable in vue, and the data appears dynamically.
Then the user changes some data and presses the save button. The sheet is sent to the server and the changes made by the user take place there.