Question

我在如何通过点击网格视图内的按钮显示模态面板方面遇到了很多困难。

To context：我有一个数据行，其字符串字段可以包含简单文本或base 64编码图像，所以我使用自定义模板来定义何时显示原始内容或按钮＆＃34;查看图片＆＃34;。此图像将在模式面板上打开，该面板应在按钮单击时上升。

这是我作为控件（ascx）创建的Panel：

x5

这是我想要使用它的页面和ASPxGridView：

<asp:Panel ID="pnlModalOverlay" runat="server" Visible="true" CssClass="Overlay">
    <asp:Panel ID="pnlModalMainContent" runat="server" Visible="true" CssClass="ModalWindow">
        <div class="WindowTitle">
            <asp:Label ID="lbTitle" runat="server" />
        </div>
        <div class="WindowBody">
            <asp:Panel ID="pnlContent" runat="server" Visible="true">
                <asp:Image ID="imgContent" runat="server" CssClass="ImageView" />
            </asp:Panel>
            <div class="Button">
                <asp:Button ID="btnOk" runat="server" class="btn btn-default " Text="Close" OnClientClick="loadingPanel.Show();" />
            </div>
        </div>
    </asp:Panel>
</asp:Panel>

Codebihind：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <ContentTemplate>
        <div style="margin-top: 12px;">
            <asp:Button type="button" ID="btnShowImage" AutoPostBack="true" class="btn btn-default navbar-right" Text="Show Image"
                runat="server" Style="margin-left: 5px;" OnClientClick="loadingGridPanel.Show();" />
        </div> 

        <!-- Some data filter controls  -->

        <MyWorkspace:AlertModal ID="alertModal" runat="server" Visible="false" />
        <MyWorkspace:ImageModal ID="imageModal" runat="server" Visible="false" />

    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="mainGrid" />
    </Triggers>
</asp:UpdatePanel>

<MyWorkspace:GridViewWrapper ID="mainGrid" runat="server" Visible="true" />

创建ButtonColumn模板：

public partial class MyPage : System.Web.UI.Page
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        btnShowImage.Click += new EventHandler(ShowImage); // This call works fine
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            if (!IsPostBack)
            {
                mainGrid.CanEditItems = true;

                mainGrid.CustomTemplates.Add(new CustomColumnTemplate { columnName = "Id", template = new LinkColumn(CreateParentLink, "Go to parent") });
                mainGrid.CustomTemplates.Add(new CustomColumnTemplate { columnName = "Value", template = new ButtonColumn(ShowImage, "View Image") }); // This one doesn't works
            }
        }
        catch (Exception ex)
        {
            modalAlerta.Show("Page_Load", ex.Message, false, false, "");
        }
    }

    void ShowImage()
    {
        modalImagem.Show(); // Set Modal's Visible property to True
        // UpdatePanel1.Update(); <-- Tryin' force it to work with no success
    }

}

单击public class ButtonColumn : System.Web.UI.ITemplate { private Action action; private string controlId; private string tooltip; public ButtonColumn(Action onClick, string toolTip) { this.action = onClick; this.controlId= "btnShowImage"; this.tooltip = toolTip; } public void InstantiateIn(System.Web.UI.Control container) { GridViewDataItemTemplateContainer gridContainer = (GridViewDataItemTemplateContainer)container; if (System.Text.RegularExpressions.Regex.IsMatch(gridContainer.Text, "^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$")) { ImageButton button = new ImageButton(); button.ID = idControle; button.ImageUrl = "/Images/html5_badge_64.png"; button.Width = 20; button.Height = 20; button.ToolTip = tooltip; button.Click += (s, a) => { if (onClick != null) onClick(); }; container.Controls.Add(button); } else { Label label = new Label() { Text = gridContainer.Text, ToolTip = tooltip }; container.Controls.Add(label); } } }按钮进行的方法调用正常。但是当我在gridview中通过一个ImageButton（或按钮）进行相同的调用时，它不起作用。两个调用都到达ShowImage方法。

任何帮助将不胜感激。谢谢大家。

编辑1： GridView封装在btnShowImage中（我使用反射和存储的元数据得到的类属性的动态构建列），这个类有太多的代码可以在这里分享，我不认为＆＃39;原因。此外，我已经在调试模式下执行并通过它逐步传递到这个内部的每个相关方法。

列添加方法：

GridViewWrapper

我已确保CustomColumnTemplate customTemplate = CustomTemplates.FirstOrDefault(f => f.columnName == metadata.ColumnIdName); gridView.Columns.Add(new GridViewDataColumn() { FieldName = metadata.ColumnIdName, VisibleIndex = GetVisibleIndexByColumnIdName(metadata.ColumnIdName), Caption = metadata.Caption, Width = new Unit(DefaultColumnWidth, UnitType.Pixel), DataItemTemplate = customTemplate == null ? null : customTemplate.template });方法被点击，但其行为类似于ShowImage尚未更新

Answer 1

ASPxGridView在ViewState中存储有关列的信息，但不保存有关列模板的信息。这是有目的的，因为模板可能非常复杂，并且它们的序列化使ViewState非常庞大。因此，如果在运行时使用模板创建列，请禁用ViewState：

ASPxGridView.EnableViewState="false"

并在每个回调中创建列：

//if (!IsPostBack)
//{
    mainGrid.CanEditItems = true;
    mainGrid.CustomTemplates.Add(new CustomColumnTemplate { columnName = "Id", template = new LinkColumn(CreateParentLink, "Go to parent") });
    mainGrid.CustomTemplates.Add(new CustomColumnTemplate { columnName = "Value", template = new ButtonColumn(ShowImage, "View Image") }); // This one doesn't works
//}

Answer 2

您使用了以下代码：

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="mainGrid" />
</Triggers>

根据this article，在asp:AsyncPostBackTrigger中如果未指定EventName属性，则使用控件的DefaultEventAttribute属性来确定默认事件。例如，Button控件的默认事件是Click事件。

由mainGrid创建的

GridViewWrapper控件，它与mainGrid中的控件无关。 Updatepanel尝试为async控件注册mainGrid触发器，该控件位于面板之外，但无法执行此操作。

<强>溶液：我认为此问题的解决方案是Updatepanel方法中的更新ShowImage()。

在网格视图单元格内按钮调用时不显示模态面板

2 个答案: