Binding ajax popup extender with database value.

Today I want to show how you can bind one ajax popup extender control with database value using web service and stringbuilder. Suupose you have one database table with newsid,headlines,entrydate,news. You want to show in gridview,datalist or repeater and when someone want to read details news then popup will show like below.

(image you will get at attach file).

Fist I take gridview like below.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

                        AllowPaging="True" PageSize="5"

                        onpageindexchanging="GridView1_PageIndexChanging">

                        <Columns>

                            <asp:BoundField DataField="id" HeaderText="NEWS ID" />

                            <asp:BoundField DataField="headlines" HeaderText="HEADLINES" />

                            <asp:BoundField DataField="DOE" HeaderText="ENTRY DATE" />

                           <asp:TemplateField ItemStyle-Width="40" ItemStyle-HorizontalAlign="Right">

         <ItemTemplate>

            <asp:Image ID="Image1" runat="server" ImageUrl="~/image/Comment_edit.png" />

            <asp:PopupControlExtender ID="PopupControlExtender1" runat="server"

               PopupControlID="Panel1"

               TargetControlID="Image1"

               DynamicContextKey='<%# Eval("id") %>'

               DynamicControlID="Panel1"

               DynamicServiceMethod="GetDynamicContent" Position="Bottom">

            </asp:PopupControlExtender>

         </ItemTemplate>

      </asp:TemplateField>

                        </Columns>

                    </asp:GridView>

<asp:Panel ID="Panel1" runat="server"> </asp:Panel>

Note:-Please download Comment_edit.png image and put in image folder.

Here I take one image control and at TargetControlID of poup extender I give image control id. Below gridview you can see one panel which id I put at PopupControlID.Now your ajax page is set.

DynamicContextKey='<%# Eval("id") %>'

DynamicControlID="Panel1"

DynamicServiceMethod="GetDynamicContent" Position="Bottom"

Let's see below lines of poup extender carefully. At DynamicContextKey you will have to put the id through which news will search. DynamicControlID I put panel1 where everytime news will show and at DynamicServiceMethod I put GetDynamicContent webservice name which I write at server side. Server side code I write like below.

    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]

    public static string GetDynamicContent1(string contextKey)

    {

        string constr = "Data Source=server name;Initial Catalog=DB name;Integrated Security=True;";

        string query = "SELECT imgpath FROM img_table WHERE imgid = " + contextKey;

        SqlDataAdapter da = new SqlDataAdapter(query, constr);

        DataTable table = new DataTable();

        da.Fill(table);

        StringBuilder b = new StringBuilder();

        b.Append("<table style='background-color:#f3f3f3; border: #336699 3px solid; ");

        b.Append("width:350px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='3'>");

        b.Append("<tr><td colspan='3' style='background-color:#336699; color:white;'>");

        b.Append("<b>NEWS DETAILS</b>"); b.Append("</td></tr>");

        b.Append("<tr><td style='width:80px;'><b>imgpath</b></td>");

        b.Append("<tr>");

        b.Append("<td>" + table.Rows[0]["imgpath"].ToString() + "</td>");

        b.Append("</tr>");

        b.Append("</table>");

        return b.ToString();

    }

protected void Page_Load(object sender, EventArgs e)

    {

    }

Happy codding.