10

Can someone help me understand how to resolve the following error message:

The child content element 'ChildContent' of component 'EditForm' uses the same parameter name ('context') as enclosing child content element 'Authorized' of component 'AuthorizeView'

@page "/"

@using System.ComponentModel.DataAnnotations;
@using System.Globalization;
@inject ILogger<FreightCompany> Logger

<AuthorizeView>
    <Authorized>

        <EditForm EditContext="@editContext" OnSubmit="@Submit">
            <DataAnnotationsValidator />
            <ValidationSummary />

            <div class="row">
                <label>Link Name: @_model!.LinkName</label>
            </div>
            <div class="row">
                <label>Link Address:</label>
                <InputText type="time" class="m-1 form-control form-control-sm" @bind-Value="_model.LinkAddress" />
            </div>
            <div class="row">
                <button class="form-control btn btn-primary m-1" @onclick='()=>submitId="1"' type="submit">Submit</button>
                <button class="form-control btn btn-success m-1" @onclick='()=>submitId="2"' type="submit">Submit 2</button>
            </div>

        </EditForm>

        <div class="container">
            <div class="row">
                <table>
                    @if (_list.Count() > 0)
                    {
                        @foreach (var item in _list)
                        {
                            <tr>
                                <td><a href="@_model.LinkAddress">@_model.LinkName</a></td>                                
                            </tr>
                        }
                    }
                </table>
            </div>
        </div>

    </Authorized>
    <NotAuthorized>
        <p>Please signed in.</p>
    </NotAuthorized>
</AuthorizeView>


@code {
    string submitId = "";

    private EditContext? editContext;

    public FreightCompany? _model { get; set; }
    List<FreightCompany> _list = new();

    protected override void OnInitialized()
    {
        _model ??= new();        
        editContext = new(_model);
    }

    private void Submit()
    {
        switch (submitId)
        {
            case "1":
                Logger.LogInformation("Submit 1 pressed");
                var isValidForm = editContext!.Validate();
                if (isValidForm)
                {
                    _list.Add(_model!);
                    _model = new();
                    editContext = new(_model);
                }
                break;
            case "2":
                Logger.LogInformation("Submit 2 pressed");

                foreach (var item in _list)
                {
                    // SqliteDataAccess.SaveFreightLink(item);
                }

                break;
        }
        Logger.LogInformation("Model.Id = {Id}", _model?.Id);
    }
}
1

1 Answer 1

14

Both <AuthorizeView/> and <EditForm> have a ChildContent which they pass a value to using RenderFragment<T>. By default this value is called context. However due to this nesting you have the value context is ambiguous within <EditForm/>. To avoid this ambiguity declare a different name for the context instead of the default of context. You can do so using Context="newContextName". For example you could call the context of AuthorizeView authContext as shown below:

@page "/"

@using System.ComponentModel.DataAnnotations;
@using System.Globalization;
@inject ILogger<FreightCompany> Logger

@* here we declare a different variable name for the context of AuthorizeView *@
<AuthorizeView Context="authContext">
    <Authorized>

        <EditForm EditContext="@editContext" OnSubmit="@Submit">
            <DataAnnotationsValidator />
            <ValidationSummary />

            <div class="row">
                <label>Link Name: @_model!.LinkName</label>
            </div>
            <div class="row">
                <label>Link Address:</label>
                <InputText type="time" class="m-1 form-control form-control-sm" @bind-Value="_model.LinkAddress" />
            </div>
            <div class="row">
                <button class="form-control btn btn-primary m-1" @onclick='()=>submitId="1"' type="submit">Submit</button>
                <button class="form-control btn btn-success m-1" @onclick='()=>submitId="2"' type="submit">Submit 2</button>
            </div>

        </EditForm>

        <div class="container">
            <div class="row">
                <table>
                    @if (_list.Count() > 0)
                    {
                        @foreach (var item in _list)
                        {
                            <tr>
                                <td><a href="@_model.LinkAddress">@_model.LinkName</a></td>                                
                            </tr>
                        }
                    }
                </table>
            </div>
        </div>

    </Authorized>
    <NotAuthorized>
        <p>Please signed in.</p>
    </NotAuthorized>
</AuthorizeView>


@code {
    string submitId = "";

    private EditContext? editContext;

    public FreightCompany? _model { get; set; }
    List<FreightCompany> _list = new();

    protected override void OnInitialized()
    {
        _model ??= new();        
        editContext = new(_model);
    }

    private void Submit()
    {
        switch (submitId)
        {
            case "1":
                Logger.LogInformation("Submit 1 pressed");
                var isValidForm = editContext!.Validate();
                if (isValidForm)
                {
                    _list.Add(_model!);
                    _model = new();
                    editContext = new(_model);
                }
                break;
            case "2":
                Logger.LogInformation("Submit 2 pressed");

                foreach (var item in _list)
                {
                    // SqliteDataAccess.SaveFreightLink(item);
                }

                break;
        }
        Logger.LogInformation("Model.Id = {Id}", _model?.Id);
    }
}

You could also declare a different name for the Context of <EditForm />. You could also name both contexts explicitly. It doesn't really matter. The names just must not be the same.

For a more detailed explanation have a look at

2
  • 1
    Thank you! Can you pleae direct me to where I can learn what I can do with that authContext? Can I get the username from it in my code block?
    – Rod
    Commented Oct 30, 2023 at 1:51
  • 2
    See MS docs. You can obtain the authentication state from a cascading parameter of AuthorizeRouteView. You can then get user details from the ClaimsPrinciple you get from AuthenticationState.User. Commented Oct 30, 2023 at 7:58

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.