Setting Up Shield UI for ASP.NET Core MVC

This page contains information how to install and setup Visual Studio and ASP.NET Core, create and configure a project using Shield UI for ASP.NET Core MVC.
 

Install Visual Studio and .NET Core

Download and install the latest version of Visual Studio. Skip this step if you have Visual Studio 2017 or higher already installed.

Run the installer and select the following options:

• ASP.NET and web development (under Web & Cloud)
• .NET Core cross-platform development (under Other Toolsets)

Create a Web Application

Open Visual Studio and click File > New > Project.

In the New Project window, select .NET Core in the left pane, click on ASP.NET Core Web Application (.NET Core) in the middle pane and choose a name for your project.

In the next window, select ASP.NET Core 1.1 for the version, click Web Application and finally click OK to create the project.

At this point Visual Studio should have created your project using a default template. To run the application in debug mode, press F5. Use Ctrl + F5 for non-debug mode.
 

Setup Shield UI for ASP.NET Core MVC

Install the latest version of the ShieldUI.AspNetCore.Mvc NuGet package for your project. One way to do this is to right-click your Project and select Manage NuGet Packages from the menu.

Import the ShieldUI.AspNetCore.Mvc namespace by adding the following line in your project's Views/_ViewImports.cshtml file:
@using ShieldUI.AspNetCore.Mvc

NOTE: If you cannot find the above file, substitute the Views part of the path with Pages - e.g. Pages/_ViewImports.cshtml.

Update your Startup.cs file to add the Shield UI initialization code .

Import the ShieldUI.AspNetCore.Mvc namespace by adding the following line at the top of the Startup.cs file:
using ShieldUI.AspNetCore.Mvc;

In Startup.cs, locate the ConfigureServices method and add the following lines to the end:

public void ConfigureServices(IServiceCollection services)
{
    ...

    // add Shield UI
    services.AddShieldUI();
}

Also in Startup.cs, locate the Configure method and add the following lines to the end:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
    ILoggerFactory loggerFactory)
{
    ...

    // use Shield UI
    app.UseShieldUI();
}

Add the Shield UI Client Resources

Download the latest Shield UI for JavaScript bundle, unzip it and copy the whole directory into your project's wwwroot/lib folder.

NOTE: You can rename the top-level directory, containing the Shield UI package, and remove the version and other specific suffixes.

Update your Views/Shared/_Layout.cshtml master view and verify that the jQuery and Shield UI library resources will be loaded before the main content (before the BODY part of your content).

NOTE: If you cannot find the above file, substitute the Views part of the path with Pages - e.g. Pages/Shared/_Layout.cshtml.

By default, the Visual Studio project template puts all JavaScript resources to be loaded at the end of the BODY section of the master layout, after the place where the main content will be rendered. The JavaScript references are loaded with code similar to:

<environment names="Development">
	<script src="~/lib/jquery/dist/jquery.js"></script>
	<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
	<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
			asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
			asp-fallback-test="window.jQuery"
			crossorigin="anonymous"
			integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
	</script>
	<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
			asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
			asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
			crossorigin="anonymous"
			integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
	</script>
	<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

NOTE: If you cannot find the above code in your layout page, you should just move the jquery.js include to the HEAD section of the page. It should look like this:

    <script src="~/lib/jquery/dist/jquery.min.js"></script>

In order for the Shield UI for ASP.NET Core MVC widgets to work properly, the jQuery and Shield UI JavaScript libraries should be loaded before the main content.
To achieve this, you can move (Cut & Paste) the above code right before the closing </head> tag in the _Layout.cshtml file, and add the following two references after that code:

    <link rel="stylesheet" href="~/lib/shieldui/css/light/all.min.css" />
    <script src="~/lib/shieldui/js/shieldui-all.min.js"></script>

</head>

NOTE: You can move only the code for jQuery and Shield UI in the HEAD section, but that will require custom splitting of the default JavaScript referencing block. If you do that, you should make sure not to load jQuery and other JavaScript libraries more than once, as this may lead to unexpected results and problems which are hard to trace.
 

Use a Shield UI Widget

You can now initialize and use a Shield UI widget for ASP.NET Core MVC.

Paste the following code at the end of your Views/Home/Index.cshtml file and start the application by pressing F5:

@(Html.ShieldChart()
    .Name("chart")
    .Tooltip(tooltip => tooltip.AxisMarkers(axisMarkers => axisMarkers
        .Enabled(true)
        .Mode(ShieldUI.AspNetCore.Mvc.Chart.TooltipAxisMarkerMode.XY)
        .Width(1)
        .ZIndex(3)))
    .Theme("light")
    .PrimaryHeader(header => header.Text("Budget overview"))
    .Export(false)
    .AxisX(axis => axis.CategoricalValues(
        "2000", "2001", "2002", "2003", "2004", 
        "2005", "2006", "2007", "2008", "2009", 
        "2010", "2011", "2012", "2013", "2014"
    ))
    .DataSeries(series =>
        series.Area()
              .Name("Budget in Thousands")
              .Data(new object[] { 
                  100, 320, 453, 234, 553, 
                  665, 345, 123, 432, 545, 
                  654, 345, 332, 456, 234 
              })
    )
)

NOTE: If you cannot find the above file, substitute the Views part of the path with Pages - e.g. Pages/Home/Index.cshtml.

You should see a Shield UI Chart at the bottom of the page:


 

For more examples with specific Shield UI widgets, check out the ASP.NET Core Demos section.