Installation

ASP.net Web-Forms Awesome Library installation

1) Install NuGet package Microsoft.AspNet.Mvc in your Asp.net Web-Forms project. 2) Download the WebFormsMinSetupDemo open it and use it as guide for the next steps. 3) Copy from it and put in the same folders in your solution the following:

libs folder: Omu.AwesomeWebForms.dll/xml, Omu.AwemWebForms.dll/xml
Scripts folder: AwesomeWebForms.js, awem.js, aweUtils.js
Content/themes: copy the "themes" folder into your "Content" folder

4) Add reference to

Omu.AwesomeWebForms.dll

and

Omu.AwemWebForms.dll

in your web project. 5) Open

Site.Master

and copy the references to the js and css files ( keep the same order ), and add the call to

Page.Awe().Init()

. In the header add

AwesomeMvc.css

and

jquery.js

(jquery needs to be in the header for document.ready), and before the </body> add

AwesomeWebForms.js

awem.js

aweUtils.js

and call

Page.Awe().Init()

<head>
...
<link href="<%= ResolveUrl("~/Content/themes/gui3/AwesomeMvc.css") %>" rel="stylesheet" type="text/css" />    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
</head>
...
<script src="<%= ResolveUrl("~/Scripts/AwesomeWebForms.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/awem.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/aweUtils.js") %>" type="text/javascript"></script>
<%=Page.Awe().Init() %>
</body>

Note: Don't add jquery if you already have it referenced in some other way, for example with a control like this:

<asp:ScriptReference Name="jquery" />

6) In the main

web.config

add the awe tag prefix:

<system.web>  
...
<pages>
  <controls>
    <add tagPrefix="awe" namespace="Omu.AwesomeWebForms" assembly="Omu.AwesomeWebForms" />
  </controls>

7) In the main web.config add the awesome namespaces:

<system.web>  
...
<pages>
...
  <namespaces>
    <add namespace="Omu.AwesomeWebForms" />
    <add namespace="Omu.AwemWebForms.Helpers" />

8) Add the same namespaces in

Views\web.config

(for the razor views): (if you don't have

Views

folder and

web.config

file in it, create/copy them)

<system.web.webPages.razor>
...
<pages pageBaseType="System.Web.Mvc.WebViewPage">
  <namespaces>
    <add namespace="Omu.AwesomeWebForms" />
    <add namespace="Omu.AwemWebForms.Helpers" />

9) Register the MVC routes, in

Global.asax.cs

copy (or merge) the

Application_Start

method:

public class Global : HttpApplication
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        // keep default.aspx for empty url
        routes.IgnoreRoute("");

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );
    }

    protected void Application_Start(object sender, EventArgs e)
    {
        ...
        AreaRegistration.RegisterAllAreas();

        RegisterRoutes(RouteTable.Routes);
        
        // uncomment only if you have the call to <%=AntiForgery.GetHtml() %> in Site.master
        //FilterProviders.Providers.Add(new AntiForgeryTokenFilter());

        Settings.CheckboxModFunc = box => box.Ochk();
    }
    ...
}

Optional (You'll need this for the

Page.Url()

extension to be available): 10) Copy the

Utils

and

Helpers

folder, edit the namespaces in the containing cs files to match your project. 11) Add the namespaces for the newly added Utils and Helpers; like in step 7) and 8) add these lines:

    <add namespace="YourAppNamespace.Utils" />
    <add namespace="YourAppNamespace.Helpers.Awesome" />

12) 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. 13) Try adding a control, in

Default.aspx

add:

<% Con1.Button().Text("hello world").OnClick("awem.notif('hi')"); %>    
<awe:Ocon runat="server" ID="Con1" />

hit

Ctrl+F5

14) Add the

Controllers

folder, in it add a class like this:

public class DataController : Controller
{
    public ActionResult Foos()
    {
        return Json(new List<KeyContent>()
        {
            new KeyContent(1, "hi")
        });
    }
}

Default.aspx

this code:

<% Dropdown1.AjaxRadioList().Url(Page.Url().Action("Foos", "Data")).Odropdown(); %>
<awe:Ocon runat="server" ID="Dropdown1" />

Hit

Ctrl+F5

and check the dropdown.

Additional notes

Grid crud icons used in our demos are located in site.css, to use them copy the code between comments

/* grid btns */

, and the

Content/editdel.png