mvc5引用ExtJS6

摘要：VisualStuio2015 asp.net mvc如何引用ExtJS6，使用BundleConfig。

首先下载ExtJS6.0 gpl版。ExtJS有自己的程序框架，但我们需要asp.net mvc5，ExtJS只用作界面库。

接下来要把下载好的ExtJS6的核心部分抽取出来，目录结构是这样的：

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

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

2、删除调试用的文件。这个目录里有许多*debug.js、*debug.scss文件，删除之。用Everything

这样一处理就剩下40多M了。可以直接使用我处理好的 http://pan.baidu.com/s/1qYMtE0W 密码: 1q14。

接下来就是利用@Scripts.Render和@Styles.Render引用ExtJS。MVC提供了BundleConfig.cs文件用于增加js脚本和css样式，View视图统一调用，还能对js和css进行压缩。

\App_Start\BundleConfig.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。增加视图（不要布局页）

\Views\ExtTest\Index.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>

运行看看效果：

 
 
标签: ExtJS

mvc5引用ExtJS6的更多相关文章

  1. Asp.net MVC5引用ExtJS6

    摘要:VisualStuio2015 asp.net mvc如何引用ExtJS6,使用BundleConfig. 首先下载ExtJS6.0 gpl版.ExtJS有自己的程序框架,但我们需要asp.ne ...

  2. Asp.Net MVC简单三层架构（MVC5+EF6）

    三层架构与MVC的关系 三层架构是一个分层式的软件体系架构设计,分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).分层的目的是为了实现“高内聚,低耦合”的思想,有利于系统后期的维护.更 ...

  3. 第一个asp.net MVC5+ExtJS6入门案例项目

    最近在学习asp.net MVC,结合前段时间学习的ExtJS,做了一个入门示例.不过还有一个json日期显示的问题没有解决. [思路] 1.先搭建一个asp.net MVC项目. 2.将MVC项目的 ...

  4. VS2013新建MVC5项目，使用nuget更新项目引用后发生Newtonsoft.Json引用冲突的解决办法

    错误信息如下: 错误    3    类型“Newtonsoft.Json.JsonPropertyAttribute”同时存在于“c:\Program Files (x86)\Microsoft V ...

  5. 探索ASP.NET MVC5系列之~~~2.视图篇（上）---包含XSS防御和异步分部视图的处理

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  6. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  7. VS2013中的MVC5模板部署到mono上的艰辛历程

    部署环境:CentOS7 + Mono 3.10 + Jexus 5.6 在Xamarin.Studio创建的asp.net项目,部署过程非常顺利,没有遇到什么问题:但在VS2013中创建的asp.n ...

  8. MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN

    在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章.本文会涉及到Claims-based(基于声明)的认证,我们会详细 ...

  9. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

随机推荐

  1. C# 类型转换 Dictionary转Model类

    /// <summary> /// 把Model转换为DataRow /// </summary> /// <typeparam name="T"&g ...

  2. 码农谷 求前N项之和

    题目描述 有一分数序列:2/1.3/2.5/3.8/5.13/8.21/13.......求出这个数列的前N项之和,保留两位小数. 输入描述 N 输出描述 数列前N项和 样例 输入: 输出: 16.4 ...

  3. Python之路【第五篇】：面向对象及相关

    Python之路[第五篇]:面向对象及相关   面向对象基础 基础内容介绍详见一下两篇博文: 面向对象初级篇 面向对象进阶篇 其他相关 一.isinstance(obj, cls) 检查是否obj是否 ...

  4. VMware下安装的Mac OS X如何修改显示分辨率

    VMware下安装的Mac OS X如何修改显示分辨率   我在Win7下利用VMware安装了苹果的Mac OS,安装成功启动后,发现分辨率为1920*1080,而宿机的分辨率是1366*768,我 ...

  5. Objective-C基本数据类型、表达式和语句

    一.基本数据类型 1.一般的计算机语言在定义变量的时候,需要提供给两个内容:类型和名字. 比如:int myClassID; 2.在Xcode中,无论你使用的是GCC编译器还是LLVM编译器,如果我们 ...

  6. 关于软件开发中兼容win7注册表的解决方案

    关于软件开发中兼容win7注册表的解决方案   编写人:CC阿爸 2014-3-14 l  近来在开发一winform程序时,发现在xp 系统访问注册表一切正常.可偏这个时候,微软又提醒大家.Xp今年 ...

  7. Lua 练习中的Bug 以及日志

    使用 Lua 中的table.getn获得数组的table的长度:运行失败-- > t ={1,2,3 } > print(table.getn(t)) stdin:1: attempt ...

  8. 清理sql2000查询分析器登录名记录

    注册表 HKEY_CURRENT_USER/Software/Microsoft/Microsoft  SQL  Server/80/Tools/Client/PrefServers

  9. WinSock编程基础

    一.套接字模式   1.阻塞模式       创建套接字时,默认是阻塞模式,对recv函数调用会使程序进入等待状态,知道接收到数据才返回.   2.非阻塞模式:      可以调用ioctlsocke ...

  10. 记录C++学习历程

    从今天开始学习C++,将学习中遇到的问题,以及解决方案记录在这个博客里. 函数 1.C++函数声明(原型) 函数原型跟函数的定义在返回值类型,函数名,参数上必须完全一致. 2.程序的内存区域:全局数据 ...