第7章EEP2019Ajax設計第7章EEP2019Ajax設計\7-2 Ajax多檔設計

7-2 Ajax多檔設計

Step1>        這個例子我們來看看如何開發一個Ajax的讀多檔畫面,前面的步驟同單檔的設計,在選擇產生位置的地方,我們選擇Add To Exist FolderAjax

Step2>        Template我們選擇WMasterDetail5,並將它命名為WMasterDetail,然後選擇Next

Step3>        Server端請使用sWizard002.Orders來做一個訂單的多檔設計

Step4>        View來設定Master顯示的欄位用於放置在Grid上顯示。

Step5>        接著選擇master中需要進行編輯的欄位,這裡請注意,若CusomterIDEmployeeID有設定controlTypeRefVal,那麽請同時設定RefValNo.

Step6>        最後添加Detail的編輯欄位,並且點擊Done來完成Wizard的設定。

Step7>        下面看到的就是我們使用Wizard設計的畫面。在Wizard產生完成后,我們還需要對畫面進行一些修改。請修改前重啓這個畫面或VS。接著將MasterGrid放入UpdatePanel1中。

Step8>        接著將編輯MasterFormView以及detailGrid放入到ajaxModalPanel1中。用於點擊masterGrid的編輯、新增以及瀏覽時,資料會以浮出畫面的形式顯示。

Step9>        由於Master的資料編輯是在AjaxModalPanel1中,因此需要將MasterWebDefaultWebValidate放入到AjaxModalPanel1中。

Step10>     對於Detail而言,它在點擊Grid上的新增和編輯時,我們也希望能夠以一個浮出新對話框的形式顯示。因此將DetailFormViewWebDefault以及WebValidate拖入AjaxModalPanel2中。這樣我們就完成了多檔的開發。

Step11>     接下來,我們在EEPManager中設定Menu的選項並設定查看權限。

現在通過ie打開這個畫面,在點擊Grid的瀏覽和編輯按鈕時,畫面會以浮出框顯示出masterDetail

Top of Page