ArgumentOutOfRangeException in Master Detail - ASP.NET Core MVC

Question

I have Master Detail models Stock and Article with StockId as foreign key in Article. I displayed Stock in a table and i want to create a partial view to add Article to every row of the table. This is what i have tried:

StockController:

public IActionResult AddArticle(int id)
    {
        Stock stock = _dbcontext.Stock.Where(e => e.StockId == id).FirstOrDefault();
        stock.Articles.Add(new Article() { ArticleId = 1 });
        return PartialView("_AddArticlePartialView", stock);
    }

    public IActionResult AddArticle(Article article)
    {
        if (article != null)
        {
            _dbcontext.Article.Add(article);
            _dbcontext.SaveChanges();
            return RedirectToAction("Index");
        }
        return View();           
    }

Index.cshtml:

@model IEnumerable<Stock>

@{
    ViewData["Title"] = "Stock";
    Layout = "~/Views/Shared/_Theme.cshtml";
 }
<table class="table table-bordered table-hover" id="display">
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.CategoryId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Designation)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Quantite)
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Category.CategoryName)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Designation)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Quantite)
                            </td>

                            <td>
                                <div class="btn-group-sm">
                                    <button class="btn btn-primary" data-toggle="modal" data-target="@("#AddArticle-"+item.StockId)" data-url="@Url.Action($"AddArticle/{item.StockId}")"><i class="fa fa-plus"></i>Ajouter Articles</button>
                                    @await Html.PartialAsync("_AddArticlePartialView", item)
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

_AddArticlePartialView.cshtml:

    @model StockProject.Models.Stock

@{
    ViewData["Title"] = "_AddArticlePartialView";

}

<div class="modal fade" role="dialog" tabindex="-1" id="@("AddArticle-"+Model.StockId)" aria-labelledby="addArticleLabel" aria-hidden="true" >
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Articles</h3>
            </div>
            <div class="modal-body">
                <form asp-action="AddArticle" method="post">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Articles</h3>

                        </div>
                        
                        <div class="card-body">
                            <table class="table table-bordered" id="articleTable">
                                <thead>
                                    <tr>
                                        <th>Numero de Serie</th>
                                        <th>Marque</th>
                                        <th>Etat</th>                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    @for (int i = 0; i < Model.Quantite; i++)
                                    {
                                        <tr>
                                            <td>
                                                @Html.EditorFor(x => x.Articles[i].NumeroSerie, new { htmlAttributes = new { @class = "form-control" } })
                                            </td>

                                            <td>
                                                @Html.EditorFor(x => x.Articles[i].Marque, new { htmlAttributes = new { @class = "form-control" } })
                                            </td>
                                            <td>
                                                @Html.DropDownListFor(x => x.Articles[i].Etat, new List<SelectListItem> {
                                                       new SelectListItem { Value = "En Marche" , Text = "En Marche" },
                                                       new SelectListItem { Value = "En Panne" , Text = "En Panne" },

                                                    },
                                                  new { @class = "form-control" })
                                            </td>
                                            
                                        </tr>
                                    }

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-primary">Sauvegarder</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

When i run this code i got this error message:

Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

the error is in this line

@Html.EditorFor(x => x.Articles[i].NumeroSerie, new { htmlAttributes = new { @class = "form-control" } })

So what's wrong in my code?

Answer 1

@Html.EditorFor(x => x.Articles[i].NumeroSerie, new {@class = "form-control"})

Answer 2

In your Partial view, You use @for (int i = 0; i < Model.Quantite; i++) to iterate over Quantite property and get the index, Then use this index to get value from Articles property. But if the count of Quantite larger than the count of Articles, i will larger than the index in Articles, Articles[i] will report this error.

So here you can try to use @for (int i = 0; i < Model.Articles; i++) to get the index.