Using ucajax to render UserControls via WCF

I recently released an open source project called ucajax hosted on GitHub and also available via NuGet. The project’s main purpose is to render ASP.NET UserControls via web services, currently supporting WCF and WebMethods.   It also comes will a fully functional demo that consumes the NuGet package and can be viewed live here.

There are few limitations such as postbacks, it doesn’t support them.   Ucajax will also strip out resources/form tags…etc and only sends you the content of the UserControl.   This is done for a few reasons.  ASP.NET will get upset if new ViewState or forms get injected into the DOM that it doesn’t know about.

The simplest example is the Load Via Client WCF example.

1. Add ucajax to your project via NuGet:

2. Create a UserControl:

Markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControlSimple.ascx.cs" Inherits="ucajax.web.Controls.UserControlSimple" %>

<asp:label ID="lblTitle" Text="I am a simple UserControl using asp:label" runat="server"/><br>
<asp:label ID="lblTextProperty1Title" Text="TextProperty1 = " runat="server"/><asp:label ID="lblTextProperty1" Text="" runat="server"/>
<!--and some html--><br>
<asp:hyperlink ID="hlLinkToMe" Text="I am also using asp:hyperlink" NavigateUrl="https://github.com/rickschott/uc-ajax" runat="server"/><br>
<asp:label ID="lblReload" runat="server" Text="Wait 30 seconds and I will reload myself using all the sever-side parameters originally used." /><br>
<asp:label ID="lblDateTime" Text="" runat="server"/><br>
<asp:label ID="lblTextProperty2Title" Text="TextProperty2 = " runat="server"/><asp:label ID="lblTextProperty2" Text="" runat="server"/>

Code-behind:

namespace ucajax.web.Controls
{
    public partial class UserControlSimple : System.Web.UI.UserControl
    {
        public string TextProperty1 { get; set; }
        public bool TextProperty2 { get; set; }
        public bool AjaxAutoRefresh { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {
            lblTextProperty1.Text = TextProperty1;
            lblTextProperty2.Text = TextProperty2.ToString();
            lblDateTime.Text = "Oh, look at the time: " + DateTime.Now.ToString();
            lblReload.Visible = AjaxAutoRefresh;
        }
    }
}

3. Add some markup to a .aspx:

<div id="ajaxifyspinner" class="ajaxifyspinner">
    <asp:Image ID="imgResultsProgress" ImageAlign="Middle" runat="server" ImageUrl="~/Images/ajax-loader.gif" />
</div>
<div id="AJAXContent">
</div

4. Add some script that will render the UserControl:

var baseUrl = "";
    $(document).ready(function () {
        var model = new $.ucajax.viewModel($.ucajax.DICTIONARY_TYPE.WCF);
        model.ajaxControlViewModel.ControlPath = baseUrl + "Controls/UserControlSimple.ascx";
        model.ajaxControlViewModel.ControlParams.push(new model.keyValuePair("TextProperty1", "Set via JavaScript, rendered via WCF!"));
        model.ajaxControlViewModel.ControlParams.push(new model.keyValuePair("TextProperty2", "True"));
        model.ajaxControlViewModel.ControlParams.push(new model.keyValuePair("AjaxAutoRefresh", "True"));

        $().ucajax({ contentId: 'AJAXContent',
            postData: model,
            RESTUrl:  baseUrl + 'Service/AjaxContent.svc/GetAJAXControl',
            ajaxSpinnerId: 'ajaxifyspinner',
            autoRefresh: true
        });
    });

5. You now have a UserControl rendered via a WCF web service:

Now, go create something and tell me about, would love to hear your feedback!