javascript - How to add items entered in a dynamic HTML table to a model-bound list

I am using .NET CORE MVC for making some forms for the user to add people to a system (A manual process). One of the forms I've got is a simple multi-add user form that allows the user to enter names on the form and click submit, where it is then serialized and converted into a PDF document to be saved to the local machine.

I wanted to make this with a dynamic HTML Table in mind so I've got the following setup. The intent here is to allow a table to start initially with a single empty, editable row and give the ability to add rows as they need, while binding each row to a list of objects on the model.

User class

    [Serializable]
    public class User
    {
        [Display(Name = "M.I.")]
        public string MiddleInitial { get; set; }

        [Display(Name = "Suffix")]
        public string NameSuffix { get; set; }

        [Required(AllowEmptyStrings = false)]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required(AllowEmptyStrings = false)]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
    }

MultiAddUser class

[Serializable]
public class MultiAddUser
{
    [Required]
    [Display(Name = "Start Date")]
    public DateTime StartDate { get; set; }
    public List<User> Users { get; set; }

    public MultiAddUser()
    {
        Users = new List<User>();
    }
}

My view has the following code that displays the basic table with inputs in the cells with the ability to add cells on the fly.

@using Contract
@model MultiAddUser

@section Scripts{

    <script>
        function addRow() {
            var table = document.getElementById("MultiAddUserTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = '<input type="text" />';
            var cell2 = row.insertCell(1);
            cell2.innerHTML = '<input type="text" />';
            var cell3 = row.insertCell(2);
            cell3.innerHTML = '<input type="text" />';
            var cell4 = row.insertCell(3);
            cell4.innerHTML = '<input type="text" />';
        }
    </script>
}

<style>
    input {
        width: 100%;
    }
</style>

<body>
    <h2 class="formtitle">ADD MULTIPLE USERS</h2>
    <form method="post" asp-action="AddMultipleUsers" id="addMultiUsers">
        <div class="form-group">
            <div class="form-row">
                <div class="form-group col-sm-2">
                    <label asp-for="StartDate"></label>
                    <input type="date" asp-for="StartDate" class="form-control" />
                    <span asp-validation-for="StartDate" class="text-danger"></span>
                </div>
            </div>

            <table id="AddMultipleUsersTable">
                <tr>
                    <th>First Name</th>
                    <th>Middle Initial</th>
                    <th>Last Name</th>
                    <th>Suffix</th>
                </tr>
                <tr>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                </tr>
            </table>

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

            <hr />

            <div class="form-row">
                <div id="submitbutton">
                    <input id="submit" class="btn btn-primary btn-lg" style="background-color: #4CAF50; color:white;" type="submit" />
            </div>
    </form>

</body>

Now normally with ASP.NET Core MVC you would just have something like asp-for="@Model.Property[IndexIfNeeded]" in the input tag helper but since the list starts empty and is not bound by a database, I'm having trouble piecing together how I would go about adding each new row as a new item to the list on the model once the entire form is submitted.

I may be over plicating this since the data never needs to be entered into a database, but it does need to be serialized and converted into a PDF document and be printed at the end of the process so any insight as to alternative methods to acplish that would be appreciated.

In summary, How can I bind the rows / columns added dynamically to this table to my model objects, while maintaining validation rules on each required property?

User class

    [Serializable]
    public class User
    {
        [Display(Name = "M.I.")]
        public string MiddleInitial { get; set; }

        [Display(Name = "Suffix")]
        public string NameSuffix { get; set; }

        [Required(AllowEmptyStrings = false)]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required(AllowEmptyStrings = false)]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
    }

MultiAddUser class

[Serializable]
public class MultiAddUser
{
    [Required]
    [Display(Name = "Start Date")]
    public DateTime StartDate { get; set; }
    public List<User> Users { get; set; }

    public MultiAddUser()
    {
        Users = new List<User>();
    }
}

My view has the following code that displays the basic table with inputs in the cells with the ability to add cells on the fly.

@using Contract
@model MultiAddUser

@section Scripts{

    <script>
        function addRow() {
            var table = document.getElementById("MultiAddUserTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = '<input type="text" />';
            var cell2 = row.insertCell(1);
            cell2.innerHTML = '<input type="text" />';
            var cell3 = row.insertCell(2);
            cell3.innerHTML = '<input type="text" />';
            var cell4 = row.insertCell(3);
            cell4.innerHTML = '<input type="text" />';
        }
    </script>
}

<style>
    input {
        width: 100%;
    }
</style>

<body>
    <h2 class="formtitle">ADD MULTIPLE USERS</h2>
    <form method="post" asp-action="AddMultipleUsers" id="addMultiUsers">
        <div class="form-group">
            <div class="form-row">
                <div class="form-group col-sm-2">
                    <label asp-for="StartDate"></label>
                    <input type="date" asp-for="StartDate" class="form-control" />
                    <span asp-validation-for="StartDate" class="text-danger"></span>
                </div>
            </div>

            <table id="AddMultipleUsersTable">
                <tr>
                    <th>First Name</th>
                    <th>Middle Initial</th>
                    <th>Last Name</th>
                    <th>Suffix</th>
                </tr>
                <tr>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                </tr>
            </table>

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

            <hr />

            <div class="form-row">
                <div id="submitbutton">
                    <input id="submit" class="btn btn-primary btn-lg" style="background-color: #4CAF50; color:white;" type="submit" />
            </div>
    </form>

</body>

In summary, How can I bind the rows / columns added dynamically to this table to my model objects, while maintaining validation rules on each required property?

Share Improve this question edited Mar 4, 2020 at 16:35 asked Mar 2, 2020 at 23:04 Mkalafut 7412 gold badges16 silver badges36 bronze badges

adding a table row in JavaScript or TypeScript should be pretty straight forward no? To bind it wrap everything in an using (Html.BeginForm()){...table goes here with a submit button} and the model binder will do the work of binding it when you click submit. – Train Commented Mar 2, 2020 at 23:33
@Train The problem isn't adding the row, it's model binding the dynamic rows. – Mkalafut Commented Mar 4, 2020 at 15:43
When you add the dynamic rows in html.beginform and submit it model binds to a list automatically. – Train Commented Mar 4, 2020 at 16:25
@Train Interesting. I will check that out. I updated my question with more plete code and updated information. Unsure if that changes your suggestion but if you wanted to take a stab at answering it, I'd appreciate any further insight! – Mkalafut Commented Mar 4, 2020 at 16:27
Sure thing, I'll try as soon as I get some more time. – Train Commented Mar 4, 2020 at 16:29

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

Since your data is not associated with the database, I remend that you create public variables to store the added and new added data.

And the 'td' tag in view does not support the 'asp-for' attribute, so you can add the input box in 'td' to add new data.

public class HomeController : Controller
{
    public static MultiAddUser multiAddUser = new MultiAddUser { };
    public static List<User> users = new List<User> { };
    public IActionResult Index()
    {
        ViewBag.UserList = multiAddUser.Users;
        return View();
    }
   public IActionResult Add(User user)
    {
        if (!ModelState.IsValid)
        {
            ViewBag.UserList = multiAddUser.Users;
            return View("Index");
        }
        users.Add(user);
        multiAddUser.Users = users;
        return RedirectToAction("Index");
    }

}

Index.cshtml:

@model WebApplication_core.Models.User
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>
<form asp-controller="Home" asp-action="Add">
    <table id="MultiAddUserTable" class="table">
        <tr>
            <th>First Name</th>
            <th>Middle Initial</th>
            <th>Last Name</th>
            <th>Suffix</th>
        </tr>
        @foreach (var item in (IEnumerable<WebApplication_core.Models.User>)ViewBag.UserList)
        {
            <tr>
                <td>@item.FirstName</td>
                <td>@item.MiddleInitial</td>
                <td>@item.LastName</td>
                <td>@item.NameSuffix</td>
            </tr>
        }
        <tr> 
           <td contenteditable="true">
                <input id="Text1" type="text" asp-for="@Model.FirstName" />
                <br /><span asp-validation-for="@Model.FirstName" class="text-danger"></span>
            </td>

            <td contenteditable="true">
                <input id="Text2" type="text" asp-for="@Model.MiddleInitial" />
                <br /><span asp-validation-for="@Model.MiddleInitial" class="text-danger"></span>
            </td>

            <td contenteditable="true">
                <input id="Text3" type="text" asp-for="@Model.LastName" />
                <br /> <span asp-validation-for="@Model.LastName" class="text-danger"></span>
            </td>

            <td contenteditable="true">
                <input id="Text4" type="text" asp-for="@Model.NameSuffix" />
                <br /> <span asp-validation-for="@Model.NameSuffix class="text-danger"></span>
            </td>

        </tr>
    </table>
    <input id="Button1" type="submit" value="Add" />
</form>

Here is the result :

Update(2020/3/5) :

public class HomeController: Controller
{
    public static List<User> users = new List<User> { new User { } };
    public static MultiAddUser multiAddUser = new MultiAddUser
    {
        Users = users
    };
    public IActionResult Index()
    {
        ViewBag.UserList = multiAddUser.Users;
        return View();
    }

    public IActionResult Add(List<User> userLists)
    {
        if (!ModelState.IsValid)
        {
            ViewBag.UserList = multiAddUser.Users;
            return View("Index");
        }
        users = userLists;
        users.Add(new User { });
        multiAddUser.Users = users;
        return RedirectToAction("Index");
    }
}

Index.cshtml:

@model IList<WebApplication_core.Models.User>
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var Model = (IList<WebApplication_core.Models.User>)ViewBag.UserList;
}

<h1>Index</h1>
<form asp-controller="Home" asp-action="Add">
    <table id="MultiAddUserTable" class="table">
        <tr>
            <th>First Name</th>
            <th>Middle Initial</th>
            <th>Last Name</th>
            <th>Suffix</th>
        </tr>
        @for (int i = 0; i < Model.Count(); i++)
        {
            <tr>
                <td>
                    <input id="Text1" type="text" asp-for="@Model[i].FirstName" />
                    <br /><span asp-validation-for="@Model[i].FirstName" class="text-danger"></span>
                </td>
                <td>
                    <input id="Text2" type="text" asp-for="@Model[i].MiddleInitial" />
                    <br /><span asp-validation-for="@Model[i].MiddleInitial" class="text-danger"></span>
                </td>
                <td>
                    <input id="Text3" type="text" asp-for="@Model[i].LastName" />
                    <br /> <span asp-validation-for="@Model[i].LastName" class="text-danger"></span>
                </td>
                <td>
                    <input id="Text4" type="text" asp-for="@Model[i].NameSuffix" />
                    <br /> <span asp-validation-for="@Model[i].NameSuffix" class="text-danger"></span>
                </td>
            </tr>
        } 

    </table>
    <input id="Button1" type="submit" value="Add" />
</form>

Here is the new result :

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add items entered in a dynamic HTML table to a model-bound list - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)