Sayfayı yeni sekmede açmak için official olarak bir yöntem şu an için bulunmamaktadır. Bu ihtiyacı workaround bir çözüm ile karşılayacağız. Çözüm önerisine makale devamında ulaşabilirsiniz.
Bahsettiğimiz workaround çözüm önerisine geçelim şimdi.
Yeni bir Blazor Server App projesi oluşturduğunuzda alttaki gibi içeriğe sahip Index.razor dosyasını buluyor olacaksınız.
1 2 3 4 5 6 7 | @page "/" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> |
Workaround çözümümüzün uygulanmış hali ile Index.razor dosyamızın son hali şöyledir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @page "/" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> <button class="btn btn-success" @onclick="NewTab">Yeni Sekmede Aç</button> @code { [Inject] public IJSRuntime JsRuntime { get; set; } protected void NewTab() { JsRuntime.InvokeAsync<object>("open", "counter", "_blank"); } } |
Üstteki kodu çalıştırdığınızda ve Yeni Sekmede Aç butonuna tıklarsanız Counter.razor sayfasının yeni sekmede açıldığını göreceksiniz.
Peki NavigationManager’a OpenInNewTab adında bir extension metod oluştursak ve böylelikle genel bir metod kullansak daha temiz bir kullanım olacaktır. Şimdi hazırladığımız NavigationManagerExtensions.cs class’ımızın içeriğine bir göz atalım.
1 2 3 4 5 6 7 8 9 10 11 | using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; namespace BlazorApp.Extensions { public static class NavigationManagerExtensions { public static void OpenInNewWindow(this NavigationManager navigationManager, IJSRuntime jsRuntime, string url) => jsRuntime.InvokeAsync<object>("open", url, "_blank"); } } |
Bu extension’dan sonra Index.razor dosyamızın son haline göz atalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @page "/" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> <button class="btn btn-success" @onclick="NewTab">Yeni Sekmede Aç</button> @code { [Inject] public NavigationManager NavigationManager { get; set; } [Inject] public IJSRuntime JsRuntime { get; set; } protected void NewTab() { NavigationManager.OpenInNewWindow(JsRuntime, "counter"); } } |
Sonuç
Bu makalede Blazor’da şu an için eksik kalan, backend taraftan yapılacak yönlendirmeyi nasıl yeni sekmede açabiliriz sorusuna cevap bulmaya çalıştık ve umarım ihtiyacınızı gidermiştir.
📚 Benzer Makaleler
- Blazor nedir, geliştirme ortamı nasıl kurulur?
- Blazor select multiple sorunu ve çözümü
- Visual Studio 2022 Özellikleri
- Geliştirici Bülteni 12 – Haftalık Geliştirici Bülteni
- Dependency Injection(DI) Nedir? Neden Kullanırız?
✍ Lütfen Sayfayı Yeni Sekmede Açmak konusunu ile alakalı olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
