Navigate to search page

Author: linkdotnet

LinkDotNet.Blog.Web/Shared/NavMenu.razor

@@ -1,28 +1,41 @@
-@inject AppConfiguration _configuration
+@inject AppConfiguration configuration
+@inject NavigationManager navigationManager
 
 <header class="nav-header">
     <nav class="nav">
         <div class="container">
             <div class="logo">
-                <a href="#">@_configuration.BlogName</a>
+                <a href="#">@configuration.BlogName</a>
             </div>
             <div id="mainListDiv" class="main_list">
                 <ul class="navlinks">
                     <li><a href="#">Home</a></li>
-                    @if (_configuration.HasLinkedinAccount)
+                    @if (configuration.HasLinkedinAccount)
                     {
-                        <li><a target="_blank" href="@_configuration.LinkedinAccountUrl"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
+                        <li><a target="_blank" href="@configuration.LinkedinAccountUrl"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
                     }
-                    @if (_configuration.HasGithubAccount)
+                    @if (configuration.HasGithubAccount)
                     {
-                        <li><a target="_blank" href="@_configuration.GithubAccountUrl"><i class="fab fa-github"></i> Github</a></li>
+                        <li><a target="_blank" href="@configuration.GithubAccountUrl"><i class="fab fa-github"></i> Github</a></li>
                     }
                     <AccessControl></AccessControl>
                     <li>
-                        <SearchInput></SearchInput>
+                        <SearchInput SearchEntered="NavigateToSearchPage"></SearchInput>
                     </li>
                 </ul>
             </div>
         </div>
     </nav>
-</header>
+</header>
+
+@code {
+    private void NavigateToSearchPage(string searchTerm)
+    {
+        if (string.IsNullOrWhiteSpace(searchTerm))
+        {
+            return;
+        }
+
+        navigationManager.NavigateTo($"search/{Uri.EscapeDataString(searchTerm.Trim())}");
+    }
+}

LinkDotNet.Blog.Web/Shared/SearchInput.razor

@@ -1,9 +1,17 @@
 <div class="search-bar">
-    <input type="text" class="search-bar-input" placeholder="search" aria-label="search"/>
-    <button class="search-bar-button" aria-label="search submit"><i class="fas fa-search"></i></button>
+    <input type="text" class="search-bar-input" placeholder="search" aria-label="search" @bind-value="searchTerm"/>
+    <button class="search-bar-button" aria-label="search submit" @onclick="CallSearchEntered"><i class="fas fa-search"></i></button>
 </div>
 
 @code {
+    private string searchTerm = string.Empty;
+    
     [Parameter]
-    public string Value { get; set; }
+    public EventCallback<string> SearchEntered { get; set; }
+
+    private async Task CallSearchEntered()
+    {
+        await SearchEntered.InvokeAsync(searchTerm);
+    }
+
 }