Repeater Itemcommand 不使用 modalpopupextender 触发

Question

我知道这个问题已经被问过很多次了，但是在花了一天中最好的时间阅读 SO 和其他网站之后，我仍然无法解决我的问题。我试过使用 Viewstate、!IsPostback、Page_Load 和 Page_Init 都无济于事。

我有一个转发器，其中 returns 记录列表，并且对于每条记录，它还显示两个 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 没有意义CommandArgument 在那里。他们不会触发任何形式的回发：

<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 过程来完成，也可以通过 JavaScript 进行设置。这两者都与您希望通过发布的代码实现的目标没有很好的联系。

我有两个选项供您选择（但都放弃 ajaxToolkit:ModalPopupExtender）：

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

<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>

后面的代码：

private Control _parentControl;
protected void Page_Load(object sender, EventArgs e)
{
    _parentControl = this; //if using an UpdatePanel use the ID of that instead of 'this'
    DataForRepeater();
}

private void DataForRepeater()
{
    //just example data to load the repeater
    var dt = new DataTable();
    dt.Columns.Add("GroupID", typeof(int));
    dt.Columns.Add("GroupName", typeof(string));
    dt.Columns.Add("GroupDescription", typeof(string));

    for (int i = 1; i <= 10; i++)
    {
        var nr = dt.NewRow();
        nr["GroupID"] = i;
        nr["GroupName"] = "SomeName" + i.ToString();
        nr["GroupDescription"] = "Description of " + i.ToString() + " item";
        dt.Rows.Add(nr);
    }
    DataRepeater.DataSource = dt;
    DataRepeater.DataBind();
}

protected void DataRepeater_ItemCommand(object sender, CommandEventArgs e)
{
    string command = e.CommandName;
    string[] arguments = e.CommandArgument.ToString().Split('|');

    switch (command)
    {
        case ("Edit"):
            //edit operation
            IdOfItemToEditHiddenField.Value = arguments[0];
            NameTextBox.Text = arguments[1];
            ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Modal", " DisplayEditModal()", true);
            break;
        case ("Delete"):
            //delete operation
            IdOfItemToDeleteHiddenField.Value = arguments[0];
            DeleteMessageLabel.Text = arguments[1] + "<br/>" + arguments[2];
            ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Modal", " DisplayDeleteModal()", true);
            break;
        default:
            throw new InvalidOperationException();
    }
}

protected void btnSaveEdit_Click(object sender, EventArgs e)
{
    int idToSave = int.Parse(IdOfItemToEditHiddenField.Value);
    string newName = NameTextBox.Text;

    //do something to save it
    ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Msg", string.Format("alert('Save item {0}: {1}');", idToSave, newName), true);
}


protected void btnDelete_Click(object sender, EventArgs e)
{
    int idToDelete = int.Parse(IdOfItemToDeleteHiddenField.Value);

    //do something to delete it
    ScriptManager.RegisterStartupScript(_parentControl, _parentControl.GetType(), "Msg", string.Format("alert('Delete item {0}');", idToDelete), true);
}

这是它的基础，就像我说的，它肯定需要改进，尤其是在传递字符串方面，您必须小心引号。

Repeater Itemcommand 不使用 modalpopupextender 触发

Repeater Itemcommand doesnt fire with modalpopupextender

c#

asp.net

asp.net-ajax