Hi
I got a Button, a textbox a Panel in my page, when the page is loaded, the Panel will filled with pictures and link, then then the button is click, it will popup the panel as ModalPopup, when user clicked on the link accompanied with the picture, the code assigned will send to the textbox.
My problem is as the page is shows, I can see the picture populated inside the panel(which suppose to be invisible after using ModalPopupExtender), then it hidden again, but things works. Then I wanted to populate the code to my textbox using UpdatePanel, but it just cause the page to post back, here attached with my codes, hope will got a solution or a pointer from you guys, thanks.
Imports System.Data.sqlclientPartialClass _DefaultInherits System.Web.UI.PageDim conAs New SqlConnection("server=localhost;database=wardrobe;integrated security=true;")Dim comAs New SqlCommand()Dim drAs SqlDataReaderPrivate Sub linkClick(ByVal senderAs Object,ByVal eAs System.EventArgs)Dim idsAs LinkButton =CType(sender, LinkButton) TextBox1.Text = ids.IDEnd Sub Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.LoadDim imgAs ImageDim lnkAs LinkButtonDim tablesAs New TableDim rowsAs TableRowDim colsAs TableCellDim colAs Integer = 1 com.Connection = con com.CommandText ="Select * From tblCollar"Try con.Open() dr = com.ExecuteReader rows =New TableRow() tables.CellSpacing = 10While dr.ReadIf col = 3Then col = 0 img =New Image() img.ID ="Img" & dr("code").ToString img.ImageUrl = dr("Picture").ToString img.Width = 100 img.Height = 100 img.ImageAlign = ImageAlign.TextTop lnk =New LinkButton lnk.Text ="[Select]" lnk.ID = dr("Code").ToString lnk.PostBackUrl ="default.aspx"AddHandler lnk.Click,AddressOf linkClick cols =New TableCell() cols.Controls.Add(img) cols.Controls.Add(lnk) rows.Cells.Add(cols) tables.Rows.Add(rows) rows =New TableRow()Else img =New Image() img.ID ="Img" & dr("code").ToString img.ImageUrl = dr("Picture").ToString img.Width = 100 img.Height = 100 img.ImageAlign = ImageAlign.TextTop lnk =New LinkButton lnk.Text ="[Select]" lnk.ID = dr("Code").ToString lnk.PostBackUrl ="default.aspx"AddHandler lnk.Click,AddressOf linkClick cols =New TableCell() cols.Controls.Add(img) cols.Controls.Add(lnk) rows.Cells.Add(cols)End If col += 1End While Panel1.Controls.Add(tables)Catch exAs ExceptionFinally con.Close()End Try End SubEnd Class Histephensaw,
It is not recommended to add the line number to your source code.Would you modify it and share your Aspx source code here?
Hi,
I had uploaded my project files and SQL Server 2005 backup files, please help me check my problem, thanks.
http://stephensaw.googlepages.com/BuildingModule.zip
Hi stephensaw,
I've got everything ready. But I'm not sure about what you really what to do now? Do you what to post a asynchronous Request to the server?
If yes, here is the sample:
<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> if (window.screen) { this.moveTo(0, 0); this.resizeTo(screen.availWidth,screen.availHeight) } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="updateCollar" runat="server"> <ContentTemplate> Please select a collar design form our gallery: <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="txtCode" runat="server" ReadOnly="True"></asp:TextBox> <asp:Button ID="btnBrowse" runat="server" Text="Browse" OnClick="btnBrowse_Click" /> <div style="display: none"> <asp:Button ID="btnPopTrigger" runat="server" Text="Button" /> </div> <cc1:ModalPopupExtender ID="PopupCollar" runat="server" BackgroundCssClass="ModalPopupBackground" PopupControlID="pnlPopup" TargetControlID="btnPopTrigger"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlPopup" runat="server" Height="500px" Width="630px" BackColor="White"> </asp:Panel> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnBrowse" /> </Triggers> </asp:UpdatePanel> <br /> </form> <script type="text/javascript" language="javascript"> var btnID = ""; Sys.WebForms.PageRequestManager.getInstance().add_beginRequest( function(sender,args){ btnID = args._postBackElement.id; } ); Sys.WebForms.PageRequestManager.getInstance().add_endRequest( function(sender, args){ if(btnID =="<%=btnBrowse.ClientID%>"){ $get("<%= btnPopTrigger.ClientID%>").click(); } } ); </script></body></html>C# code modified.
Protected Sub btnBrowse_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = "updatepanel updated"
End Sub
Hope it helps.If I misunderstood you, please let me know.
Thanks Jonathan for your effort to help me. Actually my update panel and all the stuff works well. Here I will explain more.
I got a button, a panel, a text box. When the page is load, I will runtime looping create image button which I retrieve detail from database, I will runtime create another panel and table, which then everything will be populated to my present panel. This will will popup when clicked the button. The problem was, at my page load, I can see the panel during the population of my controls. The problem 'shows' too fast, couldn't have it capture to picture, below is the video I captured.
http://stephensaw.googlepages.com/ModalPopup.zip
Hi stephensaw,
Based on your description, I thinkmake your pnlPopup hide as default.
<asp:Panel ID="pnlPopup" runat="server" Height="500px" Width="630px" BackColor="White"style="display:none"> </asp:Panel>
Hope it helps.
Hi stepensaw,
I have done some modifications based on your source code. And now we can select images without any postback and the implements moved to client side. Hope it will benefit our numbers.
Aspx:
<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default2.aspx.vb" Inherits="_Default2" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> if (window.screen) { this.moveTo(0, 0); this.resizeTo(screen.availWidth,screen.availHeight) } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="updateCollar" runat="server"> <ContentTemplate> Please select a collar design form our gallery: <asp:TextBox ID="txtCode" runat="server"></asp:TextBox> <asp:Button ID="btnBrowse" runat="server" Text="Browse"/> <cc1:ModalPopupExtender ID="PopupCollar" runat="server" BackgroundCssClass="ModalPopupBackground" PopupControlID="pnlPopup" TargetControlID="btnBrowse"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlPopup" runat="server" Height="500px" Width="630px" BackColor="white" style="display:none"> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <br /> </form> <script type="text/javascript" language="javascript"> function onSelectImage(imageID){ try{ $get("<%= txtCode.ClientID%>").value = imageID; $find("<%=PopupCollar.ClientID%>").hide(); return false } catch(e){ return false; } } </script></body></html>
VB.Net Code:
Imports System.Data.SqlClientImports System.Web.Services.webserviceImports System.DeploymentPartialClass _Default2Inherits System.Web.UI.Page'ConstantConst NUMPERCOLAs Integer = 4'Global VarDim conAs New SqlConnection("Server=localhost;Database=Wardrobe;Integrated Security=True")Dim comAs New SqlCommand()Dim drAs SqlDataReaderDim dsAs New Data.DataSetDim daAs New SqlDataAdapterDim dataRowsAs Data.DataRow()'Global ObjectDim imgButtonAs ImageButtonDim pnlAs PanelDim btnAs ButtonProtected Sub Page_Init(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.Init com.Connection = con com.CommandText ="Select * From Collar" da.SelectCommand = comTry con.Open() da.Fill(ds,"Collar") dataRows = ds.Tables("Collar").Select()Catch exAs ExceptionFinally con.Close()End Try End Sub Private Sub populatePopupBox()Dim colCountAs Integer = 1Dim dataRowAs Data.DataRowDim tblAs New TableDim rowAs TableRowDim colAs TableCell'Generate Panel to populate with ImageButton pnl =New Panel pnl.ID ="pnlContent" pnl.BackColor = Drawing.Color.FromArgb(20, 49, 51, 163) pnl.Height =CType(pnlPopup.Height.Value - 20, Unit) pnl.Width = pnlPopup.Width pnl.HorizontalAlign = HorizontalAlign.Center pnl.ScrollBars = ScrollBars.Vertical'Prepare table structure tbl.ID ="tblCollar" tbl.Width =CType(pnl.Width.Value - 100, Unit) tbl.CellSpacing = 5 tbl.CellPadding = 5 row =New TableRowFor Each dataRowIn dataRowsIf colCount > NUMPERCOLThen tbl.Rows.Add(row) row =New TableRow colCount = 1End If col =New TableCell col.HorizontalAlign = HorizontalAlign.Center col.VerticalAlign = VerticalAlign.Middle col.Attributes.Add("onmouseover","this.style.backgroundColor='#E9ECEF';") col.Attributes.Add("onmouseout", "this.style.backgroundColor='';")If txtCode.Text = dataRow("col_Code").ToStringThen col.BackColor = Drawing.Color.FromArgb(100, 233, 236, 239)End If imgButton =New ImageButton imgButton.ID = dataRow("col_Code").ToString imgButton.ImageUrl ="collar/" & dataRow("col_Picture").ToString imgButton.Width = 100 imgButton.Height = 100 imgButton.OnClientClick ="return onSelectImage('" + dataRow("col_Code").ToString + "');" col.Controls.Add(imgButton) row.Cells.Add(col) colCount += 1 Next tbl.Rows.Add(row) pnl.Controls.Add(tbl) btn = New Button btn.ID = "btnCancel" btn.Text = "Cancel" PopupCollar.CancelControlID = btn.ID pnlPopup.Controls.Add(pnl) pnlPopup.Controls.Add(btn)End Sub Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.LoadIf Not IsPostBackThen populatePopupBox()End If End SubEnd Class Hope it helps.
