Enumerate html tag elements in custom dialog; server-side?

Last post 11-09-2010, 4:34 AM by Tobster. 4 replies.
Sort Posts: Previous Next
  •  11-02-2010, 4:38 AM 64833

    Enumerate html tag elements in custom dialog; server-side?

    For long and complicated reasons I'm using the <IMG> tag to represent a page control, and adding attributes to it (for example MajorIncrements="5") which are then stored in an SQL database to be used in a viewer later.
     
    I have created a custom ascx tab for the image editor dialog, and need to be able to dynamically add input boxes to it according to what type of control it is, and sync the boxes to existing attributes.
     
    I can enumerate the <IMG> tag's attributes client side in the .ascx file using this script:
     
    function SyncToView() {
        for (var i = 0; i < element.attributes.length; i++) {
            if (element.attributes.item(i).nodeValue != null && element.attributes.item(i).nodeValue != ') {
                 alert('Found key ' + element.attributes.item(i).nodeName + ' with value ' + element.attributes.item(i).nodeValue);
            }
        }
    }
     
     Can anyone tell me how to access the element being edited and enumerate its' attributes from server-side, in the code behind?
     
    Thanks
  •  11-02-2010, 11:12 PM 64846 in reply to 64833

    Re: Enumerate html tag elements in custom dialog; server-side?

    Hi Tobster,
     
    If you want to put the value to server side from client side, please try passing through asp:HiddenField. Like the example below
     
    1. <%@ Page Language="C#" AutoEventWireup="true" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <script runat="server">  
    6.   
    7.     protected void button1_Click(object sender, EventArgs e)  
    8.     {  
    9.         label1.Text = "src of img1 is: " + hf1.Value;  
    10.     }  
    11. </script>  
    12.   
    13. <html xmlns="http://www.w3.org/1999/xhtml">  
    14. <head id="Head1" runat="server">  
    15.     <title></title>  
    16. </head>  
    17. <body>  
    18.     <form id="form1" runat="server">  
    19.         <img src="http://cutesoft.net/utility/anonymous.gif" id="img1" />  
    20.         <asp:Button ID="button1" runat="server" Text="Get src in server side" OnClientClick="getSrc()"  
    21.             OnClick="button1_Click" /><br />  
    22.         <asp:Label ID="label1" runat="server"></asp:Label>  
    23.         <asp:HiddenField ID="hf1" runat="server" />  
    24.     </form>  
    25. </body>  
    26. </html>  
    27.   
    28. <script>  
    29. function getSrc()  
    30. {  
    31.     var img1=document.getElementById("img1");  
    32.     var hf1=document.getElementById("<%= hf1.ClientID %>");  
    33.     hf1.value=img1.src;  
    34. }  
    35. </script>  
     Regards,
     
    ken 
  •  11-08-2010, 3:51 AM 64913 in reply to 64846

    Re: Enumerate html tag elements in custom dialog; server-side?

    Ok, I'm presuming the way to do it is to present a basic page from server side, fill in the relevant fields client side and somehow post it back, and then present a new page with the additional fields.
     
    How can I perform a single postback? Simply adding __doPostBack('__Page', 'Args') to the end of the SyncToView() javascript method causes an infinite loop as SyncToView() is called every postrender.
     
     
    Another problem I'm having is that any html elements with runat="server" specified can't seem to be accessed in client-side javascript, specifically this:
     
    <input type="hidden" id="ControlTypeID" runat="server" />
     
    function SyncToView() {
            if (element.controltypeid == null)
                ControlTypeID.value = '';
            else
                ControlTypeID.value = element.controltypeid;
    }
     
    Complains that ControlTypeID doesn't exist.
  •  11-08-2010, 7:45 PM 64927 in reply to 64913

    Re: Enumerate html tag elements in custom dialog; server-side?

    Hi Tobater,
     
    1. The example below shows you how to do a postback after get the client side value
    1. <%@ Page Language="C#" AutoEventWireup="true" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <script runat="server">  
    6.   
    7.    
    8.     protected void btnPostBack_Click(object sender, EventArgs e)  
    9.     {  
    10.         //postback here and implement your own logic  
    11.         lbMessage.Text = "-------------------------page post back--------------------------------";  
    12.     }  
    13. </script>  
    14.   
    15. <html xmlns="http://www.w3.org/1999/xhtml">  
    16. <head id="Head1" runat="server">  
    17.     <title></title>  
    18. </head>  
    19. <body>  
    20.     <form id="form1" runat="server">  
    21.         <input type="button" value="getName" onclick="getName()" />  
    22.         <input id="name" value="merry" runat="server" />  
    23.         <asp:Button ID="btnPostBack" runat="server" Style="visibility: hidden" OnClick="btnPostBack_Click" />  
    24.         <asp:Label ID="lbMessage" runat="server"></asp:Label>  
    25.     </form>  
    26. </body>  
    27. </html>  
    28.   
    29. <script type="text/javascript">  
    30. function getName() {  
    31.  var name=document.getElementById("<%= name.ClientID %>");  
    32.  var btnPostBack=document.getElementById("<%= btnPostBack.ClientID %>");  
    33.  alert(name.value);  
    34.  btnPostBack.click();  
    35.    
    36. }  
    37. </script> 
    2. If you want to get the control which contains "runat=server" on client side, should use the format below
     
    <input id="name" value="merry" runat="server" />
     
     var name=document.getElementById("<%= name.ClientID %>");
     
     
    Regards,
     
    ken
     
     
     
  •  11-09-2010, 4:34 AM 64935 in reply to 64927

    Re: Enumerate html tag elements in custom dialog; server-side?

    That's working, thanks.
View as RSS news feed in XML