Part 1: Implementing w2ui in ASP.NET MVC – Basic Configuration

Introduction

If you don't know what is w2ui, you should visit the w2ui homepage. For me, this is a wonderful JavaScript UI library with a very small footprint.

Sad to say, there are very minimum tutorials on w2ui except what's provided in their own page. As a part time programmer, I found it very tricky when I wanted to implement it in my application.

So here, I would like to share how I implement it in my ASP.NET MVC application. More importantly, this will become my own reference point in the future as I tend to forget it after a while. This may not be the best solution, but this is how I got it to work.

OK. Let’s get started.

Step 1: Download w2ui

• Go to their web site.
• Download the latest version of w2ui (currently 1.5.rc1).
• Extract the zip file to your local folder.
• You should get 4 files (assuming you have downloaded the 1.5.rc1 version):
  • w2ui-1.5.rc1.css
  • w2ui-1.5.rc1.min.css
  • w2ui-1.5.rc1.js
  • w2ui-1.5.rc1.min.js

Step 2: Add w2ui in Your Program

• Open your ASP.NET project.
• Create w2ui folder under Content folder:
  • Add w2ui-1.5.rc1.css and w2ui-1.5.rc1.min.css to this folder.
• Create w2ui folder under Scripts folder:
  • Add w2ui-1.5.rc1.js and w2ui-1.5.rc1.min.js to this folder.

Notes: You should add these files using Add-Existing Items.. option.

Step 3: Add w2ui Reference in BundleConfig

• Add these lines to your BundleConfig:
  JavaScript

  public static void RegisterBundles(BundleCollection bundles)
  {
     ... 
     RegisterW2ui(bundles);
  }
  
  private static void RegisterW2ui(bundleCollection bundles)
  {
     bundles.Add(new ScriptBundle("~/w2ui/js").Include(
           "~/Scripts/w2ui/w2ui-1.5.rc1.min.js"));
     bundles.Add(new StyleBundle("~/w2ui/css").Include(
           "~/Content/w2ui/w2ui-1.5.rc1.min.css"));
  }

• Now we are good to go.

If you get confuse, try watch this youtube video.

In my next post I will show you how I implement w2ui grid in my project.

Reference

• w2ui homepage
• CodeProject