form for a model that contains a list property in asp.net core 3 MVC

Question

I'm trying to create a form in asp.net core 3 MVC.

the model is a "package" class that contains different properties about the package, and a List<item> items property of the items in the package , item is a class defined that contains different properties of an "item".

how should I approach creating a form for the user to add a new "package" ?
plus inserting the items inside it, which could be any amount of items , I would like the user to insert a row for each item (with a button that adds new input row for a new item ) and submit it with the final form .

any help would be appreciated.

Rena · Accepted Answer · 2021-02-04 02:43:16Z

3

Here is a whole working demo:

Model:

public class Package
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Item> Items { get; set; }
}
public class Item
{
    public int Id { get; set; }
    public string ItemName { get; set; }
}

View:

@model Package
<h1>Create</h1>

<h4>Package</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <button onclick="addRow()" type="button">Add Row</button>
            <table id="AddItemsTable">
                <tr>
                    <th>@Html.DisplayNameFor(model=>model.Items[0].ItemName)</th>
                </tr>
            </table>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

JS:

@section Scripts {
    <script>
        var counter = 0;
        function addRow() {
            var table = document.getElementById("AddItemsTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = '<input type="text" name="Items[' + counter+'].ItemName"/>';
            counter++;
        }
    </script>
}

Controller:

// GET: Packages/Create
public IActionResult Create()
{
    return View();
}

// POST: Packages/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Package package)
{
    if (ModelState.IsValid)
    {
        _context.Add(package);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View(package);
}

Result:

answered Feb 4, 2021 at 2:43

Rena

37.2k7 gold badges50 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Silver Over a year ago

Thank you !! , do you by any chance know how can I apply validation to the items fields in the form ? I've added [required] to my List field in the package class but it doesn't do anything really.

Rena Over a year ago

Hi,if you just need required validation,I think you could add html by js like:<input type="text" name="Items[' + counter+'].ItemName" required/>.But if you need other validation,you may custom cliend side validation.

Collectives™ on Stack Overflow

form for a model that contains a list property in asp.net core 3 MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related