How Wijmo Works in MVC 5

When using MVC Tools, you have two application options: you can use the standard Visual Studio ASP.NET MVC 5 Web Application, or you may use our Wijmo-optimized ASP.NET MVC 5 Wijmo Web Application. The ASP.NET MVC 5 Wijmo Web Application (see Installing the MVC Tools Template and Creating an MVC Tools Project) uses Wijmo controls for its default UI, and the necessary Wijmo assemblies are already referenced in the application’s _Layout.cshtml page.

The Wijmo widgets will always be added under one or more of the views (.cshtml files) under the Views folder. It may be helpful if we go over a few basics about MVC 5 views.

Before a view appears to the user, the return View() statement for the view is executed in a controller. The layout of that view –and, in fact, the layout of ALL views in the project— is specified in the _ViewStart.cshtml. You can find the_ViewStart.cshtml file in the root of the Views folder.

If you open the _ViewStart.cshtml file, you will see the following Razor syntax:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

If you want a Wijmo widget to appear as part of the whole project’s layout, you can add the widget’s HTML element to this page and initialize it. In fact, the ASP.NET MVC 5 Wijmo Web Application already has a few widgets laid out in its _Layout.cshtml file.

And if you want the widgets to appear in a particular view, just open that view, add the widget’s HTML element to that page, and then initialize it using jQuery. If you want a menu on the first page, for example, all you have to do is add the following markup and script to the _Index.cshtml file.


<body>
<header>
  <div class="content-wrapper">
    <div class="float-left">
       <p class="site-title">@Html.ActionLink("Your MVC Application", "Index", "Home")</p>
    </div>
    <div class="float-right">
       <nav>
          <ul id="menu">
               <li>Hello</li>
               <li>World</li>
          </ul>
          <script type="text/javascript">
               $(document).ready(function () {
                   $("#menu").wijmenu();
               });
          </script>
       </nav>
    </div>
  </div>
</header>
</body>

It’s as simple as that.