Page fields locked after submit

Hi,

I have a simple add/update page - for a customer. I click Submit, the database is updated accordingly and I show a dialog message box - all ok, but then I cannot edit any of the fields on that page unless I manually refresh the page?

I guess this is something daft on my part, but I cannot find out why this is happening.

Cheers
Reg

Hi @SolutionJ,

Most probably there is a exception - check your browser console for reference. Furthermore you can run the application in debug mode to check why the exception is raised.

Hi enchev,

I tried this out, but no exceptions are showing, either in debug mode or in the browser console. Originally, it was even happening if a validation event was triggered, but that's not now the case.

Does it work if you display the message as a notification instead?

Hi, many thanks for your input.

I've now discovered that it's related to using a transaction when posting to the back end database. If I remove any use of transaction processing, all is fine, but I will need to use it, so I'll do some more experimenting!

Cheers
Reg

mumfie, I'm very much obliged to you. Having corrected some code re my transctions, I was still having the issue, but replacing the dialog messaging with a notify instead has resolved the issue. :slight_smile:

Glad you got it working. Not sure why the dialog did'nt work but I suspect you might be calling a modal dialog from a modal type edit page and I don't recall if I have tried that.
Another option is to display the error within the active screen.

Might try that, thanks mumfie ... :+1:

Hi,

I actually need to use a confirm type dialogue box now, and I still encounter the problem where the Page on which the dialog is shown locks all the fields until I refresh it. I'm not doing any database updates, just putting out a simple are you sure message and, if No is selected, my code actually does nothing. The dialog closes, but all fields are locked.

The page I'm on is not modal, it's simply opened from the system's menu using NavigateTo.

In MainLayout.razor I just have a tag, then in the page in question, here is the layout and code

@page "/customer-card/{PrmId:int}"

@inject CustomerService Customerservice
@inject Radzen.DialogService dialogservice
@using Tbi.Services
@using Tbi.Shared
@using Tbi.Data

Customer Card

<RadzenRow>
    <RadzenColumn Style="margin-left: auto; margin-right: auto" Size="12">
        <RadzenButton Variant="Radzen.Variant.Text" Text="Back to Dashboard" Click="Cancel" class="tbilinkbutton"></RadzenButton>
    </RadzenColumn>
</RadzenRow>

<RadzenRow>
    <RadzenColumn>
        <RadzenPanel>
            <RadzenLabel Text="Name" />
            <RadzenRequiredValidator Text="Name is Required" Component="ORG_Name"></RadzenRequiredValidator>
            <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_Name" Name="ORG_Name" Change="SetDirty"></RadzenTextBox>
            <RadzenLabel Text="Code" />
            <RadzenRequiredValidator Text="Code is Required" Component="ORG_Code"></RadzenRequiredValidator>
            <RadzenCustomValidator Component="ORG_Code" Validator="@(() => fred(customer.ORG_Code))" Text=@ORG_CodeError></RadzenCustomValidator>
            <RadzenTextBox Style="display: block; width: 200px; height: 30px" @bind-Value="@customer.ORG_Code" Name="ORG_Code" Change="SetDirty"></RadzenTextBox>
        </RadzenPanel>
    </RadzenColumn>
    <RadzenColumn>
        <RadzenPanel Style="width: 591px; height: 288px; vertical-align: middle">
            <RadzenLabel Text="Address" />            
            <RadzenRow>
                <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_Address1" Name="ORG_Address1" Placeholder="Line 1"></RadzenTextBox>
                <RadzenRequiredValidator Text="Address Line 1 is required" Component="ORG_Address1"></RadzenRequiredValidator>
            </RadzenRow>
            <RadzenRow>
            <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_Address2" Placeholder="Line 2" Change="SetDirty"></RadzenTextBox>
            </RadzenRow>
            <RadzenRow>
            <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_Address3" Placeholder="Line 3" Change="SetDirty"></RadzenTextBox>
            </RadzenRow>
            <RadzenRow>
            <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_Address4" Placeholder="Line 4" Change="SetDirty"></RadzenTextBox>
            </RadzenRow>
            <RadzenRow>
            <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_City" Placeholder="City" Change="SetDirty"></RadzenTextBox>
            </RadzenRow>
            <RadzenRow>
            <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_County" Placeholder="County" Change="SetDirty"></RadzenTextBox>
            </RadzenRow>
            <RadzenRow>
                <RadzenTextBox Style="display: block; width: 400px; height: 30px" @bind-Value="@customer.ORG_PostCode" Name="ORG_PostCode" Placeholder="Post Code" Change="SetDirty"></RadzenTextBox>
                <RadzenRequiredValidator Text="Post Code is Required" Component="ORG_PostCode" Style="vertical-align: text-bottom"></RadzenRequiredValidator>                
            </RadzenRow>
            <RadzenRow>
            </RadzenRow>
        </RadzenPanel>
    </RadzenColumn>
</RadzenRow>

<RadzenRow>
    <RadzenColumn Size="6" Style="max-width: none">
        <RadzenPanel>
            <RadzenLabel Text="Currency" />
            <RadzenLabel Text="Margin %" />
            <RadzenTextBox Style="display: block; width: 250px; height: 30px" Placeholder="Target Margin %" Change="SetDirty"></RadzenTextBox>
            <RadzenLabel Text="Sales Price Chase Days" />
            <RadzenTextBox Style="display: block; width: 250px; height: 30px" Placeholder="Wait x days to chase prices" Change="SetDirty"></RadzenTextBox>
        </RadzenPanel>
    </RadzenColumn>
</RadzenRow>

@code
{
[Parameter]
public int PrmId { get; set; }

Customer customer = new Customer();
TbiResult res = new();
bool _isdirty; //has anything on page changed
string ORG_CodeError; //for custom validation

//============================================================================================================================================================================

protected override async Task OnInitializedAsync() { await Loaddata(); }

protected async Task Cancel()
{
    if (_isdirty) 
    {
        var res = await dialogservice.Confirm("You will lose any unsaved changes; are you sure?", "Unsaved Changes Warning!", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" });
        switch (res.Value)
        {
        case true :
            NavigationManager.NavigateTo($"/customer-dashboard/{PrmId}",true);
            break;
        default:
            break;
        }
    }
    else
    {
        NavigationManager.NavigateTo($"/customer-dashboard/{PrmId}",true);
    }
}

protected async Task OnSubmit()
{   
    DBConnection con = new DBConnection(NavigationManager);     

    try 
    {
        await con.ConnectToDB(true);

        if(customer.ORG_Id == 0) { res = await Customerservice.Add(customer); } else { res = await Customerservice.Update(customer); }
        switch(res.Status)
        {
            case TbiConstants.tbiresult_success :
                await con.DisconnectDB(true);
                NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Success, Detail = res.Message });
                break;
            case TbiConstants.tbiresult_failure :
                await con.DisconnectDB(false);                
                NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Error, Detail = res.Message });
                break;
            default :
                await con.DisconnectDB(false);                
                NavigationManager.NavigateTo($"/message-dialog/{res}");
                break;
        }
    }
    catch(Exception ex)
    {
       res.Status = "F";                                    
       res.Id = 0;
       res.Message = ex.Message;
       res.Details = ex.StackTrace;
       NavigationManager.NavigateTo($"/message-dialog/{res}");
    }
}

protected bool fred(string POrg_Code) 
{
    ORG_CodeError = "This is an error message";
    return false;
}

protected async System.Threading.Tasks.Task Link0Click(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
    NavigationManager.NavigateTo($"/customer-dashboard/{PrmId}", forceLoad: true);        
}

protected void SetDirty() { _isdirty = true; }

protected async Task Loaddata() 
{
    try 
    {
        if (PrmId != 0) 
        {
            DBConnection con = new DBConnection(NavigationManager);
            await con.ConnectToDB(false);

            var results = await(Customerservice.GetById(PrmId));
            res = (TbiResult)results.Item1;
            await con.DisconnectDB();
            switch(res.Status)
            {
                case TbiConstants.tbiresult_success :
                    customer = results.Item2;
                    break;
                case TbiConstants.tbiresult_failure :
                    NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Error, Detail = res.Message });
                    break;
                default :
                    NavigationManager.NavigateTo($"/message-dialog/{res}");
                    break;
            }
        }

        _isdirty = false;
    }
    catch(Exception ex) 
    {
        res.Status = "F";                                    
        res.Id = 0;
        res.Message = ex.Message;
        res.Details = ex.StackTrace;
        NavigationManager.NavigateTo($"/message-dialog/{res}");
    }
}

}

Any ideas/thoughs would be really welcome, because I am stumped....

Cheers
Reg

I tried it in a simple example using Net 7 and a none modal edit form and it appears to work as expected.
After selecting No from the Confirm dialog the modal frame is removed and the edit form fields are again editable.


image

Thanks mumfie. I used your idea - created a simple new page - and experimented from there. Found out that if I used a different layout file on that page the problem disappeared, so did some browsing and discovered something I'd missed before about having these tags at the top of the MainLayout.razor page:

And that has seemingly solved it.

Thanks for the help, I'm incredibly grateful.

Cheers
Reg

1 Like

Tags not showing, but they were for RadzenDialog, RadzenNotification, RadzenContextMenu and RadzenTooltip...

Check the FAQ for tips how to format your code. The forum doesn't display tags by default.