Ryan的blog

DOMWindow 的Jquery套件，

可以提供像facebook 的照片顯示，將照片show在作用網頁上，感覺像一層薄膜，

而不影響本身作用頁面view的呈現，

因此在工作，常需要show一個視窗來跟讓使用者輸入一些資料，

讓該頁面的運作流程繼續進行!

舉例:

頁面中Gridview資料來源是產品資料檔，點選每筆資料的某個控制項，show出DomWindow，

輸入完產品備註，更新此筆資料...

html 部分:

選告一個div區塊 設置style="display:none"，來放要Show的視窗內容

<div id="Error" class="ErrDiv" style="display:none" >
    <asp:TextBox ID="txtNote" runat="server" 

class="txtNote"></asp:TextBox>
    <asp:HiddenField ID="hidPK" runat="server" />
    <asp:Button ID="btnYes" runat="server" Text="確定"

 class="OkBtn"   onclick="btnYes_Click"/>
    <asp:Button ID="Button3" class="closeDOMWindow" 

runat="server" Text="取消" />
 </div>

上面的hidPK 的隱藏欄位，用來放置每筆產品資料的PK，

也可用Session來取代，由讀者自行決定如何實作內容。

GridView的部分，只專注在設置觸發的控制項

 <asp:Button ID="btnModify" runat="server"  

CommandArgument="<%# Container.DataItemIndex %>"
CommandName="Modify" Text="update" />

javascript 部分:

<script src="../Scripts/jquery.js" type="text/javascript"></script>

<script src="../jquery.DOMWindow.js" type="text/javascript"></script>

<script  type="text/javascript">
            function ShowError() {
                $.openDOMWindow({
                     modal :1,
                    overlay : 1, 
                    overlayColor : '#A9A9A9',
                    draggable: 1,
                    overlayOpacity:60 ,
                    height : 200,
                    loader: 1,
                    loaderImagePath: 'animationProcessing.gif',
                    loaderHeight: 16,
                    loaderWidth: 17,
                    windowSourceID: '.ErrDiv',
                    borderColor: '#828282'
                });
            }
        </script>

宣告一個function ，主要動作就是show DOMWindow! 

C# Code部分:

protected void GridView1_RowCommand(object sender, 

GridViewCommandEventArgs e)

    {

        if (e.CommandName == "Modify")

        {

            int rowIndex = Convert.ToInt32(e.CommandArgument);

            hidPK.Value = GridView1.DataKeys[rowIndex].Value.ToString();

            txtNote.Text = GridView1.Rows[rowIndex].Cells[3].Text;

            string js = "";

           js = "ShowError();";

          ScriptManager.RegisterStartupScript(this,

 this.GetType(), "er", js, true);

        }

    }

//秀出視窗的確認按鈕Click事件

    protected void btnYes_Click(object sender, EventArgs e)
    {
        CSqlHelp help = new CSqlHelp();
        string pk = hidPK.Value;
        string value = txtNote .Text;
        string Sql =

 " Update TProduct Set fNote='"+value+"' Where  FProductID= '"+pk+"'";
        try
        {
            int i = help.Modify(Sql);
            if (i > 0)
            {
                GridView1.DataBind();
            }
        }
        catch (Exception ex)
        {
            CWebMsg.MsgBox(ex.Message,this);
        }
    }

以上配置好後，測試實作的結果，

遇到按下btnYes按鈕，沒有跑到後製程式碼區塊內的狀況，

觀看DOMWimdow.js的內容

  //add DOMwindow
 $('body').append('<div id="DOMWindow"  .....省略

原來預設是在將要秀出的內容append到本頁面的body，

而不是放在有宣告runat="server" 的form 標籤內，

導致btnYes的作用失效，

所以筆者索性把body 都改為form

再試著測試一次，果然如配置的方式來運行!

DOMWindow的相關參數的設置，請參考以下網頁

http://www.dotcoo.com/post-71.html

http://w3937.pixnet.net/blog/post/91152224

以上提供參考.....