How to save user data to List in ASP.Net Core

We need to register a new training course in the system. Save the Course Name, Course Price and Lesson List into the database. The number of lessons for each course is different, so the user will dynamically add fields to enter the name of each lesson. How to get the data entered by the user from the fields and save them to the list, and subsequently to the database?

public class RegisterCourseViewModel
    {
        public string Name { get; set; }

        public decimal Price { get; set; }

        public List<Lesson> ListOfLessons { get; set; }
    }

public class Lesson
    {
        public int LessonId { get; set; }
        public string Name { get; set; }
    }

@model RegisterCourseViewModel

<div>
    <h2>Registration a new course</h2>
    <form asp-area="Staff" asp-controller="Course" asp-action="AddCourse" method="post">
        <div asp-validation-summary="All"></div>

        <div>
            <label asp-for="Name"></label>
            <input asp-for="Name" />
            <span asp-validation-for="Name"></span>
        </div>

        <div>
            <label asp-for="Price"></label>
            <input asp-for="Price" />
            <span asp-validation-for="Price"></span>
        </div>
        
        <div ID="items">
            Lesson 1:
            <input type="text" name="item1" size="45"><br>
            <input type="button" value="Add a new lesson" onClick="AddItem();" ID="add">
            <input type="button" value="Delete the lesson" onClick="DeleteItem();" ID="delete">
        </div>

        <div>
            <input type="submit" value="Registration" />
        </div>
    </form>
</div>

From this code:

        <div>
            <label asp-for="Name"></label>
            <input asp-for="Name" />
            <span asp-validation-for="Name"></span>
        </div>

        <div>
            <label asp-for="Price"></label>
            <input asp-for="Price" />
            <span asp-validation-for="Price"></span>
        </div>

I get Name and Price in my controller method and save it to DB. But how can I get a list of user-entered lessons names?
This is controller’s method:

public IActionResult AddCourse(RegisterCourseViewModel model)
        {
            if (ModelState.IsValid)
            {
                CourseModel newCourse = new CourseModel
                {
                    Name = model.Name,
                    Price = model.Price,
                    ListOfLessons = model.ListOfLessons                <---- How to get this List?
                };

                courseModel.SaveCourse(newCourse);

                return RedirectToAction("Index", "Home", new { area = "Staff" });
            }
            return View(model);
        }

public class CourseModel
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public List<Lesson> ListOfLessons { get; set; }
    }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here is a working demo:

View:

@model RegisterCourseViewModel

<div>
    <h2>Registration a new course</h2>
    <form asp-area="Staff" asp-controller="Course" asp-action="AddCourse" method="post">
        <div asp-validation-summary="All"></div>
        //...

        <div ID="items">
            Lesson 1: 
            //change the name here...
            <input type="text" name="ListOfLessons[0].Name"size="45"><br>
            <input type="button" value="Add a new lesson" onClick="AddItem();" ID="add">
            <input type="button" value="Delete the lesson" onClick="DeleteItem();" ID="delete">
        </div>

        <div>
            <input type="submit" value="Registration" />
        </div>
    </form>
</div>
@section Scripts
{
<script>   
    function AddItem() {
        var index = $('input[name^="ListOfLessons"]').length;
        $("#add").before('<input type="text" size="45" name="ListOfLessons[' + index + '].Name" /><br>')           
    }
</script>
}

Result:

Method 2

By Converting course list into Json string, and then using one column of table in database to save it, you can get user’s dynamical course list.
So use database model like:

public class RegisterCourse
    {
        public string Name { get; set; }

        public decimal Price { get; set; }

        public string ListOfLessons { get; set; }
    }

Use JsonConvert.SerializeObject(courseList) to convert user inputed courses and then insert it to database.
And JsonConvert.DeserializeObject<Class>(jsonstr) to read user’s course List from database model

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0