本文章是由機器翻譯。

RIA 架構

建置資料中心的 Web 應用程式使用 ASP。NET MVC 和 Ext JS

阿爾卡洛斯一 Olamendy

下載程式碼範例

豐富的網際網路應用程式 (RIA) 結合桌面應用程式的可用性與 Web 為基礎的部署和修訂的彈性。有兩個索引鍵的方式建置 Ria。首先，是瀏覽器外掛? 式裝載執行環境，例如 Flash、 Java 還是在 Silverlight。第二，有 JavaScript 架構延伸程式庫，如 Dojo、 Ext JS、 jQuery，MooTools、 原型和 YUI。各方式皆有其優點與缺點。

JavaScript 程式庫是建置 Ria 因為 JavaScript 的所有主要瀏覽器支援，而且不需要安裝外掛程式或執行階段環境的熱門選擇。我已經與另一個程式庫所提到的實驗 — Ext JS — 但我已經發現它會使一個有趣的選擇實作的 Web 應用程式。是容易實作，已詳細制訂，，與 Selenium 相容的測試。「 Ext 」 JS 也提供預先定義的控制項，可簡化建立 Web 應用程式的 UI。

不幸的是，大部分的 「 ext 」 JS 範例說明 PHP、 Python 與 (並列文字) 對伺服器端的滑軌程式碼。但這並不表示使用 Microsoft 技術的開發人員無法利用 Ext JS。雖然很難 (受限於封裝 Web 要求-回應性質，以提供可設定狀態控制項為基礎的模型的抽象層) 的 Web Form 開發與整合 Ext JS，您可以使用 ASP。NET MVC framework，讓您可以運用這兩種 Microsoft。NET Framework 和在相同的應用程式中的 「 ext 」 JS。

在本文中我將提供我找不到，逐步解說開發的真實世界 Web 方案使用 ASP 教學課程。NET MVC 和 Ext JS 讀取和寫入到後端資料庫。

「 Ext 」 JS 表單基本概念

若要使用 「 ext 」 JS，您必須先從 sencha.com.(我使用版本 3.2.1，但您應該擷取的最新版本)。請注意 「 ext 」 JS 免費，開放原始碼版本可供開放原始碼專案、 非營利機構及教育性使用。讓其他人使用您可能需要購買授權。請參閱 sencha.com/products/license.php 如需詳細資訊。

在您的檔案系統中解壓縮到一個目錄下載。它包含所有您需要開發 Web 方案，尤其是使用 「 ext 」 JS，主要檔案 「 ext 」 all.js。(有是也可以協助您更輕鬆地尋找錯誤偵錯版本)。相依性、 文件和範例程式碼會包含所有的下載中。

專案所需的資料夾是 \adapters 和 \resources。介面卡] 資料夾可讓其他程式庫與 「 ext 」 JS 一起使用。[資源] 資料夾包含這類的 CSS 及影像的相依性。

若要正確地使用 「 ext 」 JS，您也必須在您的網頁中包含三個金鑰檔參考：

ext-3.2.1/adapter/ext/ext-base.js
ext-3.2.1/ext-all.js
ext-3.2.1/resources/css/ext-all.css

「 Ext 」 base.js 檔案中包含 「 ext 」 JS 的核心功能。 Widget 定義包含在 「 ext 」-all.js，並且 「 ext 」 all.css 包含 widget 的樣式表。

讓我們開始使用靜態 HTML 網頁中的 「 ext 」 JS 說明基本概念。 下列幾行包含於頁面的標題區段中，連結所需的檔案，若要成功地發展 (也包括了從 「 ext 」 JS 下載一些範例 widget JavaScript 模組) Ext JS 解決方案：

<link rel="stylesheet" type="text/css" 
  href="ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" language="javascript" 
  src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript" 
  src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" language="javascript" 
  src="extjs-example.js"></script>

主體中的檔案，我要插入的 div 項目呈現主要 Ext JS 表單：

<div id="frame">
</div>

Extjs example.js 檔會提供一些見解如何建構 Ext JS 應用程式。 任何 「 ext 」 JS 應用程式範本使用分機 ns、 Ext.BLANK_IMAGE_URL 和 Ext.onReady 陳述式：

Ext.ns('formextjs.tutorial');
Ext.BLANK_IMAGE_URL = 'ext-3.2.1/resources/images/default/s.gif';
formextjs.tutorial.FormTutorial = {
  ...
}
Ext.onReady(formextjs.tutorial.FormTutorial.init, 
  formextjs.tutorial.FormTutorial);

分機 ns 陳述式可讓您以邏輯方式組織您的程式碼在命名空間，以避免命名衝突，並設定問題的範圍。

Ext.BLANK_IMAGE_URL 陳述式是很重要的呈現 widget。 它具有稱為空格字元圖像 (透明 1 x 1 像素影像)，主要是用來產生同樣的空白區域以放置圖示和分隔符號。

Ext.onReady 陳述式是第一種方法來定義 「 ext 」 JS 程式碼。 一旦該 DOM 是完全載入，保證您可能會參考每個 HTML 項目時，使用指令碼來執行，會自動呼叫這個方法。 如果是 extjs-example.js，以下是指令碼本身：

formextjs.tutorial.FormTutorial = {
  init: function () {
    this.form = new Ext.FormPanel({
      title: 'Getting started form',
      renderTo: 'frame',
      width: 400,
      url: 'remoteurl',
      defaults: { xtype: 'textfield' },
      bodyStyle: 'padding: 10px',
      html: 'This form is empty!'
    });
  }
}

Ext.FormPanel 建立做為欄位的容器類別的執行個體。 RenderTo 屬性指向 div 項目會呈現表單。 [預設值] 屬性會指定預設元件類型表單上。 「 Url 」 屬性指定的 URI 來傳送表單的要求。 最後，html 屬性會指定 (以任何 HTML 格式) 的文字做為預設輸出。

若要新增欄位，您需要的項目屬性以取代 html 屬性：

items: [ nameTextField, ageNumberField ]

若要新增的前兩個項目是一個文字欄位和數字] 欄位：

var nameTextField = new Ext.form.TextField({
  fieldLabel: 'Name',
  emptyText: 'Please, enter a name',
  name: 'name'
});
var ageNumberField = new Ext.form.NumberField({
  fieldLabel: 'Age',
  value: '25',
  name: 'age'
});

必要的屬性為： (若要設定的描述性訊息伴隨的表單的元件) 的 fieldLabel 屬性和名稱屬性來設定要求參數的名稱)。 EmptyText 屬性定義的欄位會包含空白時的浮水印文字。 控制項的預設值為 [值] 屬性。

若要宣告控制項的另一個方法是即時：

items: [
  { fieldLabel: 'Name', emptyText: 'Please, enter a name', name: 'name' },
  { xtype: 'numberfield', fieldLabel: 'Age', value: '25', name: 'age' }
]

如您所見，[名稱] 欄位為您沒有指定的型別，因為它來自表單的預設屬性。

我會將一些額外的項目新增到表單中，最後看像 圖 1。

圖 1已完成的表單

截至目前為止，您建立用於 Ext JS 從使用者取得資料的表單。現在，我們將資料傳送到伺服器。您要新增按鈕來送出的過程，並顯示結果給使用者，如所示 圖 2。

圖 2表單按鈕

buttons: [{
  text: 'Save', 
  handler: function () {
    form.getForm().submit({
      success: function (form, action) {
        Ext.Msg.alert('Success', 'ok');
      },
      failure: function (form, action) {
        Ext.Msg.alert('Failure', action.result.error);
      }
    });
  }
},
{
  text: 'Reset',
  handler: function () {
    form.getForm().reset();
  }
}]

[按鈕] 屬性可讓表單，以管理所有可能的動作。每個按鈕的名稱和處理常式的屬性。這個處理常式屬性包含在按鈕上執行的動作相關聯的邏輯。在這種情況下，有兩個按鈕的名稱是儲存，重設。儲存檔案] 按鈕處理常式會在表單上執行送出動作，並顯示訊息，指出成功或失敗。重設] 按鈕處理常式會重設表單上的欄位值。

最後一個，但重要 — 表單建立步驟，是驗證。若要指定必要的欄位，我們需要將 allowBlank 屬性設定為 false 而 blankText 屬性設定為必要的驗證失敗時顯示錯誤訊息。例如，以下是表單的 [名稱] 欄位：

{ fieldLabel: 'Name', emptyText: 'Please, enter a name', name: 'name', allowBlank: false }

當您執行應用程式，並按 [儲存] 按鈕，而不在 [名稱] 和 [年齡] 欄位中輸入任何資料時，然後您會收到錯誤訊息，並需要的欄位會以紅色底線。

若要自訂的錯誤訊息的欄位，新增下列各行程式正下方的 Ext.onReady 函式的程式碼：

Ext.QuickTips.init();

現在，當使用者將滑鼠指標置於此欄位，就會顯示一個球形文字說明顯示錯誤訊息。

我要設定幾個驗證規則的欄位，如指定允許的最小和最大長度、 延遲等到表單提交、 欄位驗證和建立驗證函式的 Url、 電子郵件地址，與其他類型的資料。 您可以看到這項驗證程式碼下載中的詳細資料。

建置 Web 應用程式

現在，讓我們來開發 Web 方案使用 Ext JS 和 ASP。NET MVC。 我使用 ASP。NET MVC 2，但本解決方案應該是不適用於 ASP。NET MVC 3 也。 我將地址的案例在人力資源管理系統中加入員工。

新增員工使用案例描述如下所示：畫面會提示使用者輸入有效的資訊，例如員工識別項、 完整名稱、 地址、 年齡、 薪資和部門的新員工。 [部門] 欄位是一份可供選擇的部門。

主要的實作策略是在用戶端上建立 「 ext 」 JS 表單 — 如您所見，然後再處理使用 ASP 的資料。NET MVC。 保存層將使用 LINQ，來代表商業項目，並將資料保存至資料庫系統。 Microsoft SQL Server 2008 為後端資料庫。

請先開啟 Visual Studio 2010 並使用 ASP 建立新的專案。NET MVC 2 Web 應用程式範本。

接下來，建立資料庫結構描述。 例如，結構描述將會包含兩個實體： 員工和部門。 圖 3 示範如何建立人力資源資料庫以及基礎資料表與條件約束。

圖 3 人力資源資料庫的建立

create table department(
  deptno varchar(20) primary key,
  deptname varchar(50) not null,
  location varchar(50)
);
create unique index undx_department_deptname on department(deptname);
insert into department
  values('HQ-200','Headquarter-NY','New York');
insert into department
  values('HR-200','Human Resources-NY','New York');
insert into department
  values('OP-200','Operations-NY','New York');
insert into department
  values('SL-200','Sales-NY','New York');
insert into department
  values('HR-300','Human Resources-MD','Maryland');
insert into department
  values('OP-300','Operations-MD','Maryland');
insert into department
  values('SL-300','Sales-MD','Maryland');
create table employee(
  empno varchar(20) primary key,
  fullname varchar(50) not null,
  address varchar(120),
  age int,
  salary numeric(8,2) not null,
  deptno varchar(20) not null,
  constraint fk_employee_department_belong_rltn foreign key(deptno)
    references department(deptno)
);
create unique index undx_employee_fullname on employee(fullname);

現在讓我們使用 LINQ to SQL 定義的實體和保存性機制的結構。 請先建立 EmployeeRepository 類別來管理員工資料表的資料存取邏輯。 在這種情況下，您只需要實作建立作業：

public class EmployeeRepository {
  private HumanResourcesDataContext _ctxHumanResources = 
    new HumanResourcesDataContext();
  public void Create(employee employee) {
    this._ctxHumanResources.employees.InsertOnSubmit(employee);
    this._ctxHumanResources.SubmitChanges();
  }
}

您也需要 DepartmentRepository 類別以管理部門資料表的資料存取邏輯。 同樣地，在此簡單的情況下您只需要實作讀取的作業中，以找出的部門清單：

public class DepartmentRepository {
  private HumanResourcesDataContext _ctxHumanResources = 
    new HumanResourcesDataContext();
  public IQueryable<department> FindAll() {
    return from dept in this._ctxHumanResources.departments
           orderby dept.deptname
           select dept;
  }
}

現在讓我們先定義另一個重要的部分架構： 控制站。. 若要定義一個控制器，在 [方案總管] 視窗中的 [控制站] 資料夾上按一下滑鼠右鍵，然後選取 [新增 |控制站。 我可以使用 HumanResourcesController 做為控制站名稱。

「 Ext 」 JS 展示層

現在讓我們回到 「 ext 」 JS，若要建置的應用程式的展示層使用架構。 對於此解決方案，您只需要匯入 「 ext 」 all.js 和 \adapter 和 \resources 資料夾。

移至 Site.Master 頁面以及將參考加入至在標頭項目，以及 < asp: ContentPlaceHolder > Ext JS 檔案標記項目為自訂的 JavaScript 和 CSS 程式碼，為每個頁面的容器中所示 圖 4。

圖 4 Site.Master

    <head runat="server">
      <title><asp:ContentPlaceHolder ID="TitleContent" 
        runat="server" /></title>
      <link href="../../Content/Site.css" rel="stylesheet" 
        type="text/css" />
      <!-- Include the Ext JS framework -->
      <link href="<%= Url.Content("~/Scripts/ext-3.2.1/resources/css/ext-all.css") %>" 
        rel="stylesheet" type="text/css" />
      <script type="text/javascript" 
        src="<%= Url.Content("~/Scripts/ext-3.2.1/adapter/ext/ext-base.js") %>">
      </script>
      <script type="text/javascript" 
        src="<%= Url.Content("~/Scripts/ext-3.2.1/ext-all.js") %>">
      </script>    
      <!-- Placeholder for custom JS and CSS and JS files 
        for each page -->
      <asp:ContentPlaceHolder ID="Scripts" runat="server" />
    </head>

現在讓我們將新增 MVC 架構的其他重要的部分： 檢視。. 檢視會顯示表單，以取得一個員工與相關的資料。 移至 HumanResourcesController 索引動作方法上按一下滑鼠右鍵，選取新增檢視畫面。 按一下 [新增檢視畫面] 對話方塊中的 [新增] 按鈕。

若要實作本文稍早建立的 「 ext 」 JS 表單，您需要將 JavaScript 檔案加入至指令碼目錄，並在檢視此 JavaScript 檔案的參考。 然後包含 employee_form.js 檔案的參考，並將 div 項目新增至 [Index.aspx] 檢視 (請參閱 圖 5)。

圖 5新增員工] 表單

    <%@ Page Title="" Language="C#" 
      MasterPageFile="~/Views/Shared/Site.Master" 
      Inherits="System.Web.Mvc.ViewPage" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" 
      runat="server">
    Index
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" 
      runat="server">
      <h2>Add a New Employee</h2>
      <div id="employeeform"></div>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="Scripts" 
      runat="server">
      <script type="text/javascript" 
        src="<%= Url.Content("~/Scripts/employee_form.js") %>">
      </script>
    </asp:Content>

移至 employee_form.js 檔案，然後加入一些程式碼以設定 ExtJS 表單和其基礎 widget。 第一個步驟是定義要取得的部門清單的 Ext.data.JsonStore 類別的執行個體：

var departmentStore = new Ext.data.JsonStore({
  url: 'humanresources/departments',
  root: 'departments',
  fields: ['deptno', 'deptname']
});

「 Url 」 屬性會指向 HumanResourceController 控制站上的 [部門] 動作方法。 這個方法被透過 HTTP POST 動詞命令。 Root 屬性是的部門清單的根項目。 [欄位] 屬性指定資料欄位。 現在定義表單。 屬性是表示其含義：

var form = new Ext.FormPanel({
  title: 'Add Employee Form',
  renderTo: 'employeeform',
  width: 400,
  url: 'humanresources/addemployee',
  defaults: { xtype: 'textfield' },
  bodyStyle: 'padding: 10px',

在這種情況下，「 url 」 屬性會指向 HumanResourceController 控制站上的 AddEmployee 動作方法。 這個方法也會使用 HTTP POST 存取。

項目] 屬性提供 widget 代表的表單欄位的清單 (圖 6)。 這裡預設 widget 是文字欄位 (這預設值] 屬性中指定)。 第一個欄位是員工數字，而且是必要項 (由 allowBlank 屬性所指定)。 第二個欄位是完整名稱，這也是必要的文字欄位。 [位址] 欄位是選擇性的文字區域。 年齡欄位是選擇性的數字欄位。 [薪資] 欄位是必要的數字欄位。 而最後，部門數字欄位則是識別字串，其中已選取 [從清單中的部門。

圖 6表單欄位 Widget

items: [
  { fieldLabel: 'Employee ID', name: 'empno', allowBlank: false },
  { fieldLabel: 'Fullname', name: 'fullname', allowBlank: false },
  { xtype: 'textarea', fieldLabel: 'Address', name: 'address', 
    multiline: true },
  { xtype: 'numberfield', fieldLabel: 'Age', name: 'age' },
  { xtype: 'numberfield', fieldLabel: 'Salary', name: 'salary', 
    allowBlank: false },
  { xtype: 'combo', fieldLabel: 'Department', name: 'deptno', 
    store: departmentStore, hiddenName: 'deptno', 
    displayField: 'deptname', valueField: 'deptno', typeAhead: true,
    mode: 'remote', forceSelection: true, triggerAction: 'all', 
    emptyText: 'Please, select a department...', editable: false }
],

最後，[按鈕] 屬性被定義來處理表單的動作。 這就像是設定 圖 2，但是 text 屬性具有值時 [新增]。

現在 employee_form.js 檔案已完成。 (我已糊大部分的的檔案中的項目。 請參閱下載適用於列出此檔案的完整原始程式碼的程式碼)。

現在讓我們請到 HumanResourceController，實作對應的動作方法，如所示 圖 7。

圖 7 HumanResourceController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HumanResources_ExtJS_ASPNETMVC.Models;
namespace HumanResources_ExtJSASPNETMVC.Models.BusinessObjects {
  public class HumanResourcesController : Controller {
    DepartmentRepository _repoDepartment = new DepartmentRepository();
    EmployeeRepository _repoEmployee = new EmployeeRepository();
    // GET: /HumanResources/
    public ActionResult Index() {
      return View();
    }
    // POST: /HumanResource/Departments
    [HttpPost]
    public ActionResult Departments() {
      var arrDepartment = this._repoDepartment.FindAll();
      var results = (new {
        departments = arrDepartment
      });
      return Json(results);
    }
    // POST: /HumanResource/AddEmployee
    [HttpPost]
    public ActionResult AddEmployee(employee employee) {
      string strResponse = String.Empty;
      try {
        this._repoEmployee.Create(employee);
        strResponse = "{success: true}";
      }
      catch {
        strResponse = "{success: false, error: \"An error occurred\"}";
      }
      return Content(strResponse);
    }
  }
}

就大功告成啦 ！

現在執行方案。您會看到所顯示的 Web 網頁 圖 8。在表單中輸入一些資料，然後按一下 [新增]。您會看到確認訊息方塊。您也會看到在資料庫的 dbo.employee 表格中插入的資料列。

圖 8 執行應用程式

這是真的所有還有要建立簡單 RIA。取決於您想要運用的功能，類似應用程式無法建立與任何其他受歡迎的 JavaScript 架構時仍採用 ASP。NET MVC。很容易，可以替代 Entity Framework 資料] 圖層，使用 Windows Azure 存放裝置] 或 [SQL Azure 轉換為後端資料存放區。這些簡單的建置組塊請建置基本資料中心 RIA 快速又簡單。

Juan Carlos Olamendy 是高階架構設計人員、 開發人員和顧問。.他已辨認為 Microsoft 最有價值專家 (MVP) 和 Oracle ACE 數次。他是在 Windows 通訊基礎 Microsoft 認證技術專家。 您可以連絡在 Olamendy johnx_olam@fastmail.

多虧了要對下列技術專家，來檢閱這份文件：Scott Hanselman 和 Eilon Lipton