Click here to Skip to main content
Click here to Skip to main content
Go to top

Loading ASPX Pages into Another Page

, 9 Apr 2014
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.

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

<div
id="portalViewContent" class="portalViewContent"></div>

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

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 () {
        $.post(widgetUri)
                .done(function (xData) {
                    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 (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                });
    });
}

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 article 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

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

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 9 Apr 2014
Article Copyright 2014 by LiQuick
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid