Post
Ask Question

How To Use IFrame Inside A Web User Control

What is an Iframe?
 
An iframe is used to display a web page within a web page. Iframe is often used to also load third-party scripts in a page or other scripts. A good example of iframe use is embedding a YouTube video on a web page. 
 
Syntax:
 
<iframe src="URL"></iframe>
 
Use iFrame in a Web User Control 
 
Now let's create an Html page in Visual Studio that will be called in a Web User Control.
 
Create a html form with name test.html. 
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <link href="/css/hcs/site.css" temp_href="/css/hcs/site.css" rel="stylesheet" type="text/css" />  
  5. </head>  
  6. <div class="request_form">  
  7. <form action="http://abc.com/get.html" class="request_form" enctype="application/x-www-form-urlencoded" id="Form" method="post" name="Form" >  
  8. <table>  
  9. <tr>  
  10. <th>  
  11. <label>* First Name:</label>  
  12. </th>  
  13. <th>  
  14. <label>* Last Name:</label>  
  15. </th>  
  16. </tr>  
  17. <tr>  
  18. <td>  
  19. <input class='input_txt1' id="FirstName" maxlength='255' name="FirstName" tabindex='1' type='text' value="" / >  
  20. <br>  
  21. </td>  
  22. <td>  
  23. <input class='input_txt1' id="LastName" maxlength='255' name="LastName" tabindex='2' type='text' value="" / >  
  24. <br>  
  25. </td>  
  26. </tr>  
  27. <tr>  
  28. <th>  
  29. <label>* Company Name:</label>  
  30. </th>  
  31. <th>  
  32. <label>* Email Address:</label>  
  33. </th>  
  34. </tr>  
  35. <tr>  
  36. <td>  
  37. <input class='input_txt1' id="Company" maxlength='255' name="Company" tabindex='3' type='text' value="" />  
  38. <br>  
  39. </td>  
  40. <td>  
  41. <input class='input_txt1' id="Email" maxlength='255' name="Email" tabindex='4' type='text' value="" />  
  42. <br>  
  43. </td>  
  44. </tr>  
  45. <tr>  
  46. <td colspan="2" align="right">  
  47. <input id='FrmSubmit' name='submitButton' class="input_submit" type='submit' value='Submit' onclick='return validate();' >  
  48. </td>  
  49. </tr>  
  50. </table>  
  51. </form>  
  52. <script type="text/javascript">  
  53. function validate() {  
  54. var FirstName = document.getElementById('FirstName').value;  
  55. var LastName = document.getElementById('LastName').value;  
  56. var Company = document.getElementById('Company').value;  
  57. var Email = document.getElementById('Email').value;  
  58. var errors = "";  
  59. if (FirstName == "") {  
  60. errors += "Please enter your First name.\n";  
  61. }  
  62. if (LastName == "") {  
  63. errors += "* Please enter your last name.\n";  
  64. }  
  65. if (Company == "") {  
  66. errors += "* Please enter your company name.\n";  
  67. }  
  68. if (Email == "") {  
  69. errors += "* Please enter your email address.\n";  
  70. }  
  71. if (errors.length) {  
  72. alert('One or more errors occurred:\n\n' + errors);  
  73. return false;  
  74. }  
  75. }  
  76. </script>  
  77. </div>  
  78. </html>  
Create a User Control
 
Now, Right click on project name and select Add New Item to add a new item. Select Web User Control and rename as IFrame.ascx then click on OK.
 
Add the following code on that page. As you can see from this page, we're using an iframe tag and calling src test.html. 
  1. <div>  
  2. <iframe src="test.html" temp_src="test.html" style="width: 715px;height:600px;border:0" scrolling="no"></iframe>  
  3. </div>  
Add User Control to Web Form
 
Now add a default.aspx page to your project or use the default page and register the control on page. 
  1. <%@ Register src="~/IFrame.ascx" TagName="frame" TagPrefix="uc2" %>  
Now last step, Add web user control to the default page. Here is the html code. 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <%@ Register Src="~/IFrame.ascx" temp_src="~/IFrame.ascx" TagName="frame" TagPrefix="uc2" %>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head id="Head1" runat="server">  
  6. <title></title>  
  7. </head>  
  8. <body>  
  9. <form id="form1" runat="server">  
  10. <div>  
  11. <uc2:frame ID="frame1" runat="server" />  
  12. </div>  
  13. </form>  
  14. </body>  
  15. </html>  
Build and run
 
Now run the project and you will see that form posting is working with help of IFrame in your default page.