如何在GridView中使用ModalPopUpExtender?

时间:2012-02-04 11:19:48

标签: c# asp.net

我的数据库中有以下表格:

建议日志表: ID,标题,说明。

员工表:用户名,姓名

分区表: DivisionCode,DivisionName

我想显示仅包含SuggestionID,SuggestionTitle,EmployeeName和DivisionName的表格,当用户点击SuggestionTitle时,会显示一个弹出窗口,其中包含建议说明。

由于我是ASP.NET初学者开发人员,我尝试按this tutorial来获取它,但我失败了。

我所做的是以下内容:

ASP.NET代码:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
            AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID" 
            DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                    ReadOnly="True" SortExpression="ID" />
                <asp:TemplateField HeaderText="Title">
                    <ItemTemplate>
                        <asp:LinkButton runat="server" ID="lnkSuggestionTitle"
                                        Text='<%#Eval("Title") %>' 
                                        OnClick="lnkSuggestionTitle_Click">
                                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <%--<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />--%>
                <asp:BoundField DataField="Description" HeaderText="Description" 
                    SortExpression="Description" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Username" HeaderText="Username" 
                    SortExpression="Username" />
                <asp:BoundField DataField="DivisionName" HeaderText="Division" 
                    SortExpression="DivisionName" />
            </Columns>
        </asp:GridView>

        <asp:Button runat="server" ID="btnModalPopUp" style="display:none" />

        <AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender1" 
                                        runat="server" TargetControlID="btnModalPopUp" PopupControlID="pnlPopUp" BackgroundCssClass="modalBackground" 
                                        OkControlID="btnOk" X="20" Y="100">
        </AjaxToolkit:ModalPopupExtender>

        <asp:Panel runat="server" ID="pnlPopUp" CssClass="confirm-dialog">
            <asp:GridView ID="GridView2" runat="server">
            </asp:GridView>
        </asp:Panel>

        </ContentTemplate>
        </asp:UpdatePanel>
        <br /> 

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
            SelectCommand="SELECT     dbo.SafetySuggestionsLog.ID, dbo.SafetySuggestionsLog.Title, dbo.SafetySuggestionsLog.Description, dbo.employee.Name, dbo.SafetySuggestionsLog.Username, 
                      dbo.Divisions.DivisionName
FROM         dbo.employee INNER JOIN
                      dbo.SafetySuggestionsLog ON dbo.employee.Username = dbo.SafetySuggestionsLog.Username INNER JOIN
                      dbo.Divisions ON dbo.employee.DivisionCode = dbo.Divisions.SapCode">
        </asp:SqlDataSource>

代码隐藏:

protected void lnkSuggestionTitle_Click(object sender, EventArgs e)
    {
        LinkButton lnkSuggestionTitle = sender as LinkButton;
        string strSuggestionTitle = lnkSuggestionTitle.Text;

        string strConnectionString = ConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString;
        string strSelect = "SELECT ID, Title, Description FROM  dbo.SafetySuggestionsLog";
        SqlConnection sqlCon = new SqlConnection();
        sqlCon.ConnectionString = strConnectionString;
        SqlCommand cmdSuggestionDetails = new SqlCommand();
        cmdSuggestionDetails.Connection = sqlCon;
        cmdSuggestionDetails.CommandType = System.Data.CommandType.Text;
        cmdSuggestionDetails.CommandText = strSelect;
        cmdSuggestionDetails.Parameters.AddWithValue("@Title", strSuggestionTitle);
        sqlCon.Open();

        SqlDataReader dReader = cmdSuggestionDetails.ExecuteReader();
        GridView1.DataSource = dReader;
        GridView1.DataBind();
        sqlCon.Close();
        modalPopUpExtender1.Show();
    }

一切进展顺利,但在网站上,当我点击其中一个标题时,我没有得到ModalPopUp。另外,我在Internet Explorer浏览器的左下角收到错误通知,当我打开它时,它给了我以下描述:

**

  

Sys.ArgumentNullException:值不能为null。参数名称:   元素

**

我不知道为什么会这样。有什么帮助吗?

2 个答案:

答案 0 :(得分:3)

此问题通常是错误的OkControlID或CancelControlID(通过here),在这种情况下可能是“btnOk”。

答案 1 :(得分:0)

根据@ PeterX的建议,是的,你的小组声明遗漏了很多东西。

我会像这样重做这个,这是我在另一个更大的GridView控件中使用的。

                            <ajaxToolkit:ModalPopupExtender ID="mpeEndorsed" runat="server"
                                BackgroundCssClass="modalBackground"
                                PopupControlID="pnlEndorsed"
                                OkControlID="btnEndorsed"
                                CancelControlID="btnNotEndorsed"
                                PopupDragHandleControlID="dvHdr"
                                Drag="true"
                                TargetControlID="cbEndorsed">
                            </ajaxToolkit:ModalPopupExtender>
                            <asp:Panel ID="pnlEndorsed" runat="server" CssClass="pnlEndorsed" style="display:none">
                                <div id="dvHdr">
                                    <asp:Label ID="Label3" runat="server">** CONTACT LOG **</asp:Label>
                                </div>
                                <div id="dvBody">
                                    <table style="text-align:center; width:100%">
                                        <tr>
                                            <asp:GridView ID="gvContactLog" runat="server" ForeColor="#333333" GridLines="None" AllowPaging="true" PageSize="8" Font-Size="X-Small" CellPadding="4" AllowSorting="True" AutoGenerateColumns="False">
                                            </asp:GridView>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:Button ID="btnEndorsed" runat="server" Text="YES" />
                                                <asp:Button ID="btnNotEndorsed" runat="server" Text="NO" />
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </asp:Panel>

注意弹出式面板中的GridView 是一个骨架,必须通过JavaScript或CodeBehind构建才能使其有用。

在弹出式面板中定义GridView的完整(包含DataSource,字段等),这是在另一个更大的Gridview中(如我的情况),不起作用!你会看到一个混乱的屏幕和各种各样的东西。我想这是AjaxToolKit的一个限制,混合客户端和服务器端功能。