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

Question

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 Users { get; set; }

    public MultiAddUser()
    {
        Users = new List();
    }
}

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{

    
}




    ADD MULTIPLE USERS
    
        
            
                
                    
                    
                    
                
            

            
                
                    First Name
                    Middle Initial
                    Last Name
                    Suffix

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 complicating 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 accomplish 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?

LouraQ · Accepted Answer

Since your data is not associated with the database, I recommend 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 users = new List { };
    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";
}

Index

    
        @foreach (var item in (IEnumerable)ViewBag.UserList)
        {
            
        }
        
        
            First Name
            Middle Initial
            Last Name
            Suffix
        

                @item.FirstName
                @item.MiddleInitial
                @item.LastName
                @item.NameSuffix

Here is the result :

Update(2020/3/5) :

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

    public IActionResult Add(List 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
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var Model = (IList)ViewBag.UserList;
}

Index

    
        @for (int i = 0; i < Model.Count(); i++)
        {
            
        } 

    
        
            First Name
            Middle Initial
            Last Name
            Suffix

Here is the new result :

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

Answers (1)

Related Questions