Sibeesh Passion

Top Menu

  • Home
  • Communities
  • Search
  • About

Main Menu

  • Articles
    • Azure
    • JavaScript
    • Angular
    • Node JS
    • Web API
    • Career Advice
    • Interview
    • JQuery
    • Knockout JS
    • Jasmine Framework
    • Database
    • SQL
    • MongoDB
    • MySQL
    • Tools
    • IIS
    • Wamp Server
    • WordPress
    • Visual Studio
    • ASP.NET
    • MVC
    • PHP
    • SEO
    • HTML5
    • Office Development
  • Controls
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • Medium
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect with Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
  • Awards
  • SibeeshVenu.com
  • Home
  • Communities
  • Search
  • About

logo

Sibeesh Passion

  • Articles
    • Azure
    • JavaScript
    • Angular
    • Node JS
    • Web API
    • Career Advice
    • Interview
    • JQuery
    • Knockout JS
    • Jasmine Framework
    • Database
    • SQL
    • MongoDB
    • MySQL
    • Tools
    • IIS
    • Wamp Server
    • WordPress
    • Visual Studio
    • ASP.NET
    • MVC
    • PHP
    • SEO
    • HTML5
    • Office Development
  • Controls
    • Ignite_UI_Chart_Control

      Working With IgniteUI Chart igDataChart Control

      July 14, 2016
      0
    • Apply License Key

      Working With IgniteUI Grid Control

      July 10, 2016
      0
    • Grid with check box selection

      Implement radio button selection in JQWidgets JQXGrid using checkbox

      June 29, 2016
      0
    • High Chart

      Client Side Exporting In HighChart

      May 27, 2016
      0
    • Dynamically apply colour coding in Grid

      Dynamically Apply Colour Coding in Grid With Dynamic Headers And Data

      February 16, 2016
      0
    • Dynamically apply colour coding in Grid

      Remove Time Stamp Form Legend In HighChart

      January 25, 2016
      0
    • Select NuGet Package

      Using MVC Grid In MVC

      December 11, 2015
      0
    • Column values to a href

      a href Columns In Grid

      November 11, 2015
      0
    • Load Data On Scroll

      Load Data To Grid On Sroll

      November 2, 2015
      0
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • Medium
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect with Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
    • Bing Speech And Translate Text

      Webinar: Let us Build a Speech, Translation API using AZURE Bing Speech ...

      June 30, 2018
      0
    • Text Translator Api Thumbnail

      Video: Azure Cognitive Services Text Translator API

      June 30, 2018
      0
    • Bing Speech Api Thumbnail

      Video: Azure Cognitive Services - Bing Speech API

      June 30, 2018
      0
    • Video: 21 Easy Tips for Healthy Life

      February 22, 2018
      0
    • Azure Face API

      Webinar: Azure Cognitive Service Face API

      July 23, 2017
      0
    • Custom Stylish Handlebar Mirror in Royal Enfield Thunderbird

      June 25, 2017
      0
    • Wrapping Rope in Royal Enfield Crash Guard Or Bumper

      April 22, 2017
      0
    • How to Change Handlebar in Royal Enfield Thunderbird

      April 22, 2017
      0
    • Video: How to be a successful software engineer

      April 22, 2017
      0
  • Awards
  • SibeeshVenu.com
  • Create Your Own Cryptocurrency in Private Consortium Network Ethereum Azure Blockchain

  • Detect Noise Level Audio Decibels in MXChip Azure IoT DevKit

  • Deploy Angular App Using Azure DevOps Build and Release Pipelines

  • MXChip Device with Pressure, Humidity, Temperature Info using Azure IoT Workbench

  • Realtime IoT Data using Azure SignalR and Functions in Angular

AngularArticle
Home›Angular›How To Create Dynamic Angular JS Tabs In MVC

How To Create Dynamic Angular JS Tabs In MVC

By SibeeshVenu
February 16, 2016
3094
0
Share:
Dynamic Angular JS Tabs In MVC Figure 1

In this post we will see how we can create Angular JS dynamics tabs in MVC application. As you all are aware of that we have a tab control in Angular JS, here we are going to see how those tabs can be created dynamically with some dynamic data, these dynamic data can be fetched from database. Here I am creating some dynamic data accordingly for making this article easy to understand. We will be creating Angular JS app, controller, service to fetch the data from our MVC controller. Once that is done, we will format the data and assign it to the tab control. Sounds good?. I hope you will like this article.

Download Source Code

Download the source code from here: Dynamic Angular JS Tabs In MVC

Background

Recently I have got a requirement to create a tab control in one of my Angular JS application. Then I thought of creating the same dynamically according to the user needs. This article is a demo of the same.

Using the code

First, we will start with creating an MVC application. Open your visual studio, then click File->New->Project. Name your project.

Now our application is launched, please go ahead and install Angular JS in your project from NuGet packages. You can see some new CSS files and scripts has been added to our project. So the set up has been done. Now what we need to do is to move on the coding part.

Create a controller

Now we can create a new controller, in my case I created a controller ‘HomeController’. In my controller I am going to call a model action which will return some dynamic data. See the code below.

public class HomeController : Controller
    {
        //
        // GET: /Home/

         public ActionResult Index()
        {
            return View();
        }
        public JsonResult TabData()
        {
            Test t = new Test();
            var myList = t.GetData();
            return Json(myList, JsonRequestBehavior.AllowGet);
        }

    }

Here we have one ActionResult and one JsonResult which we are going to call as Angular JS service. As you can see I am creating an instance of my model Test, now we will create our model class. Shall we?

Create Model

I have create a model class with the name Test. Here I am creating some data dynamically using a for loop and assign those values to a list. Please see the codes below.

namespace AsyncActions.Models
{
    public class Test
    {
        public List<Customer> GetData()
        {
            try
            {
                List<Customer> cst = new List<Customer>();
                for (int i = 0; i < 15; i++)
                {
                    Customer c = new Customer();
                    c.CustomerID = i;
                    c.CustomerCode = "CST" + i;
                    cst.Add(c);
                }
                return cst;
            }
            catch (Exception)
            {
                throw new NotImplementedException();
            }

        }
    }
    public class Customer
    {
        public int CustomerID { get; set; }
        public string CustomerCode { get; set; }
    }
}

As you can see I am creating a list of type Customer. Is that fine? Now what is pending? Yes, a view.

Create a view

Right click on your controller and click add view, that will give you a new view in your view folder. Hope you get that.

So our view is ready, now we can do some codes in our view to populate our tab. Are you ready?

<div ng-controller="tabController" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="tab">
    <md-content class="md-padding">
    <md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
      <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">
        <div class="demo-tab tab{{$index}}" style="padding: 25px; text-align: center;">
          <div ng-bind="tab.content"></div>
          <br>
          <md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
        </div>
      </md-tab>
    </md-tabs>
  </md-content>
    <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
        <div layout="row" layout-sm="column">
            <div flex="" style="position: relative;">
                <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
            </div>
            <md-input-container>
        <label for="label">Label</label>
        <input type="text" id="label" ng-model="tTitle">
      </md-input-container>
            <md-input-container>
        <label for="content">Content</label>
        <input type="text" id="content" ng-model="tContent">
      </md-input-container>
            <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
        </div>
    </form>
</div>

As you can see we are declaring our angular js controller and app name as follows.

ng-controller="tabController" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="tab"

Now we will add the needed reference to our view.

Add the style sheet references

<link href="~/CSS/angular-material.css" rel="stylesheet" />
<link href="~/CSS/docs.css" rel="stylesheet" />

Add styles for tabs

<style>
    .tabsdemoDynamicTabs md-content {
        background-color: transparent !important;
    }

        .tabsdemoDynamicTabs md-content md-tabs {
            border: 1px solid #e1e1e1;
        }

            .tabsdemoDynamicTabs md-content md-tabs md-tab-content {
                background: #f6f6f6;
            }

            .tabsdemoDynamicTabs md-content md-tabs md-tabs-wrapper {
                background: white;
            }

        .tabsdemoDynamicTabs md-content h1:first-child {
            margin-top: 0;
        }

    .tabsdemoDynamicTabs md-input-container {
        padding-bottom: 0;
    }

    .tabsdemoDynamicTabs .remove-tab {
        margin-bottom: 40px;
    }

    .tabsdemoDynamicTabs .demo-tab > div > div {
        padding: 25px;
        box-sizing: border-box;
    }

    .tabsdemoDynamicTabs .edit-form input {
        width: 100%;
    }

    .tabsdemoDynamicTabs md-tabs {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

    .tabsdemoDynamicTabs md-tab[disabled] {
        opacity: 0.5;
    }

    .tabsdemoDynamicTabs label {
        text-align: left;
    }

    .tabsdemoDynamicTabs .long > input {
        width: 264px;
    }

    .tabsdemoDynamicTabs .md-button.add-tab {
        transform: translateY(5px);
    }
</style>

Add the JS references

<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-animate.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-aria.min.js"></script>
<script src="~/Scripts/angular-messages.min.js"></script>
<script src="~/Scripts/svg-assets-cache.js"></script>
<script src="~/Scripts/angular-material.js"></script>
<script src="~/Scripts/Module.js"></script>

Here Module.js is the file where we are creating our Angular JS controller, Service, App. So can we go ahead and create those?

Create an app, controller, service in Angular JS

To add an app, controller, servicer in Angular JS, you need to add the codes as below.

(function () {
    'use strict';
    var app;
    (function () {
        //create app
        app = angular.module("tab", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
        //create controller
        app.controller('tabController', function ($scope, tabService) {
            var serv = tabService.getAll();
            serv.then(function (d) {
                tabController(d.data, $scope);
            }, function (error) {
                console.log('Something went wrong, please check after a while');
            })
        });
        //create service
        app.service('tabService', function ($http) {
            this.getAll = function () {
               return $http({
                    url: "/Home/TabData", //Here we are calling our controller JSON action
                    method: "GET"
                });
            };
        });
    })();
})();

As you can see once we get the data from the Angular JS service (tabService) to the controller (tabController), we are passing the data to a function named tabController. Below is the code for that function.

function tabController(data, $scope) {
        var tabsArray = [];
        for (var i = 0; i < data.length; i++) {
            tabsArray.push(
                {
                    'title':"Customer ID: "+ data[i].CustomerID,
                    'content': data[i].CustomerCode + " The data you are seeing here is for the customer with the Custome rCode " + data[i].CustomerCode
                });
        }
        var tabs = tabsArray,
            selected = null,
            previous = null;
        $scope.tabs = tabs;
        $scope.selectedIndex = 0;
        $scope.$watch('selectedIndex', function (current, old) {
            previous = selected;
            selected = tabs[current];
        });
        $scope.addTab = function (title, view) {
            view = view || title + " Content View";
            tabs.push({ title: title, content: view, disabled: false });
        };
        $scope.removeTab = function (tab) {
            var index = tabs.indexOf(tab);
            tabs.splice(index, 1);
        };
    }

That’s all we have created the Angular JS tabs dynamically. Shall we see the output now?

Output

Dynamic Angular JS Tabs In MVC Figure 1

Dynamic Angular JS Tabs In MVC Figure 1

Dynamic Angular JS Tabs In MVC Figure 2

Dynamic Angular JS Tabs In MVC Figure 2

References

Angular JS Tabs

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

TagsAngular directivesAngular JSAngular JS TabsMVC
Previous Article

Web API With Angular JS

Next Article

Dynamically Apply Colour Coding in Grid With ...

0
Shares
  • 0
  • +
  • 0
  • 0
  • 0
  • 0

SibeeshVenu

I'm neither an expert nor a guru. I have been awarded Microsoft MVP 3times, C# Corner MVP 4 times, DZone MVB. I always love to learn new technologies, I believe the one who stops learning is old. You are always welcome to ask any doubts if you have any, I would be more than happy to help. Please feel free to follow me on any social media network, I really like to get connected with you.

Related articles More from author

  • Basics of Angular JS: Image 1
    AngularArticleHow to

    Basics of AngularJS

    March 29, 2015
    By SibeeshVenu
  • Web API Controller With Async Actions
    ArticleASP.NETWeb API

    Web API With HttpClient Or Consume Web API From Console Application

    March 28, 2016
    By SibeeshVenu
  • AngularArticle

    AngularJS: When/Where to Load Files

    June 17, 2015
    By SibeeshVenu
  • Insertion_In_Table
    AngularArticleSQLWeb API

    TagIt Control With Data From Database Using Angular JS In MVC Web API

    February 25, 2016
    By SibeeshVenu
  • ArticleCodeProjectMVC

    Uploading and Downloading in MVC Step-by-Step

    June 14, 2015
    By SibeeshVenu
  • Convert XML To JSON In Angular JS
    AngularArticle

    Convert XML to JSON In Angular JS

    November 3, 2015
    By SibeeshVenu

Leave a reply Cancel reply

0

MICROSOFT MVP (3)

profile for Sibeesh Venu - Microsoft MVP

Recent Posts

  • Create Your Own Cryptocurrency in Private Consortium Network Ethereum Azure Blockchain
  • Detect Noise Level Audio Decibels in MXChip Azure IoT DevKit
  • Deploy Angular App Using Azure DevOps Build and Release Pipelines
  • MXChip Device with Pressure, Humidity, Temperature Info using Azure IoT Workbench
  • Realtime IoT Data using Azure SignalR and Functions in Angular
  • IoTHubTrigger Azure Function and Azure IoT Hub
  • Azure Function as Output Job Topology of an Azure Stream Analytics Job
  • Azure Stream Analytics Job and Tools for Visual Studio
  • An Introduction to Azure Stream Analytics Job
  • Raspberry PI SD Card Provisioning with Windows 10 IoT Core – Adding Packages to the Existing FFU Image

Archives

  • January 2019 (4)
  • December 2018 (6)
  • November 2018 (8)
  • October 2018 (5)
  • July 2018 (4)
  • June 2018 (4)
  • May 2018 (2)
  • April 2018 (3)
  • March 2018 (4)
  • February 2018 (4)
  • January 2018 (1)
  • December 2017 (3)
  • November 2017 (3)
  • October 2017 (1)
  • September 2017 (2)
  • July 2017 (3)
  • June 2017 (3)
  • May 2017 (7)
  • April 2017 (9)
  • March 2017 (9)
  • February 2017 (2)
  • January 2017 (4)
  • December 2016 (2)
  • November 2016 (2)
  • October 2016 (1)
  • August 2016 (1)
  • July 2016 (7)
  • June 2016 (9)
  • May 2016 (11)
  • April 2016 (6)
  • March 2016 (14)
  • February 2016 (15)
  • January 2016 (11)
  • December 2015 (8)
  • November 2015 (16)
  • October 2015 (22)
  • September 2015 (11)
  • August 2015 (20)
  • July 2015 (27)
  • June 2015 (35)
  • May 2015 (51)
  • April 2015 (10)
  • March 2015 (9)
  • January 2015 (17)
  • December 2014 (5)
  • November 2014 (2)
  • October 2014 (3)
  • August 2014 (1)
  • July 2014 (1)
  • December 2013 (1)

Categories

  • Achievements (34)
    • Microsoft MVP (1)
  • ADO.NET (1)
  • Android (1)
  • Angular (26)
  • Arduino (2)
  • Article (255)
  • Article Of The Day (3)
  • ASP.NET (35)
  • Asp.Net Core (2)
  • Automobile (5)
  • Awards (8)
  • Azure (34)
    • Azure CDN (1)
    • Cognitive Services (3)
      • Translator Text (1)
    • Virtual Machine (4)
  • Blockchain (1)
  • Blog (14)
  • Browser (1)
  • C-Sharp Corner (17)
    • Monthly Winners (1)
      • October 2015 (1)
  • C# (19)
  • Career Advice (10)
  • Code Snippets (53)
  • CodeProject (31)
  • CSS (6)
  • CSS3 (5)
  • Database (36)
    • MongoDB (5)
    • MySQL (3)
    • SQL (28)
      • SSAS (2)
    • SQL Server (11)
  • Docker (2)
  • Drawings (1)
  • Excel Programming (3)
  • Fun (1)
  • How to (35)
  • HTML (5)
  • HTML5 (18)
    • Storage In HTML5 (2)
  • IIS (3)
  • Interview (6)
  • IoT (11)
  • JavaScript (15)
  • JQuery (77)
    • Exporting (1)
    • jQuery UI (1)
  • Json (7)
  • Knockout JS (2)
  • Linux (1)
  • Machine Learning (1)
  • Microsoft (8)
    • Microsoft Windows Server (1)
    • Outlook (2)
    • Skype (1)
    • Web Platform Installer (1)
    • WebMatrix (1)
  • Microsoft ADOMD (7)
    • MDX Query (3)
  • Microsoft Office (7)
  • Microsoft Technologies (7)
    • Office Development (5)
  • Microsoft Windows (9)
    • Windows 10 (5)
    • Windows 7 (1)
    • Windows 8.1 (2)
  • Mobile (2)
  • Mobile Brands (1)
    • One Plus (1)
  • MVC (6)
  • News (12)
  • Node JS (5)
  • npm (1)
  • Number Conversions (1)
  • Page (1)
  • PHP (3)
  • Poems (1)
    • Malayalam Poems (1)
  • Products (36)
    • High Map (2)
    • HighChart (8)
      • Drill Down Chart (1)
    • Ignite UI (2)
    • JQWidgets (19)
      • JQX Grid (18)
    • MVC Grid (1)
    • Spire.Doc (1)
    • Spire.PDF (1)
    • Spire.XLS (2)
  • Q&A (7)
  • Raspberry PI (5)
  • React (2)
  • SEO (2)
  • SharePoint (2)
  • Social Media (1)
    • Facebook (1)
  • Software (1)
    • Third Party Software Apps (1)
  • Stories (6)
    • English (2)
    • Malayalam (3)
  • Tips (2)
  • Tools (19)
    • GitHub (1)
    • SSMS (1)
    • Visual Studio (12)
      • Visual Studio 2017 (8)
  • Uncategorized (1)
  • Unit Testing (2)
  • VB.Net (1)
  • Videos (17)
  • Wamp Server (3)
  • Web API (12)
  • Webinars (1)
  • Wordpress (9)

ABOUT ME

I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.  If you would like to know more about me, you can read my story here.

Follow me

CONTACT ME

  • X 384 / A, Katrikkal House, Vembilly Post, Kunnathunadu Panchayat, Ernakulam - 683565, Kerala, India
  • 08893 08893 2
  • info@sibeeshpassion.com

Optin Form

Tags

Achievements ADOMD Angular Angular 5 Angular JS article Article Of The Day Asp.Net Azure Azure IoT C# c-sharp corner Career Advice chart CSharp CSS CSS3 HighChart How To HTML5 HTML5 Chart Interview IoT IoT Hub Javascript JQuery jquery functions JQWidgets JQX Grid Json Microsoft MVC MVP MXChip News Products SQL SQL Server Visual Studio Visual Studio 2017 VS2017 Web API Windows Windows 10 Wordpress
  • Home
  • About
  • Communities
  • Search
© Copyright Sibeesh Passion 2018-2019. All Rights Reserved.