快捷搜索:
来自 计算机编程 2019-10-31 17:48 的文章
当前位置: 67677新澳门手机版 > 计算机编程 > 正文

67677新澳门手机版Asp.net MVC5引用ExtJS6

摘要:VisualStuio二零一六 asp.net mvc如何援引ExtJS6,使用BundleConfig。

先是下载ExtJS6.0 gpl版。ExtJS有和好的次序框架,但我们须要asp.net mvc5,ExtJS只用作界面库。

接下去要把下载好的ExtJS6的骨干部分抽出出来,目录结构是如此的:

67677新澳门手机版 1

要引用的东西全在build目录下,这一个目录有400多M,对于vs项目援用太大了。先把build目录复制到VS项目目录下重命名叫ExtJS60。

1、将目录examples、welcome,文件index.html、release-notes.html删除。

2、删除调节和测验用的文件。那一个目录里有那叁个*debug.js、*debug.scss文件,删除之。用Everything

67677新澳门手机版 2

这么大器晚成甩卖就剩下40多M了。能够间接选取自个儿管理好的 密码: 1q14。

接下去正是使用@Scripts.Render和@Styles.Render引用ExtJS。MVC提供了BundleConfig.cs文件用于充实js脚本和css样式,View视图统生机勃勃调用,还能够对js和css进行减削。

1、js文件重大引用三个ext-all.js和locale-zh_CN.js。

2、核心Css文件。先要在BundleConfig.cs文件中把主旨的css文件引用上。
ExtJS6.0buildclassictheme-主题resources那些目录下有个主css文件,名字:theme-大旨-all.css。

部分能够直接援引,比方buildclassictheme-classicresourcestheme-classic-all.css,

局地自己又导入八个css文件,举例buildclassictheme-tritonresourcestheme-triton-all.css

67677新澳门手机版 3

用记事本张开theme-triton-all.css:

@import 'theme-triton-all_1.css';
@import 'theme-triton-all_2.css';

那就知道了,间接援用theme-triton-all_1.css和theme-triton-all_2.css。

就如自家代码里写的:
StyleBundle StyleBL = new StyleBundle("~/ExtJS_CSS_triton");
StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_1.css", crut);
StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_2.css", crut);
然后在cshtml中写@Styles.Render("~/ExtJS_CSS_neptune")就是neptune主题,换成@Styles.Render("~/ExtJS_CSS_triton")就是triton主题。

App_StartBundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace WebApplication1
{
  public class BundleConfig
  {
    // 有关绑定的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                  "~/Scripts/jquery-{version}.js"));

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                  "~/Scripts/jquery.validate*"));

      // 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
      // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                  "~/Scripts/modernizr-*"));

      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                "~/Scripts/bootstrap.js",
                "~/Scripts/respond.js"));

      bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/bootstrap.css",
                "~/Content/site.css"));

      //********自己的JavaScript************************
      ScriptBundle Ext_ScriptBL = new ScriptBundle("~/ExtJS");
      Ext_ScriptBL.Include("~/ExtJS60/ext-all.js");
      Ext_ScriptBL.Include("~/ExtJS60/classic/locale/locale-zh_CN.js");                 //中文资源

      ScriptBundle jquery_ScriptBL = new ScriptBundle("~/jquery");
      jquery_ScriptBL.Include("~/Scripts/jquery-2.1.4.min.js");

      Ext_ScriptBL.Transforms.Clear();
      bundles.Add(jquery_ScriptBL);
      bundles.Add(Ext_ScriptBL);

      CssRewriteUrlTransformWrapper crut = new CssRewriteUrlTransformWrapper();
      StyleBundle StyleBL = new StyleBundle("~/ExtJS_CSS_triton");
      StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_1.css", crut);
      StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_2.css", crut);

      StyleBundle StyleBL2 = new StyleBundle("~/ExtJS_CSS_neptune");
      StyleBL2.Include("~/ExtJS60/classic/theme-neptune/resources/theme-neptune-all_1.css", crut);
      StyleBL2.Include("~/ExtJS60/classic/theme-neptune/resources/theme-neptune-all_2.css", crut);

      StyleBundle StyleBL3 = new StyleBundle("~/ExtJS_CSS_gray");
      StyleBL3.Include("~/ExtJS60/classic/theme-gray/resources/theme-gray-all.css", crut);

      bundles.Add(StyleBL);
      bundles.Add(StyleBL2);
      bundles.Add(StyleBL3);
      //********自己的JavaScript END************************
    }
  }

  public class CssRewriteUrlTransformWrapper : IItemTransform
  {
    public string Process(string includedVirtualPath, string input)
    {
      return new CssRewriteUrlTransform().Process("~"   VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
    }
  }
}

Controllers目录右键→增加→调控器 →mvc5调节器 空。调控器名称ExtTest。扩展视图(不要布局页)

67677新澳门手机版 4

ViewsExtTestIndex.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
  @Styles.Render("~/ExtJS_CSS_neptune")
  @Scripts.Render("~/ExtJS")

  <script type="text/javascript">
    Ext.onReady(function ()
    {
      Ext.create('Ext.tab.Panel', {
        width: 450,
        height: 400,
        renderTo: document.body,
        items: [{
          title: '页面1',
        },
        {
          title: '页面2',
        }]
      });
      Ext.Msg.alert("Ready", "ExtJS就绪");
    });
  </script>
</head>
<body>
    <div> 
    </div>
</body>
</html>

运作看看效果:

67677新澳门手机版 5

本文由67677新澳门手机版发布于计算机编程,转载请注明出处:67677新澳门手机版Asp.net MVC5引用ExtJS6

关键词: