Rendering Controls in XSLT - Umbraco

Thu, 23 Mar 2023 15:08:14 Z

This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.

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.

        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>

Shazwazza

Rendering Controls in XSLT - Umbraco