Part 1 : Implementing w2ui in ASP.Net MVC – Basic configuration

Hi there,

if you dont know what is w2ui you should visit w2ui homepage. For me this is a wonderful javascript UI library with a very small footprint.

Sadly to say, there are very few tutorial on w2ui available except whats provided in their own page. As part time programmer, I found it very tricky when I want to implement it in my application.

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

OK. Let’s get started,

Step 1 : Download w2ui

  • Go to their web site ,
  • Download 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 this files using Add-Existing Items.. option.

Step 3 : Add w2ui reference in BundleConfig

  • add these line to your BundleConfig
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.

 

 

One Reply to “Part 1 : Implementing w2ui in ASP.Net MVC – Basic configuration”

Leave a Reply

Your email address will not be published. Required fields are marked *