Question

我知道这已被多次询问过，但在阅读了SO和其他网站的最佳时间后，我仍然无法解决我的问题。我试过玩Viewstate，！IsPostback，Page_Load和Page_Init都无济于事。

我有一个转发器，它返回一个记录列表，每个记录还显示两个asp按钮。这些按钮显示Ajax modalpopupextender。没有发生的是Repeater ItemCommand没有被调用，所以我无法在文本框中显示正确的信息。

我已经放置了Ajax modalpopupextender这是正确的吗？如果不是我需要做什么才能让它发挥作用。

转发器控制

<div class="container">
<h2>Current Groups</h2>
<asp:Repeater ID="rptGroups" runat="server" OnItemCommand="rptGroups_ItemCommand" EnableViewState="false">
    <HeaderTemplate>
        <table class="table table-striped table-bordered">
            <tr>
                <td>GroupID</td>
                <td>Group Name</td>
                <td>Group Description</td>
                <td></td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <%# DataBinder.Eval(Container.DataItem,"GroupID") %>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem,"GroupName") %>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem,"GroupDescription") %>
            </td>
            <td>
                <asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" CommandName="Edit" CommandArgument='<%#Eval("GroupID") %>' OnClick="btnEdit_Click" OnClientClick="return false" UseSubmitBehavior="false"  />
                <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger" Text="Delete" CommandName="Delete" CommandArgument='<%#Eval("GroupID") %>' OnClick="btnDelete_Click" OnClientClick="return false" UseSubmitBehavior="false" />
                <ajaxToolkit:ModalPopupExtender ID="mpeEdit" runat="server" PopupControlID="pnlEdit" TargetControlID="btnEdit"  
                    CancelControlID="btnCloseEdit" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>
                <ajaxToolkit:ModalPopupExtender ID="mpeDelete" runat="server" PopupControlID="pnlDelete" TargetControlID="btnDelete"
                    CancelControlID="btnCloseDelete" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>

            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

弹出式代码

        <asp:Panel ID="pnlDelete" runat="server" CssClass="modalPopup" align="center" Style="display: none">
    <div style="height: 60px">
        <asp:UpdatePanel ID="upnlDelete" runat="server">
            <ContentTemplate>
                <h4>Do you wish to delete this Group?</h4>
                <asp:Label ID="lblDeleteGroupName" runat="server" ></asp:Label>
                <asp:Label ID="lblDeleteGroupDesc" runat="server" ></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <asp:Button ID="btnCloseDelete" runat="server" Text="Close" />
    </asp:Panel>

ItemCommand的代码

        protected void rptGroups_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        if (e.CommandName == "Edit")
        {

        }
        else if (e.CommandName == "Delete")
        {
            lblDeleteGroupName.Text = Convert.ToString(e.CommandArgument);
            lblDeleteGroupDesc.Text = Convert.ToString(e.CommandArgument);

        }
    }

提前致谢

- 编辑 -

当我从转发器中删除ajaxToolkit：ModalPopupExtender时，除了页面上一直显示的面板之外，回发工作正常，我认为这与此有关，但我不知道我还能把它放在哪里

Answer 1

我发现Ajax ToolKit有点痛苦并且暂时停止使用它（如果可能的话）。

部分问题是btnEdit和btnDelete仅用于处理模式的显示，没有必要OnClick，CommandName和{ {1}}在那里。他们不会触发任何形式的PostBack：

CommandArgument

但是你想要将一些变量传递给这些Modals以供它们显示，这里有两个选项，你可以通过PostBack过程来实现，也可以通过JavaScript设置。这些都与你发布的代码所取得的成果非常吻合。

我有两个选择（但是两个都放弃了ajaxToolkit：ModalPopupExtender）：

选项一（基本）
您可以通过以下方式获得相同的结果：

<asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" OnClientClick="return false" UseSubmitBehavior="false"  />
<asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger" Text="Delete" OnClientClick="return false" UseSubmitBehavior="false" />
<ajaxToolkit:ModalPopupExtender ID="mpeEdit" runat="server" PopupControlID="pnlEdit" TargetControlID="btnEdit"  
                CancelControlID="btnCloseEdit" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:ModalPopupExtender ID="mpeDelete" runat="server" PopupControlID="pnlDelete" TargetControlID="btnDelete"
                CancelControlID="btnCloseDelete" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>

不那么花哨，但只要用户点击弹出窗口的确定按钮，就会发布PostBack。你可以尝试变幻想并将变量传递到弹出窗口中，但是这会变得很乱，并且必须考虑任何单引号或双引号，它最好避开。

选项二
为了获得与您已经拥有的<asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" OnCommand="rptGroups_ItemCommand" CommandName="Edit" CommandArgument='<%#Eval("GroupID") %>' OnClientClick="return confirm('Do you wish to Edit this?')" /> <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-default" Text="Delete" OnCommand="rptGroups_ItemCommand" CommandName="Delete" CommandArgument='<%#Eval("GroupID") %>' OnClientClick="return confirm('Do you wish to Delete this?')" />组件类似的结果，这将需要一些改进，但好处是它非常可扩展，并且可以根据您的需要进行自定义：

Bootstrap

代码背后：

<asp:Repeater ID="DataRepeater" runat="server">
    <ItemTemplate>
        <br />
        <br />
        <%# Eval("GroupID") %><br />
        <%# Eval("GroupName") %><br />
        <%# Eval("GroupDescription") %><br />
        <asp:Button ID="btnEdit" runat="server" CssClass="btn btn-default" Text="Edit" OnCommand="DataRepeater_ItemCommand" CommandName="Edit" ValidateRequestMode="Enabled" CommandArgument='<%#Eval("GroupID") +"|"+ Eval("GroupName") +"|"+ Eval("GroupDescription") %>' />
        <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-default" Text="Delete" OnCommand="DataRepeater_ItemCommand" CommandName="Delete" CommandArgument='<%#Eval("GroupID") +"|"+ Eval("GroupName") +"|"+ Eval("GroupDescription") %>' />
    </ItemTemplate>
</asp:Repeater>

<asp:Panel ID="EditPanel" runat="server" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <h1 style="color: #ff0000;"><i class="glyphicon glyphicon-cog"></i>&nbsp;Edit:</h1>
                        <asp:HiddenField ID="IdOfItemToEditHiddenField" runat="server" />
                        Name: <asp:TextBox ID="NameTextBox" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <asp:Button ID="btnSaveEdit" runat="server" Text="Save" OnClick="btnSaveEdit_Click" OnClientClick="HideEditModal();" CssClass="btn btn-success" />
                        <asp:Button ID="btnCancelEdit" runat="server" Text="Cancel" OnClientClick="HideEditModal(); return false;" CssClass="btn btn-primary" />
                    </div>
                </div>

            </div>
        </div>
    </div>
</asp:Panel>

<asp:Panel ID="DeletePanel" runat="server" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <h1 style="color: #ff0000;"><i class="glyphicon glyphicon-warning-sign"></i>&nbsp;Delete?</h1>
                        <asp:HiddenField ID="IdOfItemToDeleteHiddenField" runat="server" />
                        <asp:Label ID="DeleteMessageLabel" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" OnClientClick="HideDeleteModal();" CssClass="btn btn-success" />
                        <asp:Button ID="btnCancelDelete" runat="server" Text="Cancel" OnClientClick="HideDeleteModal(); return false;" CssClass="btn btn-primary" />
                    </div>
                </div>

            </div>
        </div>
    </div>
</asp:Panel>

<script type="text/javascript">
    function DisplayEditModal() {
        $('#<%=EditPanel.ClientID%>').modal('show');
    }
    function HideEditModal() {
        $('#<%=EditPanel.ClientID%>').modal('hide');
    }

    function DisplayDeleteModal() {
        $('#<%=DeletePanel.ClientID%>').modal('show');
    }
    function HideDeleteModal() {
        $('#<%=DeletePanel.ClientID%>').modal('hide');
    }
</script>

这是它的基础知识，就像我说的那样明确需要改进，特别是在传递字符串时，你必须小心引号。

Repeater Itemcommand不会使用modalpopupextender触发

1 个答案: