打开VS2010,在主菜单选择文件,新建,项目,在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板,然后选择“ASP.NET MVC 3 Web应用程序”,将项目名称修改为SimpleCMS,单击确定按钮后将显示如图2的窗口。
图1 新建项目窗口
图2 新建MVC 3项目
在图2窗口中,确保模版为空模板,视图引擎为Razor,最后单击确定按钮完成项目的创建。
创建项目后,首先要做的是在解决方案资源管理器中将解决方案Content和Scripts目录下的文件全部删除,然后在Content目录下创建一个Images目录,在Scripts目录下创建app和ExtJS两个目录。在app目录下,再创建controller、model、store和view这4个目录,分别用来存放项目中Ext JS的控制器、模型、Store和视图文件。再在ExtJS目录下创建一个ux目录,用来存放Ext JS的扩展组件。
管理系统将使用最新版本的Ext JS,也就是4.1.1版本,在Ext JS 4.1.1包中将bootstrap.js、ext-all.js和ext-all-dev.js(现在bootstrap.js在调试时加载的是该文件而不是ext-all-debug.js文件)这三个文件和resources目录复制到解决方案的ExtJS目录下。这里要注意,千万不要直接复制到项目的实际目录下,不然打包的时候,如果不进行额外设置,这些文件将不会包含在发布包里,因而最好的方式是在解决方案资源管理器中进行复制。
还要将local目录下的中文语言包ext-lang-zh_CN.js也复制到ExtJS目录下。如果项目要支持多语言,可以在ExtJS目录下创建一个local目录用来存放语言包,在这里不需要,因为直接复制到ExtJS目录就可以了。
最后,在Ext JS包目录内搜索s.gif文件,将其复制到Content目录下的Images目录。
最终结果将如图3所示。
图3 搭建Ext JS开发框架
Ext JS的框架已经搭建好了,现在需要测试一下ExtJS是否能正常使用,并顺便创建首页。在Controllers目录新建一个HomeController控制器,将会看到如下代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SimpleCMS.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}
在代码中的View上单击鼠标右键,在弹出菜单中选择添加视图,将看到如图4所示的窗口。
图4 为首页添加视图
将图中“使用布局或母版页”这个选项去掉,因为要实现的是单页面的应用程序,不需要布局或母版页,最后单击添加按钮,将看到如下的代码:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
将title中的Index修改为“CMS后台管理系统”,并在其下面添加页面编码说明及Ext JS样式和脚本的引用,代码如下:
<title>CMS后台管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="@Url.Content("Scripts/extjs/resources/css/ext-all.css")" />
<script type="text/javascript" src="@Url.Content("Scripts/extjs/bootstrap.js")"></script>
<script type="text/javascript" src="@Url.Content("Scripts/extjs/Ext-lang-zh_CN.js")"></script>
然后将body中的div删除,添加一个script块,在块内添加Ext.onReady函数块,代码如下:
<script>
Ext.onReady(function () {
})
</script>
在onReady函数内先添加空白图片的验证,这里要注意图片的目录,具体代码如下:
if (Ext.BLANK_IMAGE_URL.substr(0, 4) != "data") {
Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";
}
最后,调用Ext JS的alert显示一个提示信息,代码如下:
Ext.Msg.alert("提示信息", "你好!");
现在在主菜单选择调试,开始执行(不调试),或直接按Crrl+F5,在浏览器浏览项目,如果显示如图5所示提示信息,表示一切正常,可以进入具体开发了。不过,还有点小事情要解决,就是要将ext-all.css文件中,所有“11px”的修改为“12px”,不然字体太难看。
项目文件:http://download.csdn.net/detail/tianxiaode/4509623
分享到:
相关推荐
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(2)源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(1)
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(2) 源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(4) 源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据库文件
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之调整首页显示
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(3) 源代码
ext asp.net mvc nhibernate 完整项目示例
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...
extasp.net 是个不错的asp.net 源码,mvc+ext+三层架构
本资源为学习asp.net mvc+ext js的用户提供一个简单的增、删、改功能。通过此例子对MVC和Ext js有一个初步的认识,压缩包内的mvcStudent.sql为数据库脚本。
Ext.Direct.Mvc是ASP.NET Mvc.的Ext Direct服务器端堆栈的实现.zip
本源代码包来源于Ext.NET官方网站,于2012-07-24日发布,可以用Visual Studio 2010打开后进行编译,但需要先安装ASP.NET MVC3。此源代码包目前官网上已经没有下载了!目前官网的最新版本是2.1.1,但是有BUG。 本源...
可以快速上手开发企业的信息管理系统,也可提供oracle 11g版本框架非常适合二次开发人员使用, 强烈推荐一下,感兴趣的欢迎下载看看啊。 二、框架简介 1、数据持久层使用IBatis.Net ORM 映射框架, 提供了较为灵活...
程序结构是asp.net MVC,使用EXT3.1,从服务器端读取数据 运行前先建一个ext3.1的虚拟目录 说明:treegrid中数据的关系: RoleType表: RoleTyptID RoleTypeName 1 系统管理 2 管理员 Role表: RoleID ...
Quickly Build Rich AJAX Enabled Web Applications For ASP.NET Ext.NET is an open source ASP.NET (WebForm + MVC) component framework integrating the cross-browser Sencha Ext JS JavaScript Library
在ASP.NET mvc模式下使用Extjs搭建的框架页面代码