Rod
Rod

Reputation: 15475

Component 'EditForm' uses the same parameter name ('context') as enclosing child content element 'Authorized'

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);
    }
}

Upvotes: 13

Views: 4829

Answers (1)

Mushroomator
Mushroomator

Reputation: 9238

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

Upvotes: 19

Related Questions