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 () {
$(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
