Oqtane Tutorials

Koi Tutorials

Tutorial Home › Koi

Koi - Auto-Add Bootstrap5 but inform Admin

#4 Koi - Switch between template files

Get Data from the Backend using JS

Resources

Switch between template files based on Bootstrap Version

In this example, we'll assume you have a Bootstrap3 and a Bootstrap4 template in the folders bs3/_Line.cshtml and the same in bs4/_Line.cshtml. We'll use Koi to load the right template file.

You can see in the source-codes that BS3 uses pull-left and another class on the blockquote tag than BS4.

Output

You are seeing the Bootstrap5 Template

"this is pretty awesome!"

@*
  This page is just an entry point for your code. It will do the following:
  1. Check if it can detect the CSS framework used by the theme
    - if yes, it will use that
    - otherwise it will fallback to assume it's bootstrap 4 = "bs4"
    - note that the BS4 edition has an additional check for unknown frameworks
  2. Then it will load the real cshtml-template from the matching edition-folder
*@
@{ 
  var folder = Kit.Css.Is("bs5") ? "bs5" : Kit.Css.Is("bs4") ? "bs4" : "bs3";
}
@Html.Partial(folder + "/Alert.cshtml")

Source Code of bs3/Alert.cshtml@inherits Custom.Hybrid.Razor14
<div class="alert alert-success pull-left" role="alert">
    <h3>You are seeing the Bootstrap3 Template</h3>
  <blockquote class="blockquote-reverse">
    "this is awesome!"
  </blockquote>
</div>

Source Code of bs4/Alert.cshtml@inherits Custom.Hybrid.Razor14

<div class="alert alert-success float-left" role="alert">
  <h3>You are seeing the Bootstrap4 Template</h3>
  <blockquote class="text-right">
    "this is awesome!"
  </blockquote>
</div>

Koi - Auto-Add Bootstrap5 but inform Admin

#4 Koi - Switch between template files

Get Data from the Backend using JS

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <div class="row">
        <div class="col-lg-8">
          <h2>Switch between template files based on Bootstrap Version</h2>
          <p>
            In this example, we'll assume you have a Bootstrap3 and a Bootstrap4 template in the folders <code>bs3/_Line.cshtml</code> and the same in <code>bs4/_Line.cshtml</code>. We'll use Koi to load the right template file. 
          </p>
          <p>
            You can see in the source-codes that BS3 uses <code>pull-left</code> and another class on the blockquote tag than BS4.
          </p>
        </div>
        <div class="col-lg-4">
          <img loading="lazy" src="@App.Path/koi/assets/koi.png?w=200">
        </div>
      </div>
    </div>
  </div>

  @*
    This page is just an entry point for your code. It will do the following:
    1. Check if it can detect the CSS framework used by the theme
      - if yes, it will use that
      - otherwise it will fallback to assume it's bootstrap 4 = "bs4"
      - note that the BS4 edition has an additional check for unknown frameworks
    2. Then it will load the real cshtml-template from the matching edition-folder
  *@
  @{ 
    var folder = Kit.Css.Is("bs5") ? "bs5" : Kit.Css.Is("bs4") ? "bs4" : "bs3";
  }
  @Html.Partial(folder + "/Alert.cshtml")



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })