<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menu.aspx.cs" inherits="Portal.menu" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><link href="Content/bootstrap.css" rel="stylesheet" /><link href="Content/app.css" rel="stylesheet" /><script src="Scripts/jquery.js"></script><script src="Scripts/bootstrap.js"></script><script src="Scripts/app.js"></script><style type="text/css">
.auto-style1 {
width: 105px;
}</style></head><body><form id="form1" runat="server"><div class="wrapper"><div class="header"><div class="main-frame"><div class="row"><div class="col-md-8"><img src="images/LOGO.png" alt="Logo" style="box-shadow: none; height: 90px; min-height: 90px; width: auto;" /></div><div class="col-md-4"><asp:ImageButton ID="imgPage1" runat="server" ImageUrl="~/Images/PageOne.png" OnClick="imgPage1_Click"/> <asp:ImageButton ID="imgPage2" runat="server" ImageUrl="~/Images/PageTwo.png" OnClick="imgPage2_Click"/> <asp:ImageButton ID="imgPage3" runat="server" ImageUrl="~/Images/PageThree.png" OnClick="imgPage3_Click"/> <asp:ImageButton ID="imgPage4" runat="server" ImageUrl="~/Images/PageFour.png" OnClick="imgPage4_Click"/></div> </div></div></div><div class="main-content" id="mainContentBody"><iframe id='ifr' src="PageOne.html" style="overflow: hidden; height: 100%; width: 100%; position: absolute;"></iframe></div></div></form></body></html>On my above Menu.aspx, there are four buttons: page1, page2, page3, page4 on the top right corner of the page. After that section, there is main content body which display PageOne.html default when first loading.
<div class="main-content" id="mainContentBody"><iframe id='ifr' src="PageOne.html" style="overflow: hidden; height: 100%; width: 100%; position: absolute;"></iframe></div>
I would like to use ASP.NET AJAX UpdatePanel with trigger to implement the following:
1. Click on Page2 button with replace source in iframe from PageOne.html to PageTwo.html
2. Click on Page3 button with display the content of PageThree.aspx
3. Click on page4 button with display the content of PageFour.aspx and so on.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Portal
{
public partial class menu : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void imgPage1_Click(object sender, ImageClickEventArgs e)
{
}
protected void imgPage2_Click(object sender, ImageClickEventArgs e)
{
}
protected void imgPage3_Click(object sender, ImageClickEventArgs e)
{
}
protected void imgPage4_Click(object sender, ImageClickEventArgs e)
{
}
}
}I am not sure how to make all completed codes. Any codes in javascript, jQuery and ASP.NET C# guru, please help. Thanks in advance.