CodeProject: Using the Prototype Ajax Framework with HTML and an ASP.Net web project. Free source code and programming help

Report Article

Discuss

Send to a friend

votes for this Article.

Popularity: 0.00 Rating: 0.00 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download GetTheFragment - 3.06 KB

Introduction

I recently had a requirement to grab html fragments from pages on one web site and include them in some pages on another web site. I was unable to do this by making either site an ASP.net web project as our content management system requires that both source and target pages have to remain as HTML files and can not be included in ASP.Net web projects. Both websites are under my control so I have full access to them, but they are on different domains.

I was fairly sure I could do this using Ajax, so I did a bit of research. I am inherently lazy, so I did not want to write my own XMLHTTPRequest code when I could get nice simple open source code to do the work for me. After a bit of searching and reading I chose the Prototype Framework as it looked easy to use and has good documentation and examples. It also seems quite popular and has an active community, so help is available if needed.

Cross Domain Issue

My first issue was cross domain access to pages. If I try to read files from a different domain, most browsers will see this as a security breach and complain with a popup (at least), or refuse to load the page. As I have full control over both domains, the easiest solution was to upload the source pages to the domain I need to call them from. Both websites have staging sites on my internal server and both have an automatic upload to the live server once an hour. This is plenty for my needs, so I just created another upload job that transfers the source pages to the second domain if they have been modified.

Great, now I have the pages where I need them and no more cross domain calls. Next step, get the fragments of HTML out of the source pages.

The ASP.Net Project

This is where the ASP.Net project comes in. (I am indebted to Christian Graus for his help with this part of the process). While I could not turn the whole site into an ASP.Net project, I could include an ASP.Net project as an application in a sub directory. The content authors won’t be making any alterations to any files in the project and when I compile and publish the project, VS can overwrite the sub directory without affecting the rest of the site. All I needed to do was create an empty ASPX file for each html source page. The ASPX page just needs the @Page directive and the CodeFile and Inherits attributes. Delete everything else (including the <html>, <head> and <body> tags).

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>

Then in the OnPageLoad event in the code behind some code that reads the source page, grabs the required html and outputs it using response.writes. The trick is to add a response.end at the end of the code so that you don’t get anything returned other than the html fragment required. In order to identify the fragments needed, I used a couple of named anchors to mark the start and end points in the html (<a id=”TheStart”></a> and <a id=”TheEnd”></a>). In order to make my life easier, I wrote a simple class that contains all of the page names and paths to the source pages and some generic code that grabs all content between the start tag and the end tag. It also rebases any image tags or relative hyperlinks back to the original domain so that they still work in the new page.

A sample project is available as a download at the top of this article. I have used vb.net, but the language is irrelevant - The Ajax code just sees the html fragment.

The Ajax Stuff

Beautiful, now I have the fragment(s) I need and all I have to do it get them into the page. It turns out that this is the easiest step. I wrote a small fragment of JavaScript and saved it in my Scripts directory as “GetTheFrag.js”. Prototype has a method called Ajax.Updater that takes an element id – to put the returned content in, and a URL – to get the content from. So my code turned out to be:

function getAspx(url,placeHolderID){
            /*{success: placeHolderID} means
that the container div will only be updated if thers is a successful response
to the XMLhttpRequest call. */
            new Ajax.Updater({success:placeHolderID},url,{
                        evalScripts: true
            });
}

For a full understanding of the above code, please read the Prototype documentation.

The Client Stuff

The final step is to include the Prototype Framework (which is just a JavaScript file) and the “GetTheFrag.js” files on the target page and then to add a call in the window.onload event passing in the URL of the source page and the ID of a <div> tag where the html fragment is to be placed. All this is about 7 lines in the page head tag.

    <script type="text/javascript" src="../Scripts/Prototype.js"></script> 
    <script type="text/javascript" src="../Scripts/GetThePage.js"></script>
    <script type="text/javascript">
        window.onload=function(){
        getAspx('http://TheDomain/TheSourcePage.aspx','TheContainerDiv'); 
        }
    </script>

The Solution

The structure of my target website now looks like this:

Root
    FolderOne (A Content Folder)
        TargetPageOne.html
    FolderTwo (Another Content Folder)
        TargetPageTwo.html
    Frags (Source Pages)
        SourcePageOne.html
        SourcePageTwo.html
    Online (ASP.netProject)
        FragmentPageOne.aspx
        FragmentPageTwo.aspx
        (Rest of project files)
    Scripts (theScripts repository)
        Prototype.js (the framework)
        GetTheFrag.js

I have imported source pages from my other domain, target pages with my new, minimal Ajax code, an ASP.Net project, and two JavaScript files – the Prototype framework and my small GetTheFrag file. (I omitted other script pages and css files et al for simplicity).

Points of Interest

You will notice that the source files are outside of the ASP.Net project. ASP.Net is quite happy to work with files that are in a folder outside of the project. Just get the virtual paths right and away you you. In my case it is simply a single ../. I have placed them all in a single "Frags" directory for simplicity.

I can not include a link to either a working copy of the source and target websites as they currently only exist on our development server and are not live yet. When they are live I will come back and update this article with links.

Prototype is an open source JavaScript Ajax Framework developed by Sam Stephenson and the Prototype Core Team.
The Prototype Ajax framework is available from http://www.prototypejs.org/

Disclaimer

I have no association with the Prototype Core Team. I don't know anyone on the team or even anyone who knows anyone on the team.

History

License

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

About the Author

RCoate

Location:

Australia

Using the Prototype Ajax Framework with HTML and an ASP.Net web project