章立民研究室

問題：

老師您好，請問書中8-152 ( 8-17 ModalPopup ) 中有提到"如需要回傳(postback)，請允許「確認」與「取消」按鈕可以進行回傳，以便網頁重新呈現(Re-render)"。該怎麼做ㄋㄟ?? 我希望按下確認按鈕可以將資料寫入資料庫並顯示結果使用者填完資料後按下送出，會彈出ModalPopup說明一些注意事項，ModalPopup上有確認和取消鍵，若按下確認，就將使用者所填的資料寫入資料庫，並非將ModalPopup上資料寫到資料庫上。

解答：

圖表1

圖表2

圖表3

圖表1、2、3所示者是網頁範例執行的畫面，它示範如何在GridView控制項中修改資料之後，按下「更新」按鈕來顯示「強制回應彈出方塊」以便讓使用者確認是否要儲存已修改之資料。如果要放棄修改的資料，請按下「取消」按鈕來關閉這個強制回應對話方塊；如果要將所修改的資料寫回後端資料庫，請按下「確認」按鈕來讓Button控制項進行回傳（Postback），以便執行伺服器端程式碼來將資料寫回資料庫，並在GridView控制項左下方顯示「已經成功更新資料... 」的訊息。

這個網頁範例的設計重點如下所示：

r  如圖表4所示，請於編輯項目樣板（EditItemTemplate）中，指定觸發與扮演「強制回應彈出式方塊」的控制項，然後如下所示，替ModualPopipExtender擴充器設定相關屬性。請特別注意，不需要替ModualPopipExtender擴充器指定觸發關閉該擴充器的控制項，也就是說，無須指定OkControlID與OnOkScript屬性，以便當按下「確認」按鈕時，不會執行JavaScript，而是進行回傳並執行「確認」按鈕的Click事件處理常式之伺服器端程式碼：

   <asp:LinkButton ID="LinkButton1" runat="server"
  CausesValidation="True"
  CommandName="Update" Text="更新"></asp:LinkButton>

<asp:Panel ID="panConfirmtion" runat="server"
  CssClass="cssModalPopup"
  Style="display: none">
  <div class="modalPopup-text">
    您確定要存檔嗎？<br /><br />
    <asp:Button ID="btnOK" runat="server" Text="確認"
      OnClick="btnOK_Click" />&nbsp;&nbsp;
    <asp:Button ID="btnCancel" runat="server" Text="取消" />
  </div>
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1"
  runat="server" TargetControlID="LinkButton1"
  PopupControlID="panConfirmtion"
  BackgroundCssClass="cssModalBackground"
  DropShadow="true"
  CancelControlID="btnCancel">
</ajaxToolkit:ModalPopupExtender> 

 

 

 

圖表4

 

 

r   替「確認」按鈕的Click事件處理常式撰寫下列程式碼：

Protected Sub btnOK_Click(ByVal sender As Object, _
  ByVal e As System.EventArgs)
  Me.GridView1.UpdateRow(GridView1.EditIndex, True)
End Sub

 

 

r  替GridView的RowUpdated事件處理常式撰寫下列程式碼，以便判斷是否已經成功更新資料：

Protected Sub GridView1_RowUpdated(ByVal sender As Object, _
  ByVal e As _
  System.Web.UI.WebControls.GridViewUpdatedEventArgs) _
  Handles GridView1.RowUpdated
  If (e.Exception IsNot Nothing OrElse e.AffectedRows <= 0) Then
    lblMessage.Text = _
      "因為資料格式錯誤或其他原因，無法更新資料..."
    e.ExceptionHandled = True
  Else
    lblMessage.Text = "已經成功更新資料..."
  End If
End Sub

 

 

由於您需要於按下「確認」按鈕時，可以將資料寫入資料庫並顯示結果，我們會建議改用JavaScript的confirm函式也可以達到您所需的功能，如下所示即是一例：

    CommandName="Update" Text="更新"
  OnClientClick="return confirm('您確定要更新此筆資料嗎？');">


亦或是您也可以使用「確認按鈕擴充器」（ConfirmButtonExtender）。

 

 

章立民研究室 2007/6/8