title: How to use Razor class library inside a ASP.NET Core application
body: <p>I wrote a simple Razor class library as following</p>
  <p><a href="https://i.stack.imgur.com/5XyTP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5XyTP.png" alt="enter image description here" /></a></p>
  <p><strong>Areas/Library/Pages/_ViewStart.cshtml</strong></p>
  <pre class="lang-cs prettyprint-override"><code>@{
      Layout = &quot;_Layout&quot;;
  } 
  </code></pre>
  <p><strong>Areas/Library/Pages/Shared/_Login.cshtml</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
      &lt;h1&gt;Log in&lt;/h1&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;section&gt;
                  &lt;form id=&quot;account&quot; method=&quot;post&quot; novalidate=&quot;novalidate&quot;&gt;
                      &lt;h4&gt;Use a local account to log in.&lt;/h4&gt;
                      &lt;hr&gt;
                      &lt;div class=&quot;text-danger validation-summary-valid&quot; data-valmsg-summary=&quot;true&quot;&gt;
                          &lt;ul&gt;
                              &lt;li style=&quot;display:none&quot;&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label for=&quot;Input_Email&quot;&gt;Email&lt;/label&gt;
                          &lt;input class=&quot;form-control&quot; type=&quot;email&quot; data-val=&quot;true&quot; data-val-email=&quot;The Email field is not a valid e-mail address.&quot;
                                 data-val-required=&quot;The Email field is required.&quot; id=&quot;Input_Email&quot; name=&quot;Input.Email&quot; value=&quot;&quot;&gt;
                          &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;Input.Email&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label for=&quot;Input_Password&quot;&gt;Password&lt;/label&gt;
                          &lt;input class=&quot;form-control&quot; type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;Input_Password&quot; name=&quot;Input.Password&quot;&gt;
                          &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;Input.Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;div class=&quot;checkbox&quot;&gt;
                              &lt;label for=&quot;Input_RememberMe&quot;&gt;
                                  &lt;input type=&quot;checkbox&quot; data-val=&quot;true&quot; data-val-required=&quot;The Remember me? field is required.&quot; id=&quot;Input_RememberMe&quot; name=&quot;Input.RememberMe&quot; value=&quot;true&quot;&gt;
                                  Remember me?
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Log in&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Areas/Library/Pages/Shared/_Message.cshtml</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;h3&gt;This is a Partial View&lt;/h3&gt;
  &lt;p&gt;This Partial view cretead as a Razor Class Library&lt;/p&gt;
  </code></pre>
  <p><strong>Areas/Library/Pages/Shared/_Register.cshtml</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
      &lt;h1&gt;Register&lt;/h1&gt;
  
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;form method=&quot;post&quot; action=&quot;/Identity/Account/Register&quot; novalidate=&quot;novalidate&quot;&gt;
                  &lt;h4&gt;Create a new account.&lt;/h4&gt;
                  &lt;hr&gt;
                  &lt;div class=&quot;text-danger validation-summary-valid&quot; data-valmsg-summary=&quot;true&quot;&gt;
                      &lt;ul&gt;
                          &lt;li style=&quot;display:none&quot;&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;Input_Email&quot;&gt;Email&lt;/label&gt;
                      &lt;input class=&quot;form-control&quot; type=&quot;email&quot; data-val=&quot;true&quot; data-val-email=&quot;The Email field is not a valid e-mail address.&quot; data-val-required=&quot;The Email field is required.&quot; id=&quot;Input_Email&quot; name=&quot;Input.Email&quot; value=&quot;&quot;&gt;
                      &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;Input.Email&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;Input_Password&quot;&gt;Password&lt;/label&gt;
                      &lt;input class=&quot;form-control&quot; type=&quot;password&quot; data-val=&quot;true&quot; data-val-length=&quot;The Password must be at least 6 and at max 100 characters long.&quot; data-val-length-max=&quot;100&quot; data-val-length-min=&quot;6&quot;
                             data-val-required=&quot;The Password field is required.&quot; id=&quot;Input_Password&quot; maxlength=&quot;100&quot; name=&quot;Input.Password&quot; aria-autocomplete=&quot;list&quot;&gt;
                      &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;Input.Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;Input_ConfirmPassword&quot;&gt;Confirm password&lt;/label&gt;
                      &lt;input class=&quot;form-control&quot; type=&quot;password&quot; data-val=&quot;true&quot; data-val-equalto=&quot;The password and confirmation password do not match.&quot; data-val-equalto-other=&quot;*.Password&quot; id=&quot;Input_ConfirmPassword&quot;
                             name=&quot;Input.ConfirmPassword&quot;&gt;
                      &lt;span class=&quot;text-danger field-validation-valid&quot; data-valmsg-for=&quot;Input.ConfirmPassword&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Register&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Areas/Library/Pages/Page1.cshtml</strong></p>
  <pre class="lang-cs prettyprint-override"><code>@page
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  &lt;h2&gt;Hello from a Razor UI class library!&lt;/h2&gt;
  &lt;partial name=&quot;_Message&quot; /&gt;
  </code></pre>
  <p><strong>Areas/Library/Pages/Page2.cshtml</strong></p>
  <pre class="lang-cs prettyprint-override"><code>@page
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  &lt;partial name=&quot;_Login&quot; /&gt;
  </code></pre>
  <p><strong>Areas/Library/Pages/Page3.cshtml</strong></p>
  <pre class="lang-cs prettyprint-override"><code>@page
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  &lt;partial name=&quot;_Register&quot; /&gt; 
  </code></pre>
  <p>After that, I added it as a dependency to a new web app project, and I changed the Layout</p>
  <p><a href="https://i.stack.imgur.com/YfoEE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YfoEE.png" alt="enter image description here" /></a></p>
  <p><strong>WebApp Layout</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;@ViewData[&quot;Title&quot;] - WebApplication1&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/bootstrap/dist/css/bootstrap.min.css&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;~/css/site.css&quot; /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav class=&quot;navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;a class=&quot;navbar-brand&quot; asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Index&quot;&gt;WebApplication1&lt;/a&gt;
                  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot; aria-controls=&quot;navbarSupportedContent&quot;
                          aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class=&quot;navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse&quot;&gt;
                      &lt;ul class=&quot;navbar-nav flex-grow-1&quot;&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Index&quot;&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Privacy&quot;&gt;Privacy&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a asp-page=&quot;/Page3&quot; asp-area=&quot;Library&quot; class=&quot;nav-link text-dark&quot; &gt;Register&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a asp-page=&quot;/Page1&quot; asp-area=&quot;Library&quot; class=&quot;nav-link text-dark&quot; &gt;Page1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a asp-page=&quot;/Page2&quot; asp-area=&quot;Library&quot; class=&quot;nav-link text-dark&quot; &gt;Login&lt;/a&gt;
                          &lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;main role=&quot;main&quot; class=&quot;pb-3&quot;&gt;
              @RenderBody()
          &lt;/main&gt;
      &lt;/div&gt;
  
      &lt;footer class=&quot;border-top footer text-muted&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &amp;copy; 2020 - WebApplication1 - &lt;a asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Privacy&quot;&gt;Privacy&lt;/a&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
      &lt;script src=&quot;~/lib/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/lib/bootstrap/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/js/site.js&quot; asp-append-version=&quot;true&quot;&gt;&lt;/script&gt;
      @RenderSection(&quot;Scripts&quot;, required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>So, As you can see, I added the below code to the default layout</p>
  <pre class="lang-html prettyprint-override"><code>&lt;li class=&quot;nav-item&quot;&gt;
      &lt;a asp-page=&quot;/Page3&quot; asp-area=&quot;Library&quot; class=&quot;nav-link text-dark&quot; &gt;Register&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
      &lt;a asp-page=&quot;/Page1&quot; asp-area=&quot;Library&quot; class=&quot;nav-link text-dark&quot; &gt;Page1&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
      &lt;a asp-page=&quot;/Page2&quot; asp-area=&quot;Library&quot; class=&quot;nav-link text-dark&quot; &gt;Login&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  <p>The result is looking good</p>
  <p><a href="https://i.stack.imgur.com/9wCd8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9wCd8.png" alt="enter image description here" /></a></p>
  <p>But the razor pages does not work.</p>
  <p><a href="https://i.stack.imgur.com/CFFAk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CFFAk.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/8FLZt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8FLZt.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/iflil.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iflil.png" alt="enter image description here" /></a></p>
  <p>There is no content available by clicking, Can anyone help to find out the problem?</p>
  <p><strong>Sample Repository:</strong> <a href="https://github.com/HamedFathi/RazorCL" rel="nofollow noreferrer">RazorCL</a></p>