1. 程式人生 > >ExtAspNet控制元件庫快速上手(一)

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控制元件庫引用使用就算成功了!