Scenario: Your Umbraco content node has a WYSIWYG editor. You want to drop a .net control that does a postback (such as a competition form) into it.

 

The problem: Your page is rendered using XSLT, so your control renders out like this: <umbraco:Item runat='server' field='YourFieldName'/>

 

Solution:

Create your control, create a macro for it as usual. In your XSLT file just call umbraco.library:RenderMacroContent().

Eg.

<xsl:value-of select="umbraco.library:RenderMacroContent($ YourFieldName, $currentPage/@id)" disable-output-escaping="yes" />

 

Now there's a problem that you'll notice. What happened to the functionality of your control? It doesnt post back anymore. The solution? Old school AJAX!

 

The following example is for a basic competition form. It includes a single textbox, a required field validator and a submit button viewable to the user.

 

<script type="text/javascript">
    var compId = <%=CompID%>;

    $(document).ready(function() {
        var submitButton = $("#<%=btnSubmit.ClientID%>");
        var compIdField = $("#<%=hfCompID.ClientID%>");
        var compText = $("#<%=txtCompetition.ClientID%>");
        var validator = $("#<%=RequiredFieldValidator2.ClientID %>");      
        validator.hide();

        submitButton.click(function() {
            if (compText.val().length == 0) {
                validator.show();               
                return false;
            }
           
            $(this).hide();
            $("#AjaxLoader").show();
            compText.attr("disabled", "disabled");
           
            $.ajax({
                type: "POST",
                url: "/Services/AjaxExtenders.asmx/SubmitCompetitionEntry",
                data: "{'compId':'" + compId + "', 'msg':'" + compText.val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                  
                    if (msg.d) {
                        $("#divcompetition").html("<p>Thank you for your entry.</p>");
                    }
                    else {
                        $("#divcompetition").html("<p>You must be logged in to enter this competition. If you are not yet a member, you can register <a href='/public/member-registration.aspx'>here</a>.</p>");
                    }
                }
            });
            //stop propogation
            return false;
        });
        GetCompetitionDetails();
    });
   
   
    function GetCompetitionDetails() {
            $.ajax({
                type: "POST",
                url: "/Services/AjaxExtenders.asmx/GetCompetitionDetails",
                data: "{'compId':'" + compId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $("#divCompTitle").html("<h4 class='compTitle'>" + msg.d[0] + "</h4>");
                    $("#divCompDescription").html(msg.d[1]);
                }
            });
            //stop propogation
            return false;
        }
</script>