• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 449
  • Last Modified:

Use Button1_Click In the HTML page

Hi,

I need to use the below code in the HTML page as a C# code or JavaScript code.
How does the code look like in the HTML page?  And how do I trier it from the Html code?

Thanks.
protected void Button1_Click(object sender, EventArgs e)
        {
            I1.Attributes["src"] = TextBox1.Text;
        }

Open in new window

0
Rad1
Asked:
Rad1
  • 5
  • 4
  • 2
  • +1
5 Solutions
 
guru_samiCommented:
So are you going to use asp.net button/Textboxes or normal html inputs?
Can you share code for your button/textbox?
0
 
Rad1Author Commented:
Hi,

I am unable to use the Button1 from the CS page, I need to use its functionality in the HTML page as JavaScript.

I need to assign the the textbox value to the IFrame they make it refresh.
  I1.Attributes["src"] = TextBox1.Text;

See code below.

Thank you
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tab_Control._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
<html xmlns="http://www.w3.org/1999/xhtml">

<script runat="server">

    protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        int index = Int32.Parse(e.Item.Value);
        MultiView1.ActiveViewIndex = index;
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        I1.Attributes["src"] = TextBox1.Text;
    }
</script>

<script language="javascript" type="text/javascript">

    function Submit1_onclick(ObjectToUse) {
        var value1 = document.getElementById('<%=TextBox1.ClientID%>').value;
        window.open(value1);
    }
    
    function Submit2_onclick(ObjectToUse) {
        var value2 = document.getElementById('<%=TextBox2.ClientID%>').value;
        window.open(value2);
    }
    
    function Submit3_onclick(ObjectToUse) {
        var value3 = document.getElementById('<%=TextBox3.ClientID%>').value;
        window.open(value3);
    }
    function Submit4_onclick(ObjectToUse) {
        var value4 = document.getElementById('<%=TextBox3.ClientID%>').value;
        //I3.src.
        
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        html
        {
            background-color:white;
        }
        .tabs
        {
            position:relative;
            top:1px;
            left:10px;
        }
        .tab
        {
            border:solid 1px black;
            background-color:#eeeeee;
            padding:2px 10px;
        }
        .selectedTab
        {
            background-color:white;
            border-bottom:solid 1px white;
        }
        .tabContents
        {
            border:solid 1px black;
            padding:10px;
            background-color:white;
            width: 726px;
            height: 298px;
        }
        #form2
        {
            height: 364px;
            width: 748px;
        }
    </style>
    <title>MultiView Tabs</title>
</head>
<body>
    <form id="form2" runat="server">
    <div>
    
    <asp:Menu
        id="Menu1"
        Orientation="Horizontal"
        StaticMenuItemStyle-CssClass="tab"
        StaticSelectedStyle-CssClass="selectedTab"
        CssClass="tabs"
        OnMenuItemClick="Menu1_MenuItemClick"
        Runat="server" BorderColor="#000099" BorderStyle="Solid" BorderWidth="2px">
<StaticSelectedStyle CssClass="selectedTab"></StaticSelectedStyle>

<StaticMenuItemStyle CssClass="tab"></StaticMenuItemStyle>
        <Items>
        <asp:MenuItem Text="SharePoint" Value="0" Selected="true" />
        <asp:MenuItem Text="File Manager" Value="1" />
        <asp:MenuItem Text="Web Browser" Value="2" />
        </Items>    
    </asp:Menu>
    
    <div class="tabContents">
    <asp:MultiView
        id="MultiView1"  
        ActiveViewIndex="0"
        Runat="server">
        <asp:View ID="View1" runat="server">
            <iframe ID="I1" runat="server" allowtransparency="true" 
                frameborder="1" name="I1" scrolling="auto" 
                style="border: medium solid #0066FF; width: 100%; height: 150%;"></iframe>
                
                        <asp:TextBox ID="TextBox1" runat="server" style="font-weight: 700" 
            Width="412px" ontextchanged="TextBox1_TextChanged">http://www.msn.comx</asp:TextBox>
            
                    <input id="Submit1" onclick="return Submit1_onclick('value1')" type="submit" 
            value="Open in New Window" />
            
            <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
            Text="Open in Portlet" Width="103px" />
        
        
        </asp:View>        
        <asp:View ID="View2" runat="server" EnableTheming="True">
               <iframe ID="I2" runat="server" allowtransparency="true" 
                frameborder="1" name="I2" scrolling="auto" 
                style="border: medium solid #0066FF; width: 100%; height: 150%;"></iframe>
                
                        <asp:TextBox ID="TextBox2" runat="server" style="font-weight: 700" 
            Width="411px" ontextchanged="TextBox2_TextChanged">http://www.msn.com</asp:TextBox>
            
                    <input id="Submit2" onclick="return Submit2_onclick('value2')" type="submit" 
            value="Open in New Window" />
            
            <asp:Button ID="Button2" runat="server" onclick="Button2_Click" 
            Text="Open in Portlet" Width="103px" />
        
        
            <br />
        </asp:View>        
        <asp:View ID="View3" runat="server">
               <iframe ID="I3" runat="server" allowtransparency="true" 
                frameborder="1" name="I3" scrolling="auto" 
                style="border: medium solid #0066FF; width: 100%; height: 150%;"></iframe>
                
                        <asp:TextBox ID="TextBox3" runat="server" style="font-weight: 700" 
            Width="408px" ontextchanged="TextBox3_TextChanged"></asp:TextBox>
            
                    <input id="Submit3" onclick="return Submit3_onclick('value3')" type="submit" 
            value="Open in New Window" />
            
               <input id="Submit4" onclick="return Submit4_onclick('value4')" type="submit"  
                   value="submit" /><br />
        </asp:View>        
    </asp:MultiView>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" 
            Height="17px" RepeatDirection="Horizontal" Width="724px" 
            onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com/">site</asp:ListItem>
            <asp:ListItem>Boeing.com</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
            <asp:ListItem Value="http://www.msn.com">site</asp:ListItem>
        </asp:RadioButtonList>
    </div>
    
    </div>
            
            <asp:Button ID="Button3" runat="server" onclick="Button3_Click" 
            Text="Open in Portlet" Width="103px" />
        
        
    </form>
</body>
</html>
       

Open in new window

0
 
GGSanthoshCommented:

Hi,

here is the Java Script funtion for your senario...

function loadIFrame()
{
            var txtBox = document.getElementById('TextBox1');
            if (txtBox != null )
                   document.getElementById('I3').src = txtBox .value;
}

Call this function on Button1 On client click event like below ( I hope you have the framework 2.0 or greater)

     <asp:Button ID="Button1" runat="server" onclick="Button1_Click"  
            Text="Open in Portlet" Width="103px"  OnClientClick="loadIFrame"/>

Let me know how it goes..
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
GGSanthoshCommented:
OnClientClick="loadIFrame()"
0
 
rameshrrCommented:
try this,

function loadIFrame()
{
            var txtBox = document.getElementById('TextBox1');
            if (txtBox != null )
                   document.getElementById('I3').src = txtBox .value;
            return false;
}
HTML Code should be,

     <asp:Button ID="Button1" runat="server"
            Text="Open in Portlet" Width="103px"  OnClientClick="return loadIFrame();"/>
0
 
Rad1Author Commented:
None of the functions worked???

0
 
Rad1Author Commented:
Which one is correct to use, the first one or the second?

1) var txtBox = document.getElementById('TextBox1');

2) var txtBox = document.getElementById('<%=TextBox3.ClientID%>').value;

0
 
rameshrrCommented:
first one is correct.
 since you have placed your textbox directly in the page's HTML code,  the id never changes
var txtBox = document.getElementById('TextBox1');
0
 
GGSanthoshCommented:
Both are correct but first one does not work if the control is inside any other Rich controls(ex: GRID)
So best practice is to use second one.


I tested the below code Its fine.. I did small changes to the above code ( I typed I3 instead I1 and we have to return false to stop sumition of the page)

 function loadIFrame()
    {
     var txtBox = document.getElementById('TextBox1');
            if (txtBox != null )
                   document.getElementById('I1').src = txtBox .value;
        return false;
    }


   <input type="submit" name="Button1" value="Open in Portlet" onclick=" return loadIFrame();" id="Button1" style="width:103px;" />

0
 
Rad1Author Commented:
Did you do it in MutiView control?
You can see that in my (above) code.
0
 
Rad1Author Commented:
Yes, it is working now.

Thank you.
0
 
GGSanthoshCommented:
No, your code has lot of events and you did not post the CS file. So I just took required part out of it. And made it work.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 5
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now