Menu Bar in MainLayout.razor is not updated on navigating

13 Replies
3 Participants

Created by
CW Christoph Weller

Platform
Blazor

Platform
Blazor

Control
Menu Bar

Created On
Jul 28, 2019 03:36 PM UTC

Last Activity On
Aug 7, 2019 05:52 AM UTC

Want to subscribe?
SIGN IN

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.

Video link: https://www.syncfusion.com/downloads/support/forum/146247/ze/Menu-1690468389

Sample link: https://www.syncfusion.com/downloads/support/forum/146247/ze/WEA79F~1-1176712943

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,

Sample link: https://www.syncfusion.com/downloads/support/forum/146247/ze/WebApplication2103368125

Please find the below GitHub link for more details regarding this issue

GitHub link: https://github.com/aspnet/AspNetCore/issues/12688

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">

var lang = (context as TreeViewLanguage);

<br />

<Syncfusion.EJ2.Blazor.DropDowns.EjsDropDownList ID="LanguageFlag" Width="200" CssClass="dropdown" DataSource=@DropDownLanguages Value="@lang.LanguageFlag" AllowFiltering="true">

</Syncfusion.EJ2.Blazor.DropDowns.EjsDropDownList>

<br />

}

</Template>

</GridEditSettings>

var lang = (context as TreeViewLanguage);

<div>

</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

@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 19^th 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.

Feedback Link : https://www.syncfusion.com/feedback/7876/editing-is-not-working-properly-in-template-column-which-uses-cell-edit-template-for-edit-action

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.

Sample link: https://www.syncfusion.com/downloads/support/forum/146247/ze/prev-7-app1218497943

Video link: https://www.syncfusion.com/downloads/support/forum/146247/ze/Meu-video1425079011

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.

Reproduce your issue in the above sample.
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

Hi Christoph,

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

Hi Christoph,

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

Need More Help?

Get personalized assistance from our support team.

Contact Support

13 Replies
3 Participants
Want to subscribe?
SIGN IN
Created by
CW Christoph Weller
Platform
Blazor
Control
Menu Bar
Created On
Jul 28, 2019 03:36 PM UTC
Last Activity On
Aug 7, 2019 05:52 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support