当前位置: 代码迷 >> ASP >> ExtAspNet控件库快速下手(一)
  详细解决方案

ExtAspNet控件库快速下手(一)

热度:98   发布时间:2012-08-28 12:37:01.0
ExtAspNet控件库快速上手(一)

今天试用了一下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控件库引用使用就算成功了!