1

I've a very basic case for which I've a solution, but I think this way is not the cleanest / efficient / portable.

Of course, I simplify the models for the easiness of the reading, the real case is with much more complexity.

Models :

public partial class Referal
{
    public Referal()
    {
        Childrens = new List<Children>();
    }

    public int Id { get; set; }
    public string Name { get; set; }
    public List<Children> Childrens { get; set; }
}

public partial class Children
{
    public int Id { get; set; }
    public string Firstname { get; set; }
    public bool Vaccinated { get; set; }
    public int ReferalId { get; set; }
    
    public virtual Referal Referal { get; set; }

}

The pieces of additional code for ModelBuilder and alike are not relevant I think.

So I have a Razor Page with a CreateModel of type Referal, that I preload with an empty children to have on the page the required fields for Referal, and the required fields for the first children :

public class CreateModel : PageModel
{
    [BindProperty]
    public Referal Input { get; set; }

    public async Task OnGetAsync()
    {
        Input = new() { Childrens = new() { new() } };
    }

    public async Task<PartialViewResult> OnPostPartialChildrenAsync(int? id)
    {
        if (id == null)
        {
            Input.Childrens.Add(new());
        }
        
        return Partial("_AddChildren", this);
    }
}

The Create Razor Page ( again lightened to the strict relevant parts ) :

@page "{handler?}/{id?}"
@model CreateModel

<section class="extended">
<form method="post" id="souscription">

    <div class="form-group">
        <label asp-for="Input.Name" class="control-label">
        </label><input asp-for="Input.Name" class="form-control" />
    </div>

    <div id="NestedChildrens">
        @Html.EditorFor(Model => Model.Input.Childrens)
    </div>
    <button type="button" class="cgicon-register intermediary" data-nested="childrens">Add a child</button>

    <button type="submit" class="cgicon-send mainbutton">Create Now</button>

</form>
</section>

As you can see, childrens are loaded by an EditorTemplate.

@model Models.Children

<div class="children">
<div class="form-group-header">
    Add child
    <button type="button" data-nested="childrens" data-removal="@Model.NId"></button>
</div>
<div class="form-group">
    <label asp-for="Firstname" class="control-label">
    </label><input asp-for="Firstname" class="form-control" />
</div>
<div class="form-group form-check">
    <label class="form-check-label">
        <input class="form-check-input" asp-for="Vaccinated" /> Got his fix already
    </label>
</div>
</div>

So the Idea now, is that the user can click on "Add a child"; the data will be posted on the Create Page with an handler "PartialChildren", add a children if needed, and return the _AddChildren partial view. For child add, no problem : the "children" block is created, then when posted my CreateModel contains two childrens, that rules.

But the user should be able to remove one of the created childs, before saving the data. I've tried a lot of server-side code to do that, in the OnPostPartialChildrenAsync function, like Input.Childrens.removeAt() and ModelState.Clear(), but nothing worked.

The typical behaviour I cant get rid off is that I delete a child, my post function remove the child of my createModel and send it back; the child disappeared. Then I post again ( validators, add a new child, whatever ), and the deleted child pops again ( because posted once, still in modelState or somewhere ).

I tried to disable all fields linked to the deleted children block, but then if the user remove the first one, as the form does not contain any Input.Childrens[0] form elements, all my childrens are lost.

The only think that worked, is to have this piece of Javascript on the create Razor Page :

<script>
    manageChildren(document);
    function manageChildren(childContainer) {
        [].forEach.call(childContainer.querySelectorAll("button[data-nested='childrens']"), function (button, index) {
            button.addEventListener("click", function () {
                let id = "";
                if (!$(this).hasClass("cgicon-register")) {
                    var brotherHood = childContainer.querySelectorAll(".children").length;
                    if(brotherHood<=1) return false;
                    [].forEach.call(childContainer.querySelectorAll("[name^='Input.Childrens[" + index+ "]'"), function (input) {
                        input.setAttribute("disabled", "true");
                    });
                    for (i = id + 1; i < brotherHood; i++) {
                        [].forEach.call(childContainer.querySelectorAll("[name^='Input.Childrens[" + i + "]'"), function (input) {
                            input.setAttribute("name", input.getAttribute("name").replace("Input.Childrens[" + i + "]", "Input.Childrens[" + (i - 1) + "]"));
                        });
                    }
                    id = index;                         
                }
                $.ajax({
                    async: true,
                    data: $("#souscription").serialize(),
                    type: "POST",
                    url: "/Create/PartialChildren/" + id,
                    success: function (nestedList) {
                        $("#NestedChildrens").html(nestedList);
                        manageChildren(document.getElementById("NestedChildrens"));
                    }
                });
            });
        });
    }
</script>

So I remove all the fields named [Input.Childrens[index]*, then I rename every fields having an higher index by the index less 1.

Even if it works well, even if no data are lost and the user can really play with it safely, I'm not a big fan to superseed the Input Model mechanic by a client script responsability. Moreover, its not really possible to port that piece of code for other scenarios with other entities.

I'm very curious to know if I miss a magical way to let C# remove a specific child of my createModel, before the save ( so all Input Children have a id = 0 ), without this js client handling.

Thanks for reading and for your help.

1 Answer 1

1

There are two ways to bind collections when posting forms. One, which is what you are currently doing, is to use a sequential index that starts from 0 and increments by 1 for each element in the collection.

The other is to use an explicit index, which can be any value which it doesn't need to be sequential. It doesn't even need to be numeric. This approach requires an additional hidden field for each item, named [property].Index which represents index of the item.

<input type="hidden" name="Input.Children.Index" value="A" />
<input type="text" name="Input.Children[A].FirstName" />

Then if you remove elements from the collection, you don't need to re-index the remaining ones.

See this for more information: https://www.learnrazorpages.com/razor-pages/model-binding#binding-complex-collections

1
  • Thanks, very nice. I did not found a HiddenFor(modelIndex), but this piece of code makes the job : <input type="hidden" name="@(ViewData.TemplateInfo.HtmlFieldPrefix.Split("[")[0]+".Index")" value="@Regex.Matches(ViewData.TemplateInfo.HtmlFieldPrefix, @"\[([0-9]+)?\]")[0].Groups[1].ToString()" />. I suppose that just disable this field will clean up my data ! Thanks !
    – iguypouf
    Jun 9, 2021 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.