We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Menu Bar in MainLayout.razor is not updated on navigating

Hello,

I have an Blazor application where i placed a Menu Bar in the MainLayout.razor. The menu items are generated in the OnInitAsync method. The Menu Bar will be displayed correctly on first call. The problem is when i navigate in the webbrowser to another page e.g. google and then hit the back button the Menu Bar is not rerendered again and dissapears. This seems to be due the OnInitAsync method will be not executed again. Is there an solution for that ?

Regards
Christoph Weller

13 Replies

SD Saranya Dhayalan Syncfusion Team July 30, 2019 04:07 PM UTC

 Hi Christoph, 
  
Thank you for contacting Syncfusion Support 
We have checked your reported issue in preview 6 and the issue is reproduced in our end. But while upgrading to Preview 7, the issue has been resolved. Could you please upgrade preview 7 and then check your end? For your convenience, we have prepared a sample and video in the below link.  
Could you please check the above sample and get back to us if you need further assistance on this? 
 
Regards, 
Saranya 



CW Christoph Weller July 31, 2019 10:26 AM UTC

Hi,

Thanks you very much for your answer. I have the latest preview 7 installed but the problem still remains, even in your test-application. Here is my dotnet --info data :

C:\Users\christoph>dotnet --info
.NET Core SDK (gemäß "global.json"):
 Version:   3.0.100-preview7-012821
 Commit:    6348f1068a

Laufzeitumgebung:
 OS Name:     Windows
 OS Version:  10.0.18362
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.0.100-preview7-012821\

Host (useful for support):
  Version: 3.0.0-preview7-27912-14
  Commit:  4da6ee6450

.NET Core SDKs installed:
  2.1.700 [C:\Program Files\dotnet\sdk]
  2.1.701 [C:\Program Files\dotnet\sdk]
  2.1.800-preview-009696 [C:\Program Files\dotnet\sdk]
  2.1.801 [C:\Program Files\dotnet\sdk]
  3.0.100-preview7-012821 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0-preview7.19365.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0-preview7-27912-14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.0.0-preview7-27912-14 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download

Regards
Christoph


SD Saranya Dhayalan Syncfusion Team July 31, 2019 01:53 PM UTC

Hi Christoph, 
Thanks for your update. 
We have checked your provided details and cause of the issue is stateful pre-rendering in your application. So we would suggest to you remove stateful pre-rendering in your app as like in the below code example. 
// Startup.cs 
endpoints.MapBlazorHub();  // Remove this line 
endpoints.MapBlazorHub<App>("app"); // Add this line 
// _Host.cshtml 
<app>@(await Html.RenderComponentAsync<App>())</app> // Remove this line 
<app></app> // Add this line 
 
For your convenience we have prepared a sample. Please find the sample link in below, 
Please find the below GitHub link for more details regarding this issue 
Could you please check the above sample and get back to us if you need further assistance on this? 

Regards, 
Saranya 



CW Christoph Weller July 31, 2019 04:48 PM UTC

Hello Saranya,

Thank you very much, it's working now! But i have annother problem with an DataGrid and Template. I have the following component :

@page "/admin/menu-lang"
@using Syncfusion.EJ2.Blazor.Grids
@using Newtonsoft.Json.Linq
@using System.Linq;
@using Microsoft.AspNetCore.Hosting;
@using System.IO;

@inject TreeViewLanguageContext _treeViewLangContext
@inject IWebHostEnvironment _webHostEnviroment

@attribute [Authorize(Roles = "Admin")]

<div>
    <EjsGrid ID="menu_lang_grid" DataSource="@TreeViewLanguages" ModelType="@Model" AllowPaging="true" Height="600" Toolbar="@(new List<string> { "Add", "Edit", "Delete" })" OnActionComplete="@OnActionComplete">
        <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog" ShowDeleteConfirmDialog="true">
            <Template>
                @{
                    var lang = (context as TreeViewLanguage);
                    <input class="e-input e-field" name="Description" value=@lang.Description type="text" required />
                    <br />
                    <Syncfusion.EJ2.Blazor.DropDowns.EjsDropDownList ID="LanguageFlag" Width="200" CssClass="dropdown" DataSource=@DropDownLanguages Value="@lang.LanguageFlag" AllowFiltering="true">
                        <DropDownListFieldSettings Text="Text" />
                    </Syncfusion.EJ2.Blazor.DropDowns.EjsDropDownList>
                    <img style="background-color:white;width:30px;height:30px;padding:4px;" src="@($"images/flags/{@lang.LanguageFlag}.png")" />
                    <br />
                }
            </Template>
        </GridEditSettings>
        <GridColumns>
            <GridColumn Field=@nameof(TreeViewLanguage.Id) Width="0" IsPrimaryKey="true" />
            <GridColumn Field=@nameof(TreeViewLanguage.Description) HeaderText="@Resources.DESCRIPTION" Width="300" />
            <GridColumn Field=@nameof(TreeViewLanguage.LanguageFlag) HeaderText="@Resources.LANGUAGEFLAG" Width="50" />
            <GridColumn HeaderText="@Resources.LANGUAGFLAGIMAGE" Width="50">
                <Template>
                    @{
                        var lang = (context as TreeViewLanguage);
                        <div>
                            <img style="background-color:white;width:30px;height:30px;padding:4px;" src="@($"images/flags/{@lang.LanguageFlag}.png")" />
                        </div>
                    }
                </Template>
            </GridColumn>
        </GridColumns>
    </EjsGrid>
</div>

@code {

    public List<TreeViewLanguage> TreeViewLanguages { get; set; }

    public List<DropDownListItems> DropDownLanguages { get; set; }

    public TreeViewLanguage Model = new TreeViewLanguage();

    protected override void OnInit()
    {
        TreeViewLanguages = _treeViewLangContext.treeviewlanguages.OrderBy(p => p.SortOrder).ToList();
        FillDropDownListLanguages();
        base.OnInit();
    }

    void FillDropDownListLanguages()
    {
        DropDownLanguages = new List<DropDownListItems>();
        var path = _webHostEnviroment.WebRootPath + @"\images\flags";
        var images = Directory.GetFiles(path);
        foreach (var item in images)
        {
            DropDownLanguages.Add(new DropDownListItems() { Text = Path.GetFileNameWithoutExtension(item) });
        }

    }

    async void OnActionComplete(ActionEventArgs args)
    {
        TreeViewLanguage item = null;
        int sortOrder;
        if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.BeginEdit || args.Data == null)
        {
            return;
        }
        if (args.Data.GetType() == typeof(JObject))
        {
            item = ((JObject)args.Data).ToObject<TreeViewLanguage>();
        }
        else
        {
            item = ((JArray)args.Data)[0].ToObject<TreeViewLanguage>();
        }
        switch (args.RequestType)
        {
            case Syncfusion.EJ2.Blazor.Grids.Action.Save:
                if (args.Action == "add")
                {
                    if (_treeViewLangContext.treeviewlanguages.Count() > 0)
                    {
                        sortOrder = _treeViewLangContext.treeviewlanguages.Select(p => p.SortOrder).Max();
                    }
                    else
                    {
                        sortOrder = 10;
                    }
                    item.Id = Guid.NewGuid().ToString();
                    item.SortOrder = sortOrder + 10;
                    await _treeViewLangContext.AddAsync(item);
                    await _treeViewLangContext.SaveChangesAsync();
                }
                if (args.Action == "edit")
                {
                    var dbItem = _treeViewLangContext.treeviewlanguages.FirstOrDefault(p => p.Id == item.Id);
                    dbItem.Description = item.Description;
                    dbItem.LanguageFlag = item.LanguageFlag;
                    dbItem.SortOrder = item.SortOrder;
                    _treeViewLangContext.Update(dbItem);
                    await _treeViewLangContext.SaveChangesAsync();
                }
                break;
            case Syncfusion.EJ2.Blazor.Grids.Action.Delete:
                var delItem = _treeViewLangContext.treeviewlanguages.FirstOrDefault(p => p.Id == item.Id);
                _treeViewLangContext.Remove(delItem);
                await _treeViewLangContext.SaveChangesAsync();
                TreeViewLanguages = _treeViewLangContext.treeviewlanguages.OrderBy(p => p.SortOrder).ToList();
                StateHasChanged();
                break;
            default:
                break;
        }
    }
}


The problem is with the GridColum Template, where i display the language flag of the record. On first display everything is ok, but when i edit the record and change the flag, the language flag of the record disapears. When i look in the browser DOM the html is completly gone. Have you also an solution for this ? :-) Again, thank you very much.

Regards
Christoph


CW Christoph Weller August 1, 2019 08:19 AM UTC

Hello,

I have an solution, it was a little bit tricky but it works. I have to use an child component with cascaded parameters. Here ist the source

child-component

<img style="background-color:white;width:30px;height:30px;padding:4px;" src="@($"images/flags/{@Flag}.png")" />
@code {
    [CascadingParameter]
    public string Flag { get; set; }
}

The data-grid source is attached. Maybe you have an more elegant solution ?

Regards
Christoph


Attachment: menu_lang_5f7fca59.zip


RS Renjith Singh Rajendran Syncfusion Team August 1, 2019 12:02 PM UTC

Hi Christoph, 

Thanks for your suggestion. As this solution is a workaround and this will not be suitable for all the cases. So we have considered this as an issue.  
 
Thank you for taking the time to report this issue “The column template gets hidden after updating the edited record” and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our subsequent Nuget release which is expected to be roll out on or before August 19th 2019.  
  
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
  
  
Until then we suggest you to use this workaround solution.  

Regards, 
Renjith Singh Rajendran. 



CW Christoph Weller August 3, 2019 03:38 PM UTC

Hello,

With the new Blazor version 17.2.0.40 beta i have again problems with the rendering. Your suggested change:

// Startup.cs 
endpoints.MapBlazorHub();  // Remove this line 
endpoints.MapBlazorHub("app"); // Add this line 
// _Host.cshtml 
<app>@(await Html.RenderComponentAsync())app// Remove this line 
<app>app// Add this line 

does not work anymore, i couldn't get it working with this change.
Regards
Christoph


SD Saranya Dhayalan Syncfusion Team August 5, 2019 10:02 AM UTC

Hi Christoph, 
We have checked your reported issue in the version (17.2.40) and the menu is working properly at our end.  
We suggest you clear the NuGet cache and reinstall the Blazor packages in your application. If you still have the same problem after clearing the cache, please share the details below. 
  1. Reproduce your issue in the above sample.
  2. If possible, share the issue reproducible video.
Regards, 
Saranya 



CW Christoph Weller August 5, 2019 02:38 PM UTC

Hello Saranya,

Thank you for your answer. I did what you suggested, i also created a new project and made an menu which was successfull. But in my application it does not work, what i have noticted  where that there are javscript rendering exceptions which i have attached an picture of it. Maybe you could figure it out what happens.

Best regards
Christoph Weller

Attachment: js_errors_b8629609.zip


SD Saranya Dhayalan Syncfusion Team August 6, 2019 12:09 PM UTC

We have checked your attached screenshot, we are not able to reproduce your issue in our end. Before we proceed further, we would like to know the following details. 
1.       Please share the details if you bind events in menu component? 
2.       Please provide the Data source which you have set in the menu. 
 
3.      Provide your code snippet to replicate the issue in our end. 
 
4.       Whether issue occurred in initial rendering or else to interact in the menu component.  
Please provide the above information. So that we could be able to sort out the cause of this issue and provide you a better solution quickly? The information provided would be great help for us to proceed further. 
 
Regards, 
Saranya. 



CW Christoph Weller August 6, 2019 06:27 PM UTC

Hi Saranya,

I have attched all files which answer your questions. What i have found out, is that when i put the generate menu method from OnInitAsync to OnInit the Javascript errors disapear but the menu is still broken.

Regards
Christoph Weller

Attachment: syncfusion_c5f6a9b4.zip


CW Christoph Weller August 6, 2019 07:24 PM UTC

Hello Saranya,

You can stop searching, i found the problem,it is not with your libraries. The error lies here in my ASP.Net Core identity call:

async Task> GetUserRoles()
    {
        var rolesList = new List() { "User", "Admin", "Staff" };
        try
        {
            var userClaim = _httpContextAccessor.HttpContext.User.FindFirst(ClaimTypes.NameIdentifier).Value;
            _appUser = await _userManager.FindByIdAsync(userClaim);
            var roles = await _userManager.GetRolesAsync(_appUser);
            foreach (var item in roles)
            {
                rolesList.Add(item);
            }
        }
        catch (Exception)
        {
        }
        return rolesList;
    }

If i comment this out, everything works fine. The problem is that i use the ASP.Net Core libraries version 2.2 not 3.0preview7, the problem is that i use MySql and when i use the newest version of ASP.Net Core identity i will get problems with the MySql lib from Pomelo. That was the problem. I have to wait for new libs from Pomelo or i try the MySql Connector from Oracle. You can close this topic, Thank you very much for your Support !!

Best regards
Christoph Weller


SD Saranya Dhayalan Syncfusion Team August 7, 2019 05:52 AM UTC

  
Thanks for your update. 
We are happy to hear that your issue has been resolved. Kindly get back to us if you need any further assistance on Syncfusion components. 
  
Regards, 
Saranya 


Loader.
Up arrow icon