在gridview链接按钮上打开ajax modelpopup [英] open a ajax modelpopup on gridview link button

问题描述

我想在 GridView上打开 ModalPopup LinkBut​​ton ，但是当我给 LinkBut​​ton ID 到 targetcontrolid 弹出，它不接受。



请帮帮我。

I am trying to open a ModalPopup on GridView LinkButton, but when I am giving LinkButton ID to targetcontrolid of pop up, it is not accepting.

Please help me.

<asp:GridView ID="grdView" runat="server" AutoGenerateColumns="False" CellPadding="0"

            ForeColor="#333333" GridLines="None" onrowdatabound="grdView_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Dr. Photo">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" Style="height: 80px; width: 100px;" ImageUrl='<%#  String.Format("~/Upload/Docters/" + Eval("ImgName")) %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150px" >
        <ItemStyle Width="150px"></ItemStyle>
        </asp:BoundField>
        
        <asp:BoundField DataField="Qualification" HeaderText="Qualification"

            ItemStyle-Width="50px" >
        <ItemStyle Width="50px"></ItemStyle>
        </asp:BoundField>
        <asp:TemplateField HeaderText="Click to Contact">
        <ItemTemplate>
        <asp:LinkButton ID="popup" runat="server" Text="Click to Contact"></asp:LinkButton>
        </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<ajaxToolKit:ModalPopupExtender id="ModalPopupExtender1" runat="server"

    cancelcontrolid="btncancel" okcontrolid="btnSend"

    targetcontrolid="Button1" popupcontrolid="Panel1"

    popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG">
</ajaxToolKit:ModalPopupExtender

推荐答案

推荐

GridView中的ModalPopUpExtender [ ^ ]。



解决方案

根据上述文章中的代码，你的 ModalPopUp 应该是......

Refer
ModalPopUpExtender In GridView[^].

Solution
According to the codes in above article, your ModalPopUp should be like...

<AjaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" 

                                runat="server"

                                TargetControlID="Button1"

                                PopupControlID="Panel1"

                                PopupDragHandleControlId="PopupHeader"

                                BackgroundCssClass="ModalPopupBG"

                                OkControlID="btnSend"

                                CancelControlId="btncancel"

                                Drag="true">
</AjaxToolkit:ModalPopupExtender>

此处无需指定 LinkBut​​ton 。



将 OnClick 事件附加到 LinkBut​​ton 。

Here there is no need to specify the LinkButton.

Attach an OnClick Event to LinkButton.

<asp:LinkButton ID="popup" runat="server" Text="Click to Contact" OnClick="popup_Click"></asp:LinkButton>

在代码背后定义事件就像...

Define that Event on Code Behind like...

protected void popup_Click(object sender, EventArgs e)
{
    // Other Codes.

    // Show ModalPopUpExtender.
    ModalPopupExtender1.Show();
}

首先，按下div标签中的按钮，如下所示。

First, take a button in a div tag as shown below.

<div style="visibility:hidden">
<asp:Button id="btnSample" runat="server"/>
</div>

现在在gridview中我们使用Commandfields来显示Edit，Update取消按钮

Now in the gridview we use the Commandfields to display the Edit,Update cancel button

<asp:CommandField ButtonType="Button" ShowEditButton="true" ShowCancelButton="true"

                       EditText="Select" UpdateText="Update" CancelText="Cancel" HeaderText="Confirm">
                       <HeaderStyle Font-Size="Smaller" Font-Bold="true" HorizontalAlign="Left" Width="45%" />
                       <ItemStyle Font-Size="Smaller" HorizontalAlign="Left" Width="45%" />
                   </asp:CommandField>

接下来，我们将MPE的targetcontrolid指定为div中隐藏的按钮标签。

Next, we assign the targetcontrolid of MPE equal to the button hidden in div tag.

<ajax:ModalPopupExtender ID="MPEAward" runat="server" TargetControlID="btnSample" PopupControlID="pnlSave"

    BackgroundCssClass="modalBackground" DropShadow="true" CancelControlID="btnCancel"

    Drag="true">
</ajax:ModalPopupExtender>

在后面的代码中



In gridview rowdatabound，我们发现gridview中存在Update按钮并调用javascript ShowPopUp（）

In the code behind

In gridview rowdatabound, we find the Update button present in gridview and invoke a javascript ShowPopUp()

if (e.Row.RowType == DataControlRowType.DataRow)
           {
               if ((e.Row.RowState & DataControlRowState.Edit) > 0)
               {
                   Button btnUpdate = (Button)e.Row.Cells[6].Controls[0];
 
                   btnUpdate.OnClientClick = "return ShowPopup();";
 

               }
           }

在Javascript中，
$ b $b

In Javascript,

function ShowPopup() {

(' #<%= btnSample.ClientID %>').click();
return false ;
}

('#<%= btnSample.ClientID %>').click(); return false; }

Finally, the page needs to return false in the javascript so as to make the modalpopup present on the page.

Finally, the page needs to return false in the javascript so as to make the modalpopup present on the page.

这篇关于在gridview链接按钮上打开ajax modelpopup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！