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.