ExtAspNet控件库快速上手（一）

hongqiang

浏览: 117998 次

最近访客更多访客>>

轩辕邵宇

danjiewu

Memory_2014

zhts148

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-08 ( 43)
2012-07 ( 17)
2012-06 ( 11)
更多存档...

博客分类：

.NET

.NET

今天试用了一下ExtAspNet控件库，感觉不错，打算接下来几天好好看一下，同时也打算试着写一下相关教程和大家分享，欢饮拍砖！

关于ExtAspNet以下是它的官方说明：

-----------------------------------------------------------------------------------------

基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有原生的 AJAX 支持和华丽的 UI 效果。

ExtAspNet的使命
创建没有 JavaScript，没有 CSS，没有 UpdatePanel，没有 ViewState，没有 WebServices 的网站应用程序。
支持的浏览器
IE 7.0+、Firefox 3.6+、Chrome 3.0+、Opera 10.5+、Safari 3.0+
授权协议
Apache License 2.0 (Apache)
相关链接
论坛：http://bbs.extasp.net/
示例：http://demo.extasp.net/
文档：http://doc.extasp.net/
下载：http://extaspnet.codeplex.com/
博客：http://sanshi.cnblogs.com/

-----------------------------------------------------------------------------------------

我个人是冲着它宣传没有JavaScript去的，而实际上多多少少还是需要写一点JS才能达到事半功倍的效果，另外个人觉得它对IE浏览器支持不是特别好，跑起来比较吃力，Chrome还好一点！其实关于它的使用三生石上的有一系列的教程，同时它带的demo也演示了各种控件的用法，我在这里只讲一些他们没有讲到而新手又很容易犯错的知识点，这一篇我打算讲讲这个控件库引用及使用过程要注意的一些地方。

第一步、当然是下载这个控件库，下载地址：http://extaspnet.codeplex.com/releases/view/90072 我这里最新版是v3.1.8.2，有三个包ExtAspNet_v3.1.8.2_dll_only、ExtAspNet_v3.1.8_source_all和ExtAspNet_v3.1.8.1_demo，看名字也能辨别第一个包仅有封装好的dll，第二个是源码，第三个是demo，别的可以没有，第三个一定要有，这个demo很强大，后期控件看这个就知道怎用了，不管怎样在这里我们要获取的是ExtAspNet.dll（别忘了还有一个同名的xml文件）。

第二步、我们还需要准备一个Newtonsoft.Json.dll（别忘了还有一个同名的xml文件），在上面那个demo中有一个.Net 2.0的，当然你也可以去http://json.codeplex.com/releases/view/92198 下载Json.NET的source + binary，目前版本是 4.5 Release 8，另外也可以用VS的NuGet来下载，不管你怎获得Newtonsoft.Json.dll你必须清楚Newtonsoft.Json.dll为在每个DotNet下都有自己的版本，比如你的项目是基于.Net 2.0的，就要引用json.net\Net20\Newtonsoft.Json.dll，如果你的项目是基于.Net 4.0的，就要引用json.net\Net40\Newtonsoft.Json.dl。

第三步、引用ExtAspNet，为了方便控件使用，我们把它加到工具箱里去，步骤如下：在VS工具箱里右键菜单->添加选项卡->输入选项卡名字，如”ExtAspNet“，然后展开新建的选项卡右键->选择项->浏览，找到ExtAspNet.dll打开，就会发现工具箱多出了一堆控件，把这些控件拽到窗体上就可以用了。

第四步、在项目中引用Newtonsoft.Json.dll。

第五步、配置Web.config，在这里我先不多说，它的demo里也有介绍，我贴出我的Web.config：

<?xml version="1.0"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细消息，请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <configSections>
    <section name="ExtAspNet" type="ExtAspNet.ConfigSection, ExtAspNet" requirePermission="false"/>
  </configSections>
  <!-- 可用的配置项（这里列的都是默认值）: Language="zh_CN" AjaxTimeout="60" EnableAjax="true" Theme="blue" FormMessageTarget="qtip" FormOffsetRight="20" FormLabelWidth="100" FormLabelSeparator="：" IconBasePath="~/icon" EnableAjaxLoading="true" AjaxLoadingType="default" CustomTheme="" CustomThemeBasePath="~/theme" -->
  <ExtAspNet EnableBigFont="true" DebugMode="false" />
  <appSettings/>
  <connectionStrings/>
  <system.web>
    <!-- Net3.5以上的项目，一定要为pages节点加上这两个属性：controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID" -->
    <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
      <controls>
        <add assembly="ExtAspNet" namespace="ExtAspNet" tagPrefix="ext"/>
      </controls>
    </pages>
    <httpModules>
      <add name="ExtAspNetScriptModule" type="ExtAspNet.ScriptModule, ExtAspNet"/>
    </httpModules>
    <httpHandlers>
      <add verb="GET" path="res.axd" type="ExtAspNet.ResourceHandler, ExtAspNet"/>
    </httpHandlers>
    <customErrors mode="Off"/>
    <compilation debug="true"/>
  </system.web>
  <!-- IIS7 Integrated Mode
    <system.webServer>
        <modules>
			<add name="ExtAspNetScriptModule" type="ExtAspNet.ScriptModule, ExtAspNet"/>
        </modules>
		<httpHandlers>
            <add verb="GET" path="res.axd" type="ExtAspNet.ResourceHandler, ExtAspNet"/>
			<add verb=”Get” path=”WebResource.axd” type=”System.Web.Handlers.AssemblyResourceLoader” />
        </httpHandlers>
        <httpErrors errorMode="Detailed"/>
        <asp scriptErrorSentToBrowser="true"/>
    </system.webServer>
    -->
</configuration>

第六步、在页面中添加一个PageManager（每个页面必须有一个PageManager，类似ScriptManager）和一个Button，直接从工具箱拽进去就行：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ExtExamples1.WebForm1" %>

<%@ Register Assembly="ExtAspNet" Namespace="ExtAspNet" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:PageManager ID="PageManager1" runat="server" />
    <ext:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click">
    </ext:Button>
    </form>
</body>
</html>

第七步、编写后台Button1_Click事件：

        protected void Button1_Click(object sender, EventArgs e)
        {
            ExtAspNet.Alert.Show("你好 ExtAspNet！", MessageBoxIcon.Warning);
        }

最后调试运行，不出错的话，点击页面上的Button就会弹出一个对话框！注意这是AJAX的哦，至此ExtAspNet控件库引用使用就算成功了！