Tech Blog

Dynamically Loading UserControls from jQuery with Parameters

jQuery is an extremely popular javascript libary and by using its powerful Ajax interface, there are limitless possibilities when it comes to creating responsive and flexible web services.

I recently implemented an RSS reader that is dynamically loaded via jQuery and its Ajax interface.

My implementation is implemented to be reusable and to be as general as possible. The implementation is based on dynamically loading a user control page (RSSReaderControl.ascx) using jQuery. I also implemented a way to pass parameters to the usercontrol via jQuery.

The coolest thing is that everything works seamlessly with Lumino Publish - our CMS system. An RSS feed can now be implemented by simply copying and pasting a few lines of jQuery into a page (called article in Lumino Publish), and voila - you have an RSS feed on that page.

Here is what you have to do to make this work. First you make an ASP.NET Forms page - an "aspx" page. I˙ve called this page "LoadUserControl.aspx" and its code-behind file is then called "LoadUserControl.aspx.cs". Here is a screenshot of how the page looks after loading an RSS feed into the page.

RSS feed med jQuery » Lumino Webdesign & SEO

RSS feed med jQuery » Lumino Webdesign & SEO

And now on to the coding. Here are the two files for "LoadUserControl":

Here is the LoadUserControl.aspx:



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoadUserControl.aspx.cs" Inherits="LoadUserControl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

And here is the LoadUserControl.aspx.cs:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class LoadUserControl : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    [System.Web.Services.WebMethod]
    public static string UserControlLoader(string userControlName, string userControlParameter)
    {
        Page page = new Page();
        LoadUserControlHelper userControl = (LoadUserControlHelper)page.LoadControl(userControlName);
        userControl.UserControlParameter = userControlParameter;
        userControl.EnableViewState = false;
        HtmlForm form = new HtmlForm();
        form.Controls.Add(userControl);
        page.Controls.Add(form);
        StringWriter textWriter = new StringWriter();
        HttpContext.Current.Server.Execute(page, textWriter, false);
        return textWriter.ToString();
    }
}

There are a couple of important things going on in the above code. First of all, you have to declare the method that will be called from jQuery as a "System.Web.Services.WebMethod". This is done using brackets and placing this declaration right above the method that will be called from jQuery. Second, the method is declared using the "static" modifier. This is required for the method to work.

Further, the above code takes two parameters. One parameter is the name - or the URL - of the user control that will be called. The second parameter is an optional parameter - if you want to pass in a parameter it can be done using the "userControlParameter". More than one parameter can be passed using a delimiter such as a semicolon (";"). I only use one parameter in my implementation, but since this is a general implementation for loading user controls onto a web page, there might be other applications that will require more than one parameter (and you can figure out how to add more than one parameter).

Then there is the user control that will display the RSS feed. You may actually call any user control using the above code (LoadUserControl.aspx/cs), however, in my implementation I wrote a user control that displays RSS feed from any RSS source onto a web page.

Here is the user control - RSSReaderControl.ascx:


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RSSReaderControl.ascx.cs" Inherits="RSSReaderControl" %>
<asp:ListView runat="server" ID="PostList">
  <LayoutTemplate>
    <ul>
      <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
    </ul>
  </LayoutTemplate>
  <ItemTemplate>
    <li><a href='<%# Eval("Link") %>'><%# Eval("Title") %></a>
    </li>
  </ItemTemplate>
</asp:ListView>

And here is RSSReaderControl.ascx.cs:


using System;
using System.Linq;
using System.Xml.Linq;
public partial class RSSReaderControl : LoadUserControlHelper
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //UserControlParameter is defined in LoadUserControlHelper. 
        //It is a string containing any parameter that is sent in using jQuery Ajax "data" option.
        XDocument feedXML = XDocument.Load(UserControlParameter);
        var feeds = from feed in feedXML.Descendants("item")
            select new
            {
                Title = feed.Element("title").Value,
                Link = feed.Element("link").Value,
                //Description = feed.Element("description").Value
            };
        PostList.DataSource = feeds.ToList();
        PostList.DataBind();
    }
}

In the above code you see that the user control consist of a ListView and the code behind will insert elements into that ListView. One important thing that should catch your attention here is the use of "LoaduserControlHelper" in "Public partial class RSSReaderControl : LoadUserControlHelper". I have actually made a helper file - and this is the trick to pass parameters between the page (aspx.cs file) and the user control (ascx.cs file). Before explaining how this works, I will just show you the helper file:

Here is LoadUserControlHelper.cs. This sits in the "App_Code" directory.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for LoadUserControlHelper
/// </summary>
public class LoadUserControlHelper : System.Web.UI.UserControl
{
	public LoadUserControlHelper()
	{
		//
		// TODO: Add constructor logic here
		//
	}
    private string _userControlParameter;
    public string UserControlParameter
    {
        get { return _userControlParameter; }
        set { _userControlParameter = value; }
    }
}

As you can see, the only thing this file does is to declare a public variable called "UserControlParameter". Remember we used this parameter in the RSSReaderControl.ascx.cs file above? Well, by making a helper file and declaring this variable there, we will be able to pass parameters between a page and a user control.

What remains now is the jQuery part. This is the part that resides locally, and is actually inserted (as HTML) into our CMS (Content Management System) - Lumino Publish. Here is the content that I paste into an article using Lumino Publish. You can of course also put this part of the code into an HTML document and it will still work as expected.


<style type="text/css">

    #RSSBlock

    {

    display: block;

    position: relative;

    float: left;

    border: 1px solid #666;

    width: 450px;

    height: 250px;

    overflow-y: auto;

    overflow-x: hidden;

    }

    #RSSContent { width: 100%; height: 100%; }

    #RSSBlock .loading { background: url('/images/progress-indicator.gif') no-repeat center; }

    #RSSBlock ul { list-style-type: none; line-height: 1.1em; font-size: 12px; margin: 0px; padding: 10px 10px 10px 10px; }

    #RSSBlock ul li { padding: 0px; margin: 0px; margin-bottom: 10px; }

    #RSSBlock a:link {  }

</style>

<script type="text/javascript">

       $(document).ready(function () {

               $.ajax({

                   type: "POST",

                   url: "/LoadUserControl.aspx/UserControlLoader",

                   data: MakeParameterList(["userControlName", "/RSSReaderControl.ascx", "userControlParameter", "http://www.luminowebdesign.com/rss"]),

                   contentType: "application/json; charset=utf-8",

                   dataType: "json",

                   success: function (response) {

                      $('#RSSContent').removeClass('loading');

                       $('#RSSContent').html(response.d);

                   },

                   failure: function (msg) {

                       $('#RSSContent').html(msg);

                   }

               });

       });      

</script>

<div id="RSSBlock">

<div class="loading" id="RSSContent"></div>

</div>

The important part here is the part that starts with "$(document).ready..." All the action takes place in this code block - you see I declare the url of the LoadUserControl.aspx/UserControlLoader WebMethod as well as making a parameter list. The "MakeParameterList" function is a javascript function that looks like this:


function MakeParameterList(paramArray) {
    //-------------------------------------------------------------------------+
    // Create list of parameters in the form:                                  |
    // {"paramName1":"paramValue1","paramName2":"paramValue2"}                 |
    //-------------------------------------------------------------------------+
    var paramList = '';
    if (paramArray.length > 0) {
        for (var i = 0; i < paramArray.length; i += 2) {
            if (paramList.length > 0) paramList += ',';
            paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"';
        }
    }
    paramList = "{" + paramList + "}";
    return paramList;
}

The function MakeParameterList will create a parameter list according to the json specifications which is required by the jQuery Ajax interface.

And that is pretty much it! Hope this can help you in your projects :)

And - if you like my code examples, then I would appreciate if you LIKED me on Lumino˙s Facebook page - or wrote a comment here.

André Vold

04.04.2012

Kommentar

Skriv kommentar

André Vold

Here's a short little BLOGGER BIO to tell you a little bit about my background - and why I chose to get into programming and SEO.

I grew up in Norway, but went to school in the U.S. I have a degreen in computer science from Arizona State University. After graduating I moved back to Norway where I got a job working at Norwegian Data and later IBM. I went on to do a Masters of Management at BI in Oslo. After several years as a senior executive at IBM I decided to start my own company, Apropos Internet. In 2004 I started Virosafe Norway, a company that imports and distributes data security products, and now I am CEO of Lumino as well.

It's always been essential for me to stay up to date on the latest trends and developments in technology - not only to stay current as a programmer, but also to ensure my success as an entrpreneur. Lumino blog articles contain a variety of topics that have been useful for my own businesses - perhaps you will find them useful as well.