Installation

ASP.net Core

1) Download MinSetupCoreDemo to use as an example, and copy the binaries (dll/js/css) files from it. Binaries can also be copied from here: trial download. 2) Copy from the libs folder 
Omu.AwesomeMvc.dll/xml
, 
Omu.Awem.dll/xml
and put into your 
libs
folder, copy 
wwwroot/lib/awe
and put in your 
wwwroot/lib/
folder. 3) Add nuget package reference to 
Newtonsoft.Json
13 or higher (if you don't have it already). 4) Add Reference to 
Omu.AwesomeMvc.dll
and 
Omu.Awem.dll
(right click your project -> Add -> Project Reference -> Browse -> Select dlls -> OK). 5) Add the following to 
Views\_ViewImports.cshtml
: 
@using Omu.AwesomeMvc
@using Omu.Awem.Helpers
6) In 
_Layout.cshtml
add references to jQuery (or aquery) and Awesome css and js files after declare the 
@Html.Awe().Init()
html helper, example: 
<link href="~/lib/awe/css/themes/mat/AwesomeMvc.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>            
<script src="~/lib/awe/js/AwesomeMvc.js" asp-append-version="true"></script>
<script src="~/lib/awe/js/awem.js" asp-append-version="true"></script>
<script src="~/lib/awe/js/aweUtils.js" asp-append-version="true"></script>

@Html.Awe().Init()
Now you can try adding 
@Html.Awe().Button().Text("hi").OnClick("awem.notif('hi')")
in your 
Index.cshtml
to test the installation. 7) In 
Program.cs
add or merge the following (this is for the metadata attributes): 
var provider = new AweMetaProvider();
builder.Services.AddControllersWithViews(o => o.ModelMetadataDetailsProviders.Add(provider));
If you're using 
Startup.cs
, in 
Startup.cs -> ConfigureServices
: 
var provider = new AweMetaProvider();
services.AddMvc(o =>
{
    o.ModelMetadataDetailsProviders.Add(provider);
});
Optional steps (utils used in our grid crud demos): 8) From the MinSetupCoreDemo copy the 
Utils
and 
Helpers
folder, and 
ViewModel/Input/DeleteConfirmInput.cs
, edit the namespaces in the copied 
.cs
files to match your project. 9) Copy the using statements for the helpers and utils from 
Views\_ViewImports.cshtml
, change the namespace to match your project, the result should look like this: 
@using Omu.AwesomeMvc
@using Omu.Awem.Helpers
@using YourAppNamespace.Helpers.Awesome
@using YourAppNamespace.Utils.Awesome
@using YourAppNamespace.ViewModels.Input
10) Copy 
Shared/Delete.cshtml
, 
Shared/_FieldLayout.cshtml
, and 
Shared/EditorTemplates
folder.

ASP.net Core _Layout.cshtml example

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ASP.net Core Awesome min setup demo</title>        
    <link href="~/lib/awe/css/themes/mat/AwesomeMvc.css" rel="stylesheet" type="text/css"/>        
</head>
<body class="mat">
    <div class="main">
        @RenderBody()
    </div>    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="~/lib/awe/js/AwesomeMvc.js" type="text/javascript"></script>
    <script src="~/lib/awe/js/awem.js" type="text/javascript"></script>
    <script src="~/lib/awe/js/aweUtils.js" type="text/javascript"></script>
    @Html.Awe().Init()    
</body>
</html>

Content Security Policy (CSP) Setup

To use ASP.NET Core Awesome in an application with a Content Security Policy (CSP), additional configuration is required to ensure compatibility with CSP restrictions. Download CSPMinSetupCoreDemo for an example solution. 1) In 
Program.cs
, disable inline styles and JavaScript by setting: 
Settings.UseInlineStyleAndJS = false;
2) In 
Views/Shared/_Layout.cshtml
, instead of 
@Html.Awe().Init()
use: 
@Html.Awe().InitTag()
Then, reference the 
aweinit.js
script. See the example 
_Layout.cshtml
below for details.

Example _Layout.cshtml for CSP

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    script-src 'self';
    style-src 'self' https://fonts.googleapis.com;
    font-src 'self' https://fonts.gstatic.com;
    object-src 'none';
    img-src 'self';
    ">
    <title>@ViewData["Title"] - ASP.NET Core Awesome min setup demo</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="~/lib/awe/css/themes/mat/AwesomeMvc.css" rel="stylesheet" type="text/css"/>
    <link href="~/css/site.css" rel="stylesheet" type="text/css" />
</head>
<body class="mat">
    <div class="main">
        @RenderBody()
    </div>
    @Html.Awe().InitTag()
    <script src="~/js/jquery-3.7.1.js"></script>
    <script src="~/lib/awe/js/AwesomeMvc.js" type="text/javascript"></script>
    <script src="~/lib/awe/js/awem.js" type="text/javascript"></script>
    <script src="~/lib/awe/js/aweUtils.js" type="text/javascript"></script>
    
    <script src="~/lib/awe/js/aweinit.js" type="text/javascript"></script>
</body>
</html>    

ASP.net MVC 5

1) Download the MinSetupDemo, 2) Copy from the libs folder 
Omu.AwesomeMvc.dll/xml
, 
Omu.Awem.dll/xml
and put into your 
libs
folder, copy 
lib/awe
and put in your 
/lib/
folder. 3) Reference 
Omu.AwesomeMvc.dll
and 
Omu.Awem.dll
in your web project. 4) Open 
Views\web.config
and in 
<system.web.webPages.razor> -> <pages> -> <namespaces>
add: 
<add namespace="Omu.AwesomeMvc" />
<add namespace="Omu.Awem.Helpers" />
If you're using aspx, ascx views you would add the same in the main web.config in 
<system.web> -> <pages> -> <namespaces>
5) Open 
_Layout.cshtml
and copy the references to the js and css files ( keep the same order ), and the call to 
@Html.Awe().Init()
. Now you can try adding 
@Html.Awe().Button().Text("hi").OnClick("awem.notif('awesome')")
in your 
Index.cshtml
to test the installation. Optional (utils used in our grid crud demos): 6) Copy the 
Utils
and 
Helpers
folder, and 
ViewModel/Input/DeleteConfirmInput.cs
, include them in your project, edit the namespaces in the copied cs files to match your project. 7) add the new namespaces to the 
Views\web.config
<add namespace="YourAppNamespace.Utils" />
<add namespace="YourAppNamespace.Helpers.Awesome" />
8) Copy the`Views/Shared/EditorTemplates` folder and 
Views/Shared/Delete.cshtml
.

ASP.net MVC 5 _Layout.cshtml example

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - ASP.net MVC Awesome MVC5 min setup demo</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="@Url.Content("~/lib/awe/css/themes/mat/AwesomeMvc.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="main">
        @RenderBody()
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="@Url.Content("~/lib/awe/js/AwesomeMvc.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/lib/awe/js/awem.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/lib/awe/js/aweUtils.js")" type="text/javascript"></script>

    @Html.Awe().Init()
</body>
</html>



Comments
By accessing this site, you agree to store cookies on your device and disclose information in accordance with our cookie policy and privacy policy .