Click here to Skip to main content
12,448,720 members (52,061 online)
Click here to Skip to main content
Articles » Web Development » Ajax » Samples » Downloads

Stats

29.5K views
1.4K downloads
25 bookmarked
Posted

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

, 1 Oct 2010 CPOL
This article introduces a method to dynamically generate 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>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dr. Song Li
United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

You may also be interested in...

Pro
Pro
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 1 Oct 2010
Article Copyright 2010 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid