Click here to Skip to main content
11,428,876 members (60,176 online)
Click here to Skip to main content

Loading ASPX Pages into Another Page

, 5 Mar 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
Using JQuery AJAX calls to load ASPX page(s) into another HTML/ASPX page

Introduction

A project at our office involves building a webpage showing multiple information parts of users/accounts. One part would for example show Microsoft Exchange information, the other Active Directory information, while another part would be used to trigger a workflow to reset user information.

All these parts involved querying and targeting different systems and some parts contained information not really important for all the users using the webpage. So what I wanted to build are small ASPX pages focusing solely on one part of the information need and combining these ASPX pages into one view. Besides being able to load initial “static information”, I still wanted to be able to use C# code behind to perform actions (like enabling an account) and refresh the information of the specific information part.

Although this almost screams using SharePoint server with webparts, we haven’t yet dived into this technology and, due to decisions taken on a management level, SharePoint installations are out of the question at the moment. Moreover, I wanted a technique I could also use in for example loading an ASPX page as a portion of a Drupal CMS page.

Background

Diving into this “problem”, I could only think of only one technique that could solve this problem: JavaScript and AJAX calls. As Drupal is PHP, I couldn’t rely on .NET technology or Drupal specific code, but the content supplier should be able by inserting HTML and JavaScript to include an ASPX page.

So I ventured into the long forgotten land of JavaScript and reassured all the reasons I have tattooed into my brain why I have deserted this technique. But… it was the only way to solve this issue and therefore I ventured into something new for me: JQuery (the library that would make all things easier).

Using the Code

The code below is the first “working” piece of code to make two fairly simple ASPX pages work within one HTML page in Internet Explorer 9 and Chrome. I’m not only posting this code to help others but also to receive suggestions and/or improvements.

To use the JavaScript code, you simply need to insert a link to a JQuery library and the JavaScript file you see below. Furthermore, you need a (DIV) container in your HTML page and I used to wrap the whole form of the ASPX page into another container to use as a reference to the content I should present in the HTML page. Furthermore, I insert a tiny piece of JavaScript into the HTML to load the ASPX page on the client side. Last thing to do is naming the form in your main page with an ID.

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="LiQuickASPXBootstrapper.js"></script>

<form id="form1" runat="server">
<div id="portalViewContent" class="portalViewContent"></div>

<script type='text/javascript'>
    $(document).ready(function () {
        loadPage('/Widget/PostCodeCheck.aspx','portalViewContent', 'contentWidget'); 
    })
</script>
</form>

LiQuickASPXBootstrapper.js

function submit_handler(formObj, widgetUri) {
    var submitObj = $(formObj).data('objClicked');
    var submitObjID = submitObj.attr('id');

    var formData = formObj.serialize()
        + '&'
        + encodeURI(submitObj.attr('id'))
        + '='
        + encodeURI(submitObj.attr('value'))
    ;

    $(formObj).fadeOut('2000');
    $(formObj).promise().done(function () {
        $.post(widgetUri, formData)
            .done(function (xData) {
                var newSubmitObj = $($.parseHTML(xData)).find("#" + submitObjID);
                var newForm = newSubmitObj.parents('form');
                formObj.html(newForm.html());
                updatePaths(formObj, widgetUri);
                $(formObj).fadeIn('2000');
            })
            .fail(function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            });
        });
    return false;
}

function loadPage(widgetUri, containerIDLocal, containerIDRemote) {
    var containerObjLocal = $('#' + containerIDLocal);
    $(containerObjLocal).fadeOut('2000');
    $(containerObjLocal).promise().done(function () {
        containerObjLocal.html("Loading");
        $(containerObjLocal).fadeIn('2000');
        $(containerObjLocal).promise().done(function () {
            $.ajax({
                type: "post",
                url: widgetUri,
                timeout: 10000
            })
            .done(function (xData) {
                $(containerObjLocal).fadeOut('2000');
                $(containerObjLocal).promise().done(function () {

                    var externalHTML = $.parseHTML(xData);

                    var containerObjRemote = $(externalHTML).filter('#' + containerIDRemote);
                    containerObjLocal.html(containerObjRemote.html());

                    updatePaths(containerObjLocal, widgetUri);
                    var forms = containerObjLocal.children('form');
                    $(forms).submit(function (event) {
                        event.preventDefault();
                        submit_handler($(event.currentTarget), widgetUri);
                    });
                    $(forms).click(function (event) {
                        $(this).data('objClicked', $(event.target));
                    });
                    $(forms).each(function () {
                        //alert(this.name);
                        $(this).data('widgetUri', widgetUri);
                    });

                    __doPostBack = function (t, a) {
                        __myDoPostBack(t, a);
                    }
               
                    $(containerObjLocal).fadeIn('2000');
                });
            })
            .fail(function (jqXHR, textStatus) {
                containerObjLocal.html("ERROR: " + jqXHR.status + " - " + textStatus);
                $(containerObjLocal).fadeIn('2000');
            });
        }
        )
    });
}

function __myDoPostBack(eventTarget, eventArgument) {
    var submitObj = $("#" + eventTarget);
    var theForm = submitObj.parents('form:first');
    var submitObjID = submitObj.attr('id');
    var widgetUri = $(theForm[0]).data('widgetUri');
    

    $(theForm[0]).find(':hidden#__EVENTTARGET')[0].value = eventTarget;
    $(theForm[0]).find(':hidden#__EVENTARGUMENT')[0].value = eventArgument;

    var formData = theForm.serialize();

    $(theForm).fadeOut('2000');
    $(theForm).promise().done(function () {
        $.post(widgetUri, formData)
            .done(function (xData) {
                var newSubmitObj = $($.parseHTML(xData)).find("#" + submitObjID);
                var newForm = newSubmitObj.parents('form');
                theForm.html(newForm.html());
                updatePaths(theForm, widgetUri);
                $(theForm).fadeIn('2000');
            })
            .fail(function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            });
    });
    return false;
}

function updatePaths(containerObjLocal, widgetUri) {
    var linksHref = $(containerObjLocal).find('[href]').not('[href^="http"],
    [href^="https"],[href^="mailto:"],[href^="#"]');
    linksHref.each(function () {
        value = $(this).attr('href');

        var n = widgetUri.lastIndexOf('/');
        var target = widgetUri.substring(0, n + 1);

        if (value.substr(0, 1) == "/") {
            value = value.substr(1);
        };

        $(this).attr('href', target + value);
    });

    var linksSrc = $(containerObjLocal).find('[src]').not
    ('[src^="http"],[src^="https"]');
    linksSrc.each(function () {
        value = $(this).attr('src');

        var n = widgetUri.lastIndexOf('/');
        var target = widgetUri.substring(0, n + 1);

        if (value.substr(0, 1) == "/") {
            value = value.substr(1);
        };

        $(this).attr('src', target + value);
    });
}

The JavaScript code will load, hook onto submit and autopostback events of the form and refresh itself on the same view without reloading the HTML page.

Points of Interest

What I discovered is the diversity of JavaScript implementations across browsers. Some browsers are flexible when searching for tags, others have a different order of event calls that disable other events. The code above is far from perfect, so use it with caution.

History

  • 2014-04-09: First submission of the tip once I finally had the code working for two simple tests
  • 2014-04-10: Added function "updatePaths" which translates relative URLs to relative/absolute URLs from the "point of view" of the page where the ASPX is included
  • 2015-03-05: Changed the JQuery Post function to an JQuery Ajax post call to add Timeout option. Changed a few visual parts and added small comment to add an ID to the main form

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

LiQuick
Software Developer
Netherlands Netherlands
No Biography provided

Comments and Discussions

 
QuestionSource code not included Pin
Tridip Bhattacharjee16-Mar-15 22:39
memberTridip Bhattacharjee16-Mar-15 22:39 
AnswerRe: Source code not included Pin
LiQuick17-Mar-15 22:42
memberLiQuick17-Mar-15 22:42 
QuestionUFrame or IFrame Pin
Dewey5-Mar-15 18:02
memberDewey5-Mar-15 18:02 
AnswerRe: UFrame or IFrame Pin
LiQuick5-Mar-15 22:57
memberLiQuick5-Mar-15 22:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150428.2 | Last Updated 5 Mar 2015
Article Copyright 2014 by LiQuick
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid