EEP2012 WEB 教學講義

87
EEP2012 EEP2012 WEB WEB 教教教教 教教教教 Andy Kao Andy Kao

description

EEP2012 WEB 教學講義. Andy Kao. 課程大綱 ( 一 ). 課程大綱 ( 二 ). EEP 基本慨念. EEP 架構. EEP Workflow Foundation. EEP2010 / EEP2012. VS2010 / 2012(C#,VB). jQuery. ASP.NET. WinForm. Base Class Library. CLR ( Common Language Runtime ). Web. Windows. EEP 概念. 精靈生產 — 速成 / 快速 極短程式 — 標準 / 維護 - PowerPoint PPT Presentation

Transcript of EEP2012 WEB 教學講義

EEP2012EEP2012WEBWEB教學講義教學講義

• Andy KaoAndy Kao

課程大綱課程大綱 (( 一一 ))

進度進度 課程內容課程內容 時間時間

第一日上午

EEP 慨念 & 設定Server(Model) 設計 70

* 下課休息 15

單檔 HTML 設計預設與檢驗 60

  中午休息12:00~13:1

5  

第一日下午

Wizard 單檔設計預設與檢驗 70

* 下課休息 15

多檔關連設計欄位類型設計 70

* 下課休息 10

查詢設計 50

課程大綱課程大綱 (( 二二 ))

進度進度 課程內容課程內容 時間時間

第二日上午

自動編號與序號過帳設計 70

* 下課休息 15

Server Method 設計 50

  中午休息12:00~13:15  

第二日下午

權限管理多國語言 70

* 下課休息 15

進階設計WEB 表單整合 80

* 下課休息 10

Web 系統發佈啟動專案 40

EEP EEP 基本慨念基本慨念

Windows

CLR (Common Language Runtime )

VS2010 / 2012(C#,VB)

EEP2010 / EEP2012

Base Class Library

Web

EEP Workflow Foundation

ASP.NET WinFormjQuery

EEPEEP 架構架構

精靈生產精靈生產——速成速成 // 快速快速極短程式極短程式——標準標準 // 維護維護元件化元件化— — 80/2080/20 法則法則多介面多介面— — 彈性彈性 // 親和親和N-Tier—N-Tier— 擴展擴展 // 管理管理

EEPEEP 概念概念

Windows ClientWindows Client

InternetInternet

IIS ServerIIS Server

InternetInternet

EEP EEP A/P ServerA/P Server

Database Database ServerServer

Server MethodServer MethodWorkflow Foundation

dlldll

dlldll

aspxaspx

Web ClientWeb Client

InternetInternetMobile

N-TierN-Tier 與與 SOASOA 架構架構

jQueryjQuery 架構與架構與MVCMVC

EEP jQueryEEP jQuery 特色特色架構在標準架構在標準 jQueryjQuery 之下之下 (v1.7(v1.7 以上以上 ))

類似類似 MVCMVC 開發模式,分離設計開發模式,分離設計內建包裝好 內建包裝好 EasyUIEasyUI 組件,不用重新開始組件,不用重新開始提供原生開發模式與元件模式提供原生開發模式與元件模式元件模式可以元件模式可以 WizardWizard 快速產生快速產生可自由調用可自由調用 C#C# 與後端的與後端的 Server MethodServer Method

支援支援 jQuery MobilejQuery Mobile 提供行動方案提供行動方案可整合可整合 EEP workflow EEP workflow 引擎引擎

jQueryjQuery 原生與元件共存原生與元件共存EEP保留開發者的原生開發方式

View 設計頁面View 設計頁面 Runtime 網頁Runtime 網頁

rr產生相對 JS

的 Code產生相對 JS

的 Code

產生相對的html

產生相對的html

Model(A/P Server)

Model(A/P Server)

WCF Remoting

InfoCommadInfoCommad

UpdateCompUpdateComp

Workflow Engine Workflow Engine

EEP jQuery 架構EEP jQuery 架構

產生相對 JS的 Code

產生相對 JS的 Code

RenderjQuery 元件jQuery 元件

開發者的 JS 與HTML

開發者的 JS 與HTML

Run

EEP EEP 基礎設定基礎設定

EEP2012EEP2012 安裝安裝SETUP EEP2012SETUP EEP2012

initEEP initEEP (InfoRemoteModule,Srvtools)(InfoRemoteModule,Srvtools)

OPEN Solution1.slnOPEN Solution1.sln

Export TemplateExport Template

EEPServer.EXE EEPServer.EXE

DB ManagerDB Manager

Create System TableCreate System Table

EEPEEP 資料字典資料字典

HTMLHTML 單檔設計單檔設計

單檔設計單檔設計

InfoCommandInfoCommand

Infolight.jsInfolight.jsUpdateCompUpdateComp

DatabaseDatabaseselect

dump

Insert/Update/Delete

Insert/Update/DeleteGet Columns

A/P ServerA/P ServerDB ServerDB Server

IIS ServerIIS Server

DataGrid

HTML

Binding

Binding

ServerServer 端開發端開發 (Model)(Model)

使用 EEP Server Wizard

(SBASIC.DLL)

選資料表 : Customers , Products

Employee , Region

掛接在 EEP Net Server 上

ServerServer 端元件端元件

InfoCommand

CommandText,CommandType

KeyFields,SelectPaging

SecStyle, SiteControl

UpdateComp

ExceptJoin, FieldAttr, ServerModify

Insert/Delete/Modify/Apply(Before/After)

以以 HTMLHTML 設計設計 jQueryjQuery

加入新項目 來自加入新項目 來自 JQSINGLE(JQSINGLE( 命名命名WCUSTOMERS)WCUSTOMERS)

設定設定 datagriddatagrid 中中 infolight-options:infolight-options: remoteName:'SBASIC.Customers',tableName:'Customers'

設定設定 theadthead<th data-options="field:'CustomerID',width:80,editor:'text'"> 客戶編號 </th>

<th data-options="field:'CompanyName',width:100,editor:'text'"> 客戶名稱 </th>

<th data-options="field:'ContactName',width:80,align:'right',editor:'text'"> 連絡人 </th>

<th data-options="field:'ContactTitle',width:80,align:'right',editor:'text'"> 職稱 </th>

<th data-options="field:'Address',width:250,editor:'text'"> 連絡地址 </th>

<th data-options="field:'City',width:80,align:'center',editor:'text'"> 城市 </th>

<th data-options="field:'Region',width:80,align:'center',editor:'text'"> 區域 </th>

<th data-options="field:'LastOrderedDate',width:80,editor:'text'"> 訂單日期 </th>

設定設定 EEPManagerEEPManager

以以 HTMLHTML 設計查詢設計查詢查詢欄位設定查詢欄位設定 , , 在在 query divquery div 中的中的 <table><table> 插入插入 ::

<tr><td> 客戶編號 :</td>

<td><input type="text" name="id" id="txt" infolight-options="field:'CustomerID',condition:'%',dataType:'string'"></td>

</tr><tr><td> 客戶名稱 :</td>

<td><input type="text" name="id" id="Text1" infolight-options="field:'CompanyName',condition:'%',dataType:'string'"></td>

</tr><tr><td> 連絡人 :</td>

<td><input type="text" name="id" id="Text2" infolight-options="field:'ContactName',condition:'%',dataType:'string'"></td>

</tr><tr><td> 訂單日期 :</td>

<td><input type="text" name="id" id="Text3" infolight-options="field:'LastOrderedDate',condition:'>=',dataType:'date'"></td>

<td> 至 </td>

<td><input type="text" name="id" id="Text4" infolight-options="field:'LastOrderedDate',condition:'<=',dataType:'date'"></td>

</tr>

editDialog (editDialog ( 開窗編輯開窗編輯 ))

設定設定 div dlg<table>div dlg<table> 中插入中插入 ::

<tr><td> 客戶編號 :</td><td><input class="easyui-validatebox" type="text" width="100" infolight-options="field:'CustomerID',form:'ff'" name="CustomerID" data-options="required:true"></input></td></tr>

<tr><td> 公司名稱 :</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'CompanyName',form:'ff'" name="CompanyName" ></input></td></tr>

<tr><td> 連絡人 :</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'ContactName',form:'ff'" name="ContactName"></input></td></tr>

<tr><td> 職稱 :</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'ContactTitle',form:'ff'" name="ContactTitle"></input></td></tr>

<tr><td> 地址 :</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'Address',form:'ff'" name="Address"></input></td></tr>

<tr><td> 城市 :</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'City',form:'ff'" name="City"></input></td></tr>

<tr><td> 區域 :</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'Region',form:'ff'" name="Region"></input></td></tr>

<tr><td> 建檔日期 :</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'LastOrderedDate',form:'ff'" name="LastOrderedDate"></input></td></tr>

開窗編輯的模式開窗編輯的模式設定設定 dlgdlg 中中 infolight-options:infolight-options:

remoteName:'SBASIC.Customers',tableName:'Customers' display:normal

(Dialog(Dialog 方式方式 )) 設定設定 datagriddatagrid 的的 infolight-optionsinfolight-options 加入加入 :: editDialog:'#dlg' ,editMode:'Dialog'

(Expand(Expand 方式方式 ):): editDialog:'#dlg' ,editMode:'Expand'

(Continue(Continue 方式方式 ):):

editDialog:'#dlg' ,editMode: 'Continue' class="easyui-dialog" 拿掉

(Switch(Switch 方式方式 ):): editDialog:'#dlg' ,editMode:'Switch' 設定 display:none

欄位預設的功能欄位預設的功能

加在加在 dlgdlg 的的 easyui-validatebox infolight-optionseasyui-validatebox infolight-options 中中 ::公司名稱 :

defaultValue:' 股份有限公司 '

建檔日期 :

defaultValue:'remote[_today]‘

加在加在 dlgdlg 的的 easyui-validateboxeasyui-validatebox 的的 data-optionsdata-options 中中 ::客戶編號 :

data-options="required:true"

聯絡人 :

data-options="required:true"

WizardWizard 單檔設計單檔設計

WizardWizard 單檔設計一單檔設計一

使用 EEP jQuery Wizard

選擇 jQuerySingle1 設計產品資料(WPRODUCT)

查詢設計查詢設計

DataGrid 中填入 Query 欄位使用 QueryAutoColumn 功能

WizardWizard 單檔設計二單檔設計二

使用 EEP jQuery Wizard

選擇 jQuerySingle2 設計員工資料 (WEMPLOYEE)

預設與檢核預設與檢核

DefaultDefault 元件處理元件處理

設定 JQDefault 元件到職日 (HireDate): _TODAY國家 (Country): 中華民國地址 (Address): DefaultMethod=getaddress (Client)

<script>

function getaddress() {

return ' 新北市 ';

}

</script>

JSJS 的的 DebugDebug

在 IE 中 , 按下 <F12>

選擇”指令碼”的”檢視原始檔”設定中斷點 , 按下”開始偵錯”

ValidateValidate 元件處理元件處理

設定 JQValidate 元件員工編號 (EmployeeID): CheckNull=True員工性名 (LastName): CheckNull=True城市 (City): CheckNull=True, RangeFrom: A, RangeTo: Z地址 (Address): CheckNull=True, CallMethod=validatecity (Remote)郵遞區號 (PostalCode): CheckNull=True, CallMethod=CheckPostal (Client)

重複檢查,在 dataForm 設定 : duplicateCheck:true

public bool validatecity(string value)

{ string str = value.Substring(0,3);

if (str == " 台北市 " || value == " 新北市 ") return true;

else return false; }

function CheckPostal(value) { if (value[0] >= '0' &&

value[0] <= '9') { return true; } else return false; }

RemoteRemote 端端 DebugDebug

在 IE 查看 WebDevServer 的 Port No.

在 VS 執行”偵錯 / 附加至程序”選擇 WebDev.WebServer 的 ASP.NET 程序設定中斷點 , 進入 Debug 模式。

DialogDialog 變換變換

Expand 模式

Continue 模式

Switch 模式

多檔關連設計多檔關連設計

多檔關連設計多檔關連設計

MasterMasterInfoCommandInfoCommand

Infolight.jsInfolight.js UpdateCompUpdateComp

DatabaseDatabase

DetailDetailInfoCommandInfoCommand

UpdateCompUpdateComp

InfoDataSourceInfoDataSource

select

dump

Insert/Update/Delete

Insert/Update/Delete

Insert/Update/Delete

A/P ServerA/P ServerDB ServerDB Server

Binding

IIS ServerIIS Server

Master DataGrid

Detail DataGrid

Relation

ServerServer 端多檔開發端多檔開發 (Model)(Model)

使用 EEP Server Wizard (SORDERS.DLL)

UpdateComp 定 ServerModifyGetMax=True

SORDER 掛接在 EEP Net Server 上

WizardWizard 多檔設計多檔設計

使用 EEP jQuery Wizard

選擇 jQueryMasterDetail1 設計訂單管理(WORDERS)

關連的顯示設定關連的顯示設定

設定 datagrid 中的 Columns

以 infoCombobox 來做為關聯設定 , 設定EditorOptions: RemoteName,ValueMember, DisplayMember

欄位組件類型欄位組件類型

欄位的欄位的 Control TypeControl Type

TextBox

ValidateBox

NumberBox

CheckBox

DateBox

PassWord

ComboBox

ComboGrid

RefVal

FileUpload

CheckBoxCheckBox 設計設計

Editor 設定為 CheckBox (WPRODUCT)

EditorOptions 設定 :on:1,off:0

支援欄位 : Bit(True/False), int(1/0), Char (Y/N)

顯示設定 : Format: L, 是 , 否

DateBoxDateBox 設計設計

Editor 設定為 DateBox (WORDERS)

支援欄位 : DateTime, Date, Varchar(8), Varchar(10)

顯示設定 : Format: yyyy.mm.dd, mm/dd/yyyy, YYY.mm.dd

DateBox 格式設定 : js\local\easyui-lang-zh_TW.js 中

if ($.fn.datebox){…$.fn.datebox.defaults.formatter = function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d);};

ComboxCombox 設計設計

Editor 設定為 CheckBox (WEMPLOYEE/ 區域 )

設定 Items 即可 ( 固定值 )

設定 EditorOptions: RemoteName,ValueMember,

DisplayMember

RefvalRefval 設計設計

設定 dataform 中的 Columns (WORDERS)

以 infoRefVal 來做為關聯設定

ColumnMatchColumnMatch 設定設定

Refval 設定 EditOptions

設定 ColumnMatch

ComboGridComboGrid 設定設定

設定 dataform 中的 Columns (WORDERS)

以 infoComboGrid 來做為關聯設定

ImageImage 的上傳的上傳

Columns Editor 設定為 infoFileUpload (WEMPLOYEE)

設定 Filter=jpg|png 及 UploadFolder=Folder:Files/Photos

ImageImage 的顯示的顯示

設定 Format 為 Image,Folder:Files/Photos,Height:60

貼入 JQImageContainer

設定 Height,Width,AutoSize

查詢設計查詢設計

查詢設計查詢設計

使用 EEP jQuery Wizard

選擇 jQueryQuery1 訂單查詢(WORDERQRY)

使用 NewLine 與 DefaultValue

加總與其他功能加總與其他功能

Total 設定 (sum/count/max/min/average)

Format: N2( 小數兩位 +’,’)

Frozen: True ( 凍結欄位 )

Sortable: True( 排序 )

Excel Excel 輸出輸出

datagrid 的 ToolItems 新增一 Icon

設定 Icon 為 icon-excel

OnClick 為 exportGrid

FormatFormat 設定設定

日期日期 : yyyy mm dd YYY . - /: yyyy mm dd YYY . - /

(yyyy.mm.dd mm/dd/yyyy)(yyyy.mm.dd mm/dd/yyyy)

數值數值 : Nn Cn: Nn Cn (C2, N3)(C2, N3)

邏輯邏輯 : L,x1,x2 (L,: L,x1,x2 (L, 是是 ,, 否否 ))

字串字串 : ?? X O (?OO???): ?? X O (?OO???)

其他其他 : Image, File, : Image, File,

(Image,Folder=Files,Height=60)(Image,Folder=Files,Height=60)

FormatScriptFormatScript 的處理的處理

設定 dataGrid 的 Columns.FormatScript 為colorValue

設計一個 colorValue 的 JS 程式 : <script type="text/javascript"> function colorValue(val, row) { if (val > 100) { return "<div style=\"color:Red\">" + val + "</div>"; } return val; } </script>

自動編號與序號自動編號與序號

IdentityIdentity 處理處理

Server 端 InfoCommand 設定ServerModifyGetMax=True

(SORDERS)

DataForm 的 ShowApplyButton=True (WORDERS)

DetailDetail 的的 AutoSeqAutoSeq

貼入 JQAutoSeq (WORDERS)

設定 BindingObjectID 為 dataGridDetail

設定 FieldName 為 Owner,NumDig 為 3

AutoNumberAutoNumber 元件元件

EEP Server Wizard (SPURCHASE.DLL)EEP Server Wizard (SPURCHASE.DLL)

貼入貼入 AutoNumber, AutoNumber, 設定設定 AutoID, UpdateComp, AutoID, UpdateComp, TargetColumn, GetFixed, NumDig, StartValue, StepTargetColumn, GetFixed, NumDig, StartValue, Step

EEP jQuery Wizard, Master/Details (WPURCHASE)EEP jQuery Wizard, Master/Details (WPURCHASE)

TransactionTransaction 設計設計

TransactionTransaction 原理原理

Trans Mode:AutoAppendExceptionIgnoreAlwaysAppend

InfoCommandInfoCommand

A/P ServerA/P Server

ClientClient

DatabaseDatabase

DB ServerDB Server

InfoDataSetInfoDataSet

select

Active UpdateCompUpdateComp

Apply

Insert/Delete/Update

Update (inc/dec/replace)

TransactionTransaction 的實例的實例

Master Master InfoCommandInfoCommand

A/P ServerA/P Server

ClientClient

DB ServerDB Server

MasterMasterCDSCDS

select

ActiveMasterMaster

UpdateCompUpdateComp

Apply

OrdersOrders

CustomersCustomers

Inc OrderedAmoutInc OrderedAmoutReplace Replace LastOrderedDateLastOrderedDate

Insert/Delete/Update

Order DetailsOrder Details

DetailDetailInfoCommandInfoCommand

select

DetailDetailCDSCDS

DetailDetailUpdateCompUpdateComp

Apply

Insert/Delete/Update

ProductsProductsInc UnitsOnOrderInc UnitsOnOrderReplace Replace LastOrderedPriceLastOrderedPrice

TransactionTransaction 設計設計

Orders Transaction : CustomersOrders Transaction : Customers

OrderDate Replace LastOrderedDate OrderDate Replace LastOrderedDate

Order Details Transaction: ProductsOrder Details Transaction: Products

UnitPrice Replace LastUnitPriceUnitPrice Replace LastUnitPrice

Quantity Inc UnitsOnOrderQuantity Inc UnitsOnOrder

Server MethodServer Method

設計設計

Server Method1……

Server Method2……

Server Method3……

Server Method4…..

Server MethodServer Method 原理原理

InfoCommandInfoCommand

A/P ServerA/P Server

BrowserBrowser

DatabaseDatabase

DB ServerDB Server

select

Call ServiceManagerServiceManager

Update

iiS ServeriiS Server

Aspx CodeAspx Code

Remote Call

JS Call

Server MethodServer Method 設計設計設計設計 Server Method: (SORDERS)Server Method: (SORDERS)

public object CallTest(object[] objParam)public object CallTest(object[] objParam) { string str = objParam[0].ToString();{ string str = objParam[0].ToString(); string sql= "select avg(UnitPrice) as AvgPrice from [Order Details] Where string sql= "select avg(UnitPrice) as AvgPrice from [Order Details] Where

ProductID=";ProductID="; sql = sql + str;sql = sql + str; DataSet Tmp = ExecuteSql("View_Orders", sql, "ERPS", true);DataSet Tmp = ExecuteSql("View_Orders", sql, "ERPS", true); string retval=Tmp.Tables[0].Rows[0]["AvgPrice"].ToString();string retval=Tmp.Tables[0].Rows[0]["AvgPrice"].ToString(); object ret;object ret; ret = new object[] { 0, retval};ret = new object[] { 0, retval}; return ret; return ret; }}

定義定義 ServiceManagerServiceManager 設定 設定 ServiceName(ServiceName( 服務名稱服務名稱 ) , DelegateName() , DelegateName( 實際名稱實際名稱 ))

ClientClient 調用設計調用設計

貼入貼入 HTML Button (WORDERS)HTML Button (WORDERS) <input id="Button1" type="button" value="Call Method" onclick="serverMethod()"/><input id="Button1" type="button" value="Call Method" onclick="serverMethod()"/>

DataGridDataGrid 中設定中設定 ToolItemsToolItems增加一個增加一個 Icon, OnClick="serverMethod" Text="Average Price"Icon, OnClick="serverMethod" Text="Average Price"

ClientClient 調用設計調用設計Client script:Client script:

<script> function serverMethod() { var row = $('#dataGridDetail').datagrid('getSelected'); $.ajax({ type: "POST", url: '../handler/jqDataHandle.ashx?RemoteName=SORDERS.Orders', data: "mode=method&method=" + "CallTest" + "&parameters=" + row.ProductID, cache: false, async: true, success: function (data) { alert(data); } }); } </script>

ServerServer 端端 DebugDebug

在 VS 執行”偵錯 / 附加至程序”選擇 EEP NetServer.EXE 程序設定中斷點 , 進入 Debug 模式。

權限管理權限管理

權限級別權限級別Login (Users/AD)

Menus (By Users/Groups)

JQSecurity

JQSecurityColumn

InfoCommand.SecStyle

動態權限

JQSecurityJQSecurity 設計設計

貼入 JQSecurity (WORDERS)

設定 Alias, MenuID

執行” Export”, “Add All” 存檔即可以 EEPManager 來設定

( 工程師 , 主檔次檔都無法新增 / 更改 )

JQSecurityColumnJQSecurityColumn 設設計計

貼入 JQSecurityColumn (WORDERS)

設定 BindingObjectID,Columns (Master/Detail各貼一個 , 設定 Ship 開頭的欄位 )

重新設定 JQSecurity, 並執行” Export”

以 EEPManager 來設定 ( 工程師 , 無法顯示及更改 )

RowRow 權限設計權限設計

設定 Server 端 InfoCommand.SecStyle

(SBASIC.Customers)

SecStyle: User,Group,Role,Org,OrgShare

設定 SecFieldName (ServiceRole)

重 Build Server 端 DLL

動態權限控管動態權限控管

<script> function CheckOrderStatus(rowData) { if (rowData.OrderStatus == 'Y' || rowData.OrderStatus == '') { return false; } return true; } </script>

多國語言多國語言

多國語言設計多國語言設計

貼入 JQMultiLanguage (WEMPLOYEE)

設定 Active,Alias,GroupIndex

執行 Edit, 將語言訊息存入 XML 中 ( 訊息可存於 XML 語 DB 當中 )

貼入 Button, Click 中 : protected void Button1_Click(object sender, EventArgs e) { JQMultiLanguage1.GroupIndex = JQClientTools.LanguageGroups.English; JQMultiLanguage1.SetLanguage(false); JQScriptManager1.Locale = "en"; }

進階設計進階設計

多級選單多級選單

WEMPLOYEE 的國家 (Combo) 過濾城市(ComboGrid)

國家 Combo 設定 OnSelect 設定 FilterCountry function FilterCountry(val) { var obj = $("[comboname='City'].info-combogrid", "#dataFormMaster"); obj.combogrid('setWhere', "Country = '" + val.Country + "'"); }

改善更改直接選縣市的問題$(document).ready(function () { $("#dataFormMaster").form({ onLoadSuccess: function () { var obj = $("[comboname='Country'].info-

combobox", "#dataFormMaster"); var val = obj.combobox('getValue'); obj = $("[comboname='City'].info-combogrid",

"#dataFormMaster"); obj.combogrid('setWhere', "Country = '" + val +

"'"); } }); });

多頁簽設計多頁簽設計

貼入 easyui-tabs 的語法 (WORDERS) <div id="Div1" class="easyui-tabs" style="width: 700px; height: 360px;"> <div style="padding: 20px; " title=" 明細資料 ">Tab1</div> <div style="overflow: auto; padding: 20px; " title=" 單筆編輯 ">Tab2</div></div>

貼入 DataGrid 或 DataForm

自定自定 DataFormDataForm

貼入 JQDialog (WORDERS)

設定 DataGrid(Details) 的 EditDailogID

貼入 JQDataForm

設定 JQDataForm 的 RemoteName,TableName

執行 Refresh Schema

設定 Columns ( 補充 ProductID 的 Refval)

設定 ParentObjectID,RelationColumns

設定 JQDailog 的 BindingObjectID,EditMode

整合整合 WebWebASP .NetASP .Net 表單表單

WEBWEB 單檔設計單檔設計

加入 EEPWebClient 網站EEP Web Client Wizard (WSingle3) (WCUSTOMERS2)

調整 UpdatePanel 的內容設定 EEPManager

在在 jQueryjQuery 執行執行WEBWEB 表表單單

設定 EEPWebClient 網站 Web.Config/ <system.web>

<webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices>

設定 JQWebClient 網站 Web.Config/ <appSettings> <appSettings> <add key="EEPWebClient" value="http://localhost:1552/EEPWebClient"/> </appSettings>

注意 InitEEP 中 WebClient Directory 的設定

WEBWEB系統發佈系統發佈

Web Web 系統發佈系統發佈

安裝 IIS 7.0 與 ASP.NET 4.0

IIS 後安裝時請執行 : C:\Windows\Microsoft.NET\Framework\v4.0.30319> aspnet_regiis -i

建立一個發佈目錄 ( 如 C:\EEPTEST)

打開 IIS 檢查”應用程式集”內 ASP.NET 的版本改變 IIS 上 ISAPI 與 CGI 的 ASP.NET 4.0 設定為允許在”站台”中新增”應用程式” , 設定到虛擬目錄上在 VS 上執行 Publish WebSite

重新設定 InitEEP 的 WebClient Directory

啟動專案啟動專案

產生新方案產生新方案

執行 Wizard Create Solution

設定 Solution Name, 選擇 JQuery

Q & AQ & A