第一部分：在 ASP.NET MVC 中实现 w2ui – 基本配置

引言

如果你不了解 w2ui 是什么，你应该访问 w2ui 官网。对我来说，这是一个非常棒的 JavaScript UI 库，占用空间很小。

很遗憾地说，除了 w2ui 官网提供的文档外，关于 w2ui 的教程非常少。作为一名兼职程序员，我在尝试将其应用到我的应用程序时，觉得非常棘手。

所以在这里，我想分享我在 ASP.NET MVC 应用程序中实现它的方法。更重要的是，这将会成为我未来的参考，因为我倾向于过一段时间后就会忘记它。这可能不是最好的解决方案，但这是我让它工作的方式。

好的，让我们开始吧。

步骤 1：下载 w2ui

• 访问他们的 网站。
• 下载最新版本的 w2ui（当前版本为 1.5.rc1）。
• 将 zip 文件解压到你的本地文件夹。
• 你应该得到 4 个文件（假设你下载的是 1.5.rc1 版本）
  • w2ui-1.5.rc1.css
  • w2ui-1.5.rc1.min.css
  • w2ui-1.5.rc1.js
  • w2ui-1.5.rc1.min.js

步骤 2：在你的程序中添加 w2ui

• 打开你的 ASP.NET 项目。
• 在 Content 文件夹下创建 w2ui 文件夹
  • 将 w2ui-1.5.rc1.css 和 w2ui-1.5.rc1.min.css 添加到此文件夹。
• 在 Scripts 文件夹下创建 w2ui 文件夹
  • 将 w2ui-1.5.rc1.js 和 w2ui-1.5.rc1.min.js 添加到此文件夹。

注意：你应该使用 添加现有项目.. 选项添加这些文件。

步骤 3：在 BundleConfig 中添加 w2ui 引用

• 将这些行添加到你的 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"));
  }

• 现在我们可以开始了。

如果你感到困惑，可以观看这个 YouTube 视频。

在 我的下一篇帖子 中，我将向你展示如何在我的项目中实现 w2ui grid。

参考

• w2ui 首页
• CodeProject