locked
AJAX to update partial section in ASP.NET page. RRS feed

  • Question

  • User-34860367 posted
    Hi all,

    Here is my menu.aspx page:

    <%@ 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"/>&nbsp; <asp:ImageButton ID="imgPage2" runat="server" ImageUrl="~/Images/PageTwo.png" OnClick="imgPage2_Click"/>&nbsp; <asp:ImageButton ID="imgPage3" runat="server" ImageUrl="~/Images/PageThree.png" OnClick="imgPage3_Click"/>&nbsp; <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%; ;"></iframe> </div> </div> </form> </body> </html>

    In my above code, 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 page loading as shown code:

    <div class="main-content" id="mainContentBody">
       <iframe id='ifr' src="PageOne.html" style="overflow: hidden; height: 100%; width: 100%; ;"></iframe>
    </div>
    I would like to use ASP.NET AJAX UpdatePanel with trigger or JavaScrip, jQuery, HTML5 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.
    Here is my code behind Menu.aspx.cs:

    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) { } } }
    Any idea expertise how to implement using javascript, jQuery and ASP.NET, C#? Please help. Thanks in advance.

    Friday, January 22, 2016 4:12 AM

Answers

  • User-219423983 posted

    Hi avt2k7,

    If you said to put OnClientClick="return false;" that mean nothing happen when click on other buttons for page navigation. Am I wrong?

    The “retrun false” to prevent the page from posting back. For this, you could have a look at the following similar thread.

    http://stackoverflow.com/questions/19139747/stopping-onclick-from-firing-when-onclientclick-is-false

    The following image is what I tested on my client and you could have a look.

    Note: As I don’t have the corresponding images for the buttons, I added the “AlternateText” to the button as below.

    <asp:ImageButton ID="imgPage1" runat="server" ImageUrl="~/Images/PageOne.png" AlternateText="PageOne" OnClick="imgPage1_Click" OnClientClick="return false;" />

    gif

    Best Regards,

    Weibo Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 27, 2016 7:08 AM

All replies

  • User-219423983 posted

    Hi avt2k7,

    For your needs, I think you could use the JQuery to achieve your need. The following code you could have a look and it works on my client. In the code, you should first add the

    OnClientClick="return false;"

    to each image button to stop page submit and don’t need to use the behind code to change the iframe URL.

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var values = ["one","two", "three", "four"];
                $("input[type='image'][id^='imgPage']").each(function (key,value) {
                    $(this).bind("click",function() {
                        var ifrSrc = "Page"+values[key]+".html";
                        $('#ifr').attr('src', ifrSrc);
                    });
                });
            });
    </script>
        <div class="col-md-4">
            <asp:ImageButton ID="imgPage1" runat="server" ImageUrl="~/Images/PageOne.png" OnClick="imgPage1_Click" OnClientClick="return false;" />&nbsp;
            <asp:ImageButton ID="imgPage2" runat="server" ImageUrl="~/Images/PageTwo.png" OnClick="imgPage2_Click"  OnClientClick="return false;" />&nbsp;
            <asp:ImageButton ID="imgPage3" runat="server" ImageUrl="~/Images/PageThree.png" OnClick="imgPage3_Click"  OnClientClick="return false;" />&nbsp;
            <asp:ImageButton ID="imgPage4" runat="server" ImageUrl="~/Images/PageFour.png" OnClick="imgPage4_Click"  OnClientClick="return false;" />
     </div>
    

    Best Regards, <!--?xml:namespace prefix = "o" ns = "urn:schemas-microsoft-com:office:office" /--><o:p></o:p>

    Weibo Zhang<o:p></o:p>

    Sunday, January 24, 2016 7:58 AM
  • User-34860367 posted

    Hi Zhang,

    I tried your code but nothing happen when navigate page 1 to other page.

    If you said to put OnClientClick="return false;" that mean nothing happen when click on other buttons for page navigation. Am I wrong?

    Please check back to make sure your code work. Thanks.

    Monday, January 25, 2016 9:07 PM
  • User-219423983 posted

    Hi avt2k7,

    If you said to put OnClientClick="return false;" that mean nothing happen when click on other buttons for page navigation. Am I wrong?

    The “retrun false” to prevent the page from posting back. For this, you could have a look at the following similar thread.

    http://stackoverflow.com/questions/19139747/stopping-onclick-from-firing-when-onclientclick-is-false

    The following image is what I tested on my client and you could have a look.

    Note: As I don’t have the corresponding images for the buttons, I added the “AlternateText” to the button as below.

    <asp:ImageButton ID="imgPage1" runat="server" ImageUrl="~/Images/PageOne.png" AlternateText="PageOne" OnClick="imgPage1_Click" OnClientClick="return false;" />

    gif

    Best Regards,

    Weibo Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 27, 2016 7:08 AM