Dynamic Generation of Tabs to Host IFrames using jQuery and Json in ASP.NET MVC

<%@ Page Language="C#"
    MasterPageFile="~/Views/Shared/Site.Master"
    Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="TitleContent"
    ContentPlaceHolderID="TitleContent" runat="server">
    IFrame host with dynamically generated jQuery Tabs
</asp:Content>

<asp:Content ID="MainContent"
    ContentPlaceHolderID="MainContent" runat="server">

<!-- This is the place holder for the dynamically generated tabs -->
<div id="MainTabs" class="FluidContent">
    <div id="divTabs" class="iframeMax"></div>
</div>

<script type="text/javascript">
    var GetTabsUrl = '<%: Url.Action("GetTabs", "Home") %>';
    var IFrameContainerUrl = '<%: Url.Action("IFrameContainer", "Home") %>';

    $(document).ready(function () {

        $.ajax({
            cache: false,
            type: "POST",
            url: GetTabsUrl,
            dataType: "json",
            success: function (data) {
                var GenerateTabs = function () {
                    var tabui = document.createElement("ul");
                    $.each(data, function () {
                        var li = document.createElement("li");
                        var a = document.createElement("a");
                        a.href = IFrameContainerUrl + "?WebURL="
                            + escape(this.TabUrl)
                            + "&InformationText="
                            + escape(this.TabInformationText);
                        var span = document.createElement("span");
                        $(span).attr("title", this.TabInformationText);
                        var tx = document.createTextNode(this.TabText);

                        span.appendChild(tx)
                        a.appendChild(span);
                        li.appendChild(a);
                        tabui.appendChild(li);
                    });

                    $("#divTabs").html("").append(tabui);

                    var $tabs = $("#divTabs").tabs({
                        cache: true,
                        selected: -1,
                        select: function (event, ui) {
                            return true;
                        }
                    }).ajaxComplete(function (event, request, settings) {
                        return;
                    });

                    if (data.length > 0) {
                        $tabs.tabs('select', 0);
                    }
                };

                GenerateTabs();
            },
            error: function (xhr) {
                var status = xhr.status;
                var responseText = xhr.responseText;
                alert("Error occurred when load the information for the tabs");
            }
        });

    });
</script>
</asp:Content>