全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

Asp.net mvc5引用ExtJS6【全网首发】

0 182

摘要:VisualStuio2015 asp.net mvc如何引用ExtJS6,使用BundleConfig。

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

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

image

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

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

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

image

这样一处理就剩下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。增加视图(不要布局页)

image

\Views\ExtTest\Index.cshtml

@{
    Layout = null;
}




    
    Index
  @Styles.Render("~/ExtJS_CSS_neptune")
  @Scripts.Render("~/ExtJS")

  


    

运行看看效果:

image

热忱回答0

  • 加入年费大会员(20每年)
  • 热门标签

    猜你喜欢

    1. 如何在.Net中使用MongoDB
    2. [水煮 ASP.NET Web API2 方法论](3-8)怎样给指定路由配置处理器
    3. 在.NET项目中使用PostSharp,使用MemoryCache实现缓存的处理(转)
    4. asp.net core mvc剖析:处理管道构建
    5. 总结ASP.NET MVC Web Application中将数据显示到View中的几种方式
    6. ABP文档 - 对象与对象之间的映射
    7. Asp.net mvc 知多少(三)
    8. .Net面试葵花宝典
    9. ASP.NET Aries 入门开发教程5:自定义列表页工具栏区
    10. 免费开源的DotNet二维码操作组件ThoughtWorks.QRCode(.NET组件介绍之四)

    衣食父母

    最近热帖

    1. PHP中的函数声明与使用 3
    2. 各种同步控制工具的使用 8
    3. 读源码—Iterator接口和LIstIterator接口 7
    4. 欧几里得算法求最大公约数的数学原理 7
    5. ELK菜鸟手记 (四) - 利用filebeat和不同端口把不同服务器上的log4j日志传输到同一台ELK服务器 7
    6. C# 特性(Attribute) 7
    7. python爬虫从入门到放弃(三)之 Urllib库的基本使用 7
    8. 每天一道Java题[10] 7
    9. 《算法4》2.1 - 选择排序算法(Selection Sort), Python实现 7
    10. IIS无法启动,应用程序池自动关闭,应用程序池XXXX将被自动禁用 解决方案之一 7

    随机文章

    1. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
    2. SSH整合
    3. QCustomplot使用分享(一) 能做什么事
    4. Android开发6:Service的使用(简单音乐播放器的实现)
    5. ubuntu安装qq