MVC dynamically generate Tabs and Content with JQuery support [Answered] RSS

• • Reply
  priyalwalpit...

  Member

  163 Points

  42 Posts

  MVC dynamically generate Tabs and Content with JQuery support

  May 31, 2017 04:30 AM|priyalwalpita|LINK

  Hi, 

  I do have a following json in my MVC controller and I need to build a tabbed user interface dynamically from this json. What I need to achieve is something like in attached picture. I need to call few jquery functions upon clicking those dynamically generated buttons. It would be great if someone can refer me the code for this. 

  JSON in the Controller. 

  {
    "Tabs": {
      "Tab": [
        {
          "name": "section1",
          "Widget": [
            {
              "id": "1",
              "type": "pushbutton",
              "name": "Mybutton1",
              "LinkedPin": "1"
            },
            {
              "id": "2",
              "type": "pushbutton",
              "name": "Mybutton2",
              "LinkedPin": "2"
            },
            {
              "id": "3",
              "type": "togglebutton",
              "name": "Mybutton3",
              "LinkedPin": "3"
            }
          ]
        },
        {
          "name": "section2",
          "Widget": [
            {
              "id": "4",
              "type": "togglebutton",
              "name": "Mybutton4",
              "LinkedPin": "4"
            },
            {
              "id": "5",
              "type": "togglebutton",
              "name": "Mybutton5",
              "LinkedPin": "5"
            }
          ]
        }
      ]
    }
  }

  Image File Link :  https://docs.google.com/uc?id=0B-Zcom9RVKUybkY4M3hWTkl2aVk

  Thanks in advance 

• • Reply
  Jean Sun

  Contributor

  6490 Points

  2525 Posts

  Re: MVC dynamically generate Tabs and Content with JQuery support

  Jun 01, 2017 07:05 AM|Jean Sun|LINK

  Hi priyalwalpita,

  I use the following steps to do this:

  1. Create some models based on the json string.

      public class MyTabs
      {
          [JsonProperty("Tabs")]
          public Tab Tabs { get; set; }
      }
  
      public class Tab
      {
          [JsonProperty("Tab")]
          public Section[] sections { get; set; }
         
      }
  
      public class Section
      {
          public string name { get; set; }
          [JsonProperty("Widget")]
          public WidgetItem[] Widget { get; set; }
      }
  
      public class WidgetItem
      {
          public int id { get; set; }
          public string type { get; set; }
          public string name { get; set; }
          public string LinkedPin { get; set; }
      }

  2. Convert the json string to the Model data in controller:

          public ActionResult Tab()
          {
              var tabs = new MyTabs();
              //I store the json string in a local json file
              using (StreamReader sr = new StreamReader(Server.MapPath("~/Content/tab.json")))
              {
                  tabs = JsonConvert.DeserializeObject<MyTabs>(sr.ReadToEnd());
              }
              return View(tabs);
          }

  3. Pass the model to view and display it in view, bind click event to the buttons.

  @model OneMany.Controllers.MyTabs
  @{
      ViewBag.Title = "Tab";
  }
  
  <h2>Tab</h2>
  <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
  
  <div id="tabs">
  
      <ul>
          @foreach (var tabitem in Model.Tabs.sections)
          {
              <li><a href="#@tabitem.name">@tabitem.name</a></li>
          }
      </ul>
      @foreach (var tabitem in Model.Tabs.sections)
      {
          <div id="@tabitem.name">
              @foreach (var buttonitem in tabitem.Widget)
              {
                  <input type="button" name="@buttonitem.name" value="@buttonitem.name" class="tabbutton"/><br/>
              }
          </div>
      }
  
  </div>
  
  
  @section scripts{
  
  <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
      <script type="text/javascript">
          $(function () {
              $("#tabs").tabs();
              //bind click event to the button
              $(".tabbutton").click(function () {
                  alert("Test Click");
              })
          });
      </script>
  }

  How it works on my side:

  

  Best Regards,

  Jean

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  priyalwalpit...

  Member

  163 Points

  42 Posts

  Re: MVC dynamically generate Tabs and Content with JQuery support

  Jun 01, 2017 08:35 AM|priyalwalpita|LINK

  Thanks a lot Jean ! I managed to run this perfectly :)