2013-05-21 37 views
2

我需要顯示一個AjaxControlToolkit ModalPopupExtender控件,當用戶選中/取消選中GridView內的CheckBox控件作爲TemplateField時。ASP.NET如何從CheckBox顯示AjaxControlToolkit模式彈出框

- 更新於24/05/2013

在這裏看到最終的解決方案......

我們終於解決了這個問題。所以我決定在這裏發佈完整的解決方案和最終的代碼。

GridView控件

<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true" 
OnPageIndexChanging="gvDocs_PageIndexChanging" 
OnSorting="gvDocs_Sorting" 
OnRowDataBound="gvDocs_RowDataBound"> 
<AlternatingRowStyle CssClass="grid_row_alternate"/> 
<HeaderStyle CssClass="grid_header" /> 
<RowStyle CssClass="grid_row" /> 
<SelectedRowStyle CssClass="grid_row_selected" /> 
<Columns> 
    <asp:BoundField DataField="ID"/> 
    <asp:BoundField DataField="COLUMN_A" SortExpression="COLUMN_A" HeaderText="COLUMN_A" /> 
    <asp:BoundField DataField="COLUMN_B" SortExpression="COLUMN_B" HeaderText="COLUMN_B" /> 

    <!-- TemplateField with the CheckBox and the ModalPopupExtender controls --> 

    <asp:TemplateField HeaderText="Check" SortExpression="CHECK_COLUMN"> 
     <ItemStyle HorizontalAlign="Center"/> 
     <ItemTemplate> 
      <asp:CheckBox ID="CheckBox1" runat="server"/> 

      <!-- Modal Popup block --> 

      <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" DropShadow="True" TargetControlID="CheckBox1" PopupControlID="panModalPopup" CancelControlID="CancelButton"/> 
      <asp:Panel ID="panModalPopup" runat="server" style="display:none; text-align:left; width:400px; background-color:White; border-width:2px; border-color:#40A040; border-style:solid; padding:10px;"> 
       Are you sure? 
       <br /><br /> 
       <div style="text-align:right;"> 
        <asp:Button ID="ConfirmButton" runat="server" Text="Confirm" OnClick="ConfirmButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>'/> 
        <asp:Button ID="CancelButton" runat="server" Text="Cancel"/> 
       </div> 
      </asp:Panel> 
     </ItemTemplate> 
    </asp:TemplateField> 
</Columns> 

背後

protected void gvDocs_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType.Equals(DataControlRowType.DataRow)) 
    { 
     // Setting the CheckBox check reading the state from DB 
     CheckBox CheckBox1 = (CheckBox)e.Row.FindControl("CheckBox1"); 
     CheckBox1.Checked = DataBinder.Eval(e.Row.DataItem, "CHECK_COLUMN").ToString() == "Y"; // Or any other value that works like true/false 
    } 
} 

protected void ConfirmButton_Click(object sender, EventArgs e) 
{ 
    string id = ((Button)sender).CommandArgument; // Get the ID column value 

    // Update the CHECK_COLUMN value on the DB or do whatever you want with the ID... 

    BindData(); // Method that do the GridView DataBind after the changes applied to the DB 
} 

有些事情的代碼知道

1)ModalPopupExtender1控件位於GridView的TemplateField中,因爲它需要訪問CheckBox1及其單擊事件。這可能不是有史以來最好的解決方案,但它有效,所以如果你的GridView不是太複雜並且是分頁的,它不會影響性能。

2)爲了趕上ConfirmButton點擊事件,你必須從ModalPopupExtender控制設置中刪除OKControlID屬性。

- END

- 更新於22/05/2013

然後我所需要的相應行的ID,以使對數據庫的更新。

- END

這是在GridView

<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true" 
OnPageIndexChanging="gvDocs_PageIndexChanging" 
OnSorting="gvDocs_Sorting" 
OnRowDataBound="gvDocs_RowDataBound"> 
<AlternatingRowStyle CssClass="grid_row_alternate"/> 
<HeaderStyle CssClass="grid_header" /> 
<RowStyle CssClass="grid_row" /> 
<SelectedRowStyle CssClass="grid_row_selected" /> 
<Columns> 
    <asp:BoundField DataField="ID_DOCUMENTO" Visible="False"/> 
    <asp:BoundField DataField="NUM_PROT" SortExpression="NUM_PROT" HeaderText="N. Prot." /> 
    <asp:BoundField DataField="DATE_PROT" SortExpression="DATE_PROT" HeaderText="Data Prot." /> 

    ... some other BoundFields ... 

    <asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE"> 
     <ItemStyle HorizontalAlign="Center"/> 
     <ItemTemplate> 
      <asp:CheckBox ID="chkArchiviare" runat="server" AutoPostBack="True" OnCheckedChanged="chkArchiviare_CheckedChanged"/> 
     </ItemTemplate> 
    </asp:TemplateField> 
</Columns> 

這是ModalPopup塊

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 
</asp:ToolkitScriptManager> 

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="panModalPopup" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" /> 

<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;"> 
    Are you sure? 
    <br /><br /> 
    <div style="text-align:right;"> 
     <asp:Button ID="btnConferma" runat="server" Text="Conferma" OnClick="btnConferma_Click"/> 
     <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" /> 
    </div> 
</asp:Panel> 

現在,我想在每次選中/取消選中複選框時顯示ModalPopup,並且該彈出窗口必須顯示帶有2個按鈕的確認消息:確認並取消。 確認必須對數據庫進行更新,然後回發。 取消只能隱藏彈出而不回發。

我知道ModalPopupExtender偵聽OnClick事件。所以,我是否需要一個Button,LinkBut​​ton,ImageButton等,或者我可以做我想做的事情?

回答

4

你是對的,它聽onclick事件,但客戶端的,所以,擴展器的目標控制可以是任何你可以點擊,甚至一個div或標籤。

+0

噢,真好!我會試一試!謝謝! –

+0

我把'TargetControlID =「chkArchiviare」'這是我在GridView上的CheckBox控件的名稱,但我得到AjaxControlToolkit的運行時錯誤,它說:「ModalPopupExtender1的TargetControlID無效。無法找到ID = chkArchiviare的控件」 。有任何想法嗎? –

+0

你需要把modalpopup和panel放到gridview項目模板中,我確定 – AGuyCalledGerald

0

嘗試從chkArchiviare_CheckedChanged事件顯示/隱藏ModalPopupExtender1像這樣。

ModalPopupExtender1.show(); 

ModalPopupExtender1.hide(); 

採取一個隱藏按鈕,使作爲的TargetControlID這樣。

<asp:HiddenField ID="btnHiddenDtl1" runat="Server" /> 
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" /> 

您無需調用取消按鈕點擊事件來隱藏ModalPopupExtender1

+0

我做到了,但每當彈出窗口顯示它「凍結」,所以甚至如果我點擊取消按鈕,它不會隱藏。我做了一個'Cancel_Click(object sender,EventArgs e)'事件,我調用了'ModalPopupExtender1.hide();'。 –

+0

在您的ModalPopupExtender1標記中放置CancelControlID =「取消按鈕名稱」屬性。它會自動關閉你的ModalPopupExtender1。 – SanketS

+0

正如你在代碼塊上面看到的那樣,有'CancelControlID =「btnAnnulla」'這是按鈕控件的名稱,但它不起作用。 –

0

你不需要在你的GridView中包含ModalPopup Extender。您可以在模板領域的GridView控件綁定複選框控制,並在其中使用OnCheckedChanged財產......所以模板會像下面

<asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE"> 
    <ItemStyle HorizontalAlign="Center"/> 
    <ItemTemplate> 
     <asp:CheckBox ID="chkArchiviare" runat="server" 
      OnCheckedChanged="chkArchiviare_CheckedChanged"/> 
    </ItemTemplate> 
</asp:TemplateField> 

這一點,你必須呼籲顯示功能後chkArchiviare_CheckedChanged事件......像此

ModalPopupExtender1.Show(); 

此處ModalPopupExtender1是您的ModalPopupExtender控件的ID。

還有一件事你必須記住使用.aspx頁面上的一個按鈕。並通過這個按鈕ID爲ModalPopupExtender的TargetControlID喜歡這張

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" 
     TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup" 
     OkControlID="btnConferma" CancelControlID="btnAnnulla" /> 

<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; 
     background-color:White; border-width:2px; border-color:Black; border- 
     style:solid; padding:20px;"> Are you sure?<br /><br /> 
    <div style="text-align:right;"> 
    <asp:Button ID="btnConferma" runat="server" Text="Conferma" 
     OnClick="btnConferma_Click"/> 
    <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" 
     OnClick="btnAnnulla_Click" /> 
    </div> 
</asp:Panel> 

這裏爲什麼蔭使用這個按鈕?......有沒有用這個按鈕的,因爲我們使用的代碼隱藏顯示()...但是如果我們不通過按鈕Id到ModapPopupExtender TargetControlId屬性。它會給你一個錯誤。

因此,以這種方式使用ModalPopupExtender ...您可以將它與LinkBut​​ton,Label,Button一起使用。爲了更詳細地舉例來說,你可以查看以下鏈接....

How to Use ModalPopup Extender into GridView

我希望這篇文章能清除所有的疑慮....享受,並與他人分享這...謝謝!