Installation

ASP.net Core

installation video tutorial here 1) We recommend you download the MinSetupCoreDemo to use as an example, and you can also copy the dll/js/css files from it. 2) Copy and put in the same folders in your solution the following:

libs folder: Omu.AwesomeMvc.dll/xml, Omu.Awem.dll/xml
wwwroot/js: AwesomeMvc.js, awem.js, aweUtils.js
wwwroot/css: themes 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) Open

_Layout.cshtml

and add references to jQuery and Awesome css and js files after declare the

@Html.Awe().Init()

html helper, example:

    <link href="~/css/themes/gui3/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="~/js/AwesomeMvc.js" type="text/javascript"></script>
    <script src="~/js/awem.js" type="text/javascript"></script>
    <script src="~/js/aweUtils.js" type="text/javascript"></script>

    @Html.Awe().Init()

At this point you should be able to write

@Html.Awe().Button().Text("hi").OnClick("awem.notif('hi')")

in your

Index.cshtml

and it should work. 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 -> ConfigureSerices

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/merge the content of

Views\_ViewImports.cshtml

, you need to modify some lines to match the namespaces of your project (e.g.

MyProject.Helpers

instead of

MinSetupCore.Helpers

). 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"] </title>
    <link href="~/css/themes/gui3/AwesomeMvc.css" rel="stylesheet" type="text/css"/>    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="main">
        @RenderBody()
    </div>

    <script src="~/js/AwesomeMvc.js" type="text/javascript"></script>
    <script src="~/js/awem.js" type="text/javascript"></script>
    <script src="~/js/aweUtils.js" type="text/javascript"></script>

    @*call init after aweUtils.js *@
    @Html.Awe().Init()    
</body>
</html>

ASP.net MVC 5

1) Download the MinSetupDemo, 2) Copy from it and put in the same folders in your solution the following:

libs folder: Omu.AwesomeMvc.dll/xml, Omu.Awem.dll/xml
Scripts folder: AwesomeMvc.js, awem.js, aweUtils.js
Content/themes folder: copy the whole 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()

. At this point you should be able to write

@Html.Awe().Button().Text("hi").OnClick("awem.notif('awesome')")

in your

Index.cshtml

and it will work. 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) You can also copy the

Views/Shared/EditorTemplates

folder and

Views/Shared/Delete.cshtml

, if you're following/copying from our demos it is likely that you're going to need them.

aweui

If you want to add aweui to an app that already has

AwesomeMvc.js

referenced, you must not add

awef.js

and

awe.js

because

AwesomeMvc.js

contains both of them. All you need to add is:

awedict.js

(or

awedict.fr.js

for example) and

aweui.js

@Html.Awe().Init()

will call

aweui.init()

if it finds

aweui

present so there no need to call it again. For an example you can download our AweMySql demo, it uses both ASP.net Core Awesome and aweui.

Include jQuery at the bottom of the page

jQuery needs to be referenced before any awesome helper is called, however you can avoid that using the

AwejQuery()

helper, call it in the

head

tag instead of jquery:

    @Html.Awe().AwejQuery()
</head>

and now you can include the script reference to jQuery at the bottom of the page, but still before the awesome js files, you can see this helper being used in our main demo's

_Layout.cshtml

Inline styles and js

By default our html helpers will generate an inline script for each helper declaration, if your application needs to avoid that you can call in

Program.cs

(or

Startup.cs

) the following:

Settings.UseInlineStyleAndJS = false;

Instead of the

Awe().Init()

helper we will use the

Awe().InitTag()

and reference

aweinit.js

after we've referenced all awe js files:

@Html.Awe().InitTag()
<script src="~/js/aweinit.js" type="text/javascript"></script>

Comments