{"id":15703839,"url":"https://github.com/jqwidgets/aspnetcore-mvc-tag-helpers","last_synced_at":"2026-03-12T00:06:12.951Z","repository":{"id":86661611,"uuid":"70594519","full_name":"jqwidgets/AspNetCore-Mvc-Tag-Helpers","owner":"jqwidgets","description":null,"archived":false,"fork":false,"pushed_at":"2018-02-12T17:08:39.000Z","size":7358,"stargazers_count":6,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-23T11:50:57.107Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jqwidgets.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-11T13:10:25.000Z","updated_at":"2019-04-04T11:48:03.000Z","dependencies_parsed_at":"2023-02-28T13:45:44.928Z","dependency_job_id":null,"html_url":"https://github.com/jqwidgets/AspNetCore-Mvc-Tag-Helpers","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":"0.17647058823529416","last_synced_commit":"79adfbe0f8693668b3109839f2e57f63ffcf7420"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jqwidgets/AspNetCore-Mvc-Tag-Helpers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2FAspNetCore-Mvc-Tag-Helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2FAspNetCore-Mvc-Tag-Helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2FAspNetCore-Mvc-Tag-Helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2FAspNetCore-Mvc-Tag-Helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jqwidgets","download_url":"https://codeload.github.com/jqwidgets/AspNetCore-Mvc-Tag-Helpers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2FAspNetCore-Mvc-Tag-Helpers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30407852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T22:36:59.286Z","status":"ssl_error","status_checked_at":"2026-03-11T22:36:57.544Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T20:06:57.193Z","updated_at":"2026-03-12T00:06:12.934Z","avatar_url":"https://github.com/jqwidgets.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ASP .NET Core MVC Tag Helpers\r\n\r\n## What is a ASP .NET Core MVC Tag Helper?\r\n\r\nTag Helper enables server-side code to participate in creating and rendering HTML elements in Razor files.\r\n\r\n## ASP .NET Core MVC Demos\r\n\r\n[ASP .NET Core MVC Tag Helpers Demos page](http://www.jqwidgets.com/jquery-widgets-demo/demos/asp.net-core-mvc-tag-helpers/index.htm).\r\n\r\n## What Tag Helpers provide?\r\n\r\nIn general, HTML-friendly experience.\r\nRazor markup using Tag Helpers looks like standard HTML.\r\nFront-end designers familiar with HTML/CSS/JavaScript can edit\r\nRazor without learning C# Razor syntax. ASP .NET MVC Core\r\nTag Helpers make you more productive and able to produce more\r\nrobust, reliable, and maintainable code using information only\r\navailable on the server. With ASP .NET Tag Helpers, you also get\r\na rich IntelliSense environment for creating HTML and Razor markup.\r\n\r\n## Setup\r\n\r\n### 1. Create a new ASP .NET Core Web Application\r\n![alt text](http://aspcore.jqwidgets.com/bootstrap/tag-helpers/images/aspnetcore-net-project.png \"Tag Helpers 1\")\r\n\r\n![alt text](http://aspcore.jqwidgets.com/bootstrap/tag-helpers/images/aspnetcore-webapplication.png \"Tag Helpers 2\")\r\n\r\n### 2. Reference the Tag Helpers\r\n\r\nInstall the Tag Helper's Nuget package from https://www.nuget.org/packages/jQWidgets.AspNetCore.Mvc.TagHelpers/1.0.0.\r\n### 3. Update _ViewImports.cshtml\r\n\r\n```\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers\r\n@addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration\r\n```\r\n\r\n### 4. Build the Solution\r\n\r\nClick Build in the top menu bar of Visual Studio, then click Build Solution to Build the solution\r\n\r\n### 5. Add a Tag Helper to a Page\r\n\r\nWe can now add a Tag Helper to one of the views (pages).\r\nFor example, we will add the Tag Helper to Views\\Home\\About.cshtml.\r\nWhile typing, IntelliSense suggest the existing Tag Helpers:\r\n\r\n```html\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.Employee\u003e\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Grid Example\";\r\n}\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.edit.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.columns-resize.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.filter.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.selection.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.sort.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.pager.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.aggregates.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxgrid.grouping.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxmenu.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxlistbox.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxdropdownlist.js\"\u003e\u003c/script\u003e\r\n\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.Employee\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Grid Example\";\r\n}\r\n\r\n\u003cjqx-grid theme=\"@ViewData[\"Theme\"]\" sortable=\"true\" filterable=\"true\" auto-height=\"true\" width=\"850\" source=\"Model\"\u003e \r\n    \u003cjqx-grid-columns\u003e\r\n        \u003cjqx-grid-column column-group=\"name\" datafield=\"FirstName\" width=\"100\" text=\"First Name\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column column-group=\"name\" datafield=\"LastName\" width=\"100\" text=\"Last Name\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column datafield=\"Title\" width=\"150\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column datafield=\"Address\" width=\"200\"\u003e\u003c/jqx-grid-column\u003e \r\n        \u003cjqx-grid-column datafield=\"City\" width=\"150\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column datafield=\"Country\"\u003e\u003c/jqx-grid-column\u003e\r\n  \u003c/jqx-grid-columns\u003e\r\n    \u003cjqx-grid-column-groups\u003e\r\n        \u003cjqx-grid-column-group name=\"name\" text=\"Name\"\u003e\u003c/jqx-grid-column-group\u003e\r\n    \u003c/jqx-grid-column-groups\u003e\r\n\u003c/jqx-grid\u003e\r\n\r\n\r\n```\r\n\r\n## Bootstrap UI ASP.NET Core Tag Helpers\r\n\r\nFor those of you who use Twitter Bootstrap, we have yet another\r\ngood set of Tag Helpers. We developed more than two dozen Tag Helpers\r\nto help you use Bootstrap with the new ASP.NET MVC Core.\r\nYou can find more about the project, see a live demo and download\r\nthe library from our\r\n[Bootstrap Tag Helpers page](http://aspcore.jqwidgets.com/bootstrap).\r\n\r\n## Tag Helpers\r\n\r\n### Grid\r\n\r\nThe ```jqx-grid``` tag helper allows you to easily append and display a Grid to your web page and data bound to your web server's data source.\r\n\r\n```html\r\n\u003cjqx-grid theme=\"@ViewData[\"Theme\"]\" sortable=\"true\" filterable=\"true\" auto-height=\"true\" width=\"850\" source=\"Model\"\u003e \r\n    \u003cjqx-grid-columns\u003e\r\n        \u003cjqx-grid-column column-group=\"name\" datafield=\"FirstName\" width=\"100\" text=\"First Name\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column column-group=\"name\" datafield=\"LastName\" width=\"100\" text=\"Last Name\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column datafield=\"Title\" width=\"150\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column datafield=\"Address\" width=\"200\"\u003e\u003c/jqx-grid-column\u003e \r\n        \u003cjqx-grid-column datafield=\"City\" width=\"150\"\u003e\u003c/jqx-grid-column\u003e\r\n        \u003cjqx-grid-column datafield=\"Country\"\u003e\u003c/jqx-grid-column\u003e\r\n  \u003c/jqx-grid-columns\u003e\r\n    \u003cjqx-grid-column-groups\u003e\r\n        \u003cjqx-grid-column-group name=\"name\" text=\"Name\"\u003e\u003c/jqx-grid-column-group\u003e\r\n    \u003c/jqx-grid-column-groups\u003e\r\n\u003c/jqx-grid\u003e\r\n```\r\n\r\nThe Grid tag helper shares the same API members as the Javascript Grid widget i.e all properties, methods and events can be used. Additional properties for the ```jqx-grid``` tag helper are:\r\n\r\n```\r\ncreate - {{String}} which determines the URL called when a Grid row is added.\r\ndatafield-for - {{ModelExpression}} used for model binding and determines the column's bound member.\r\ndelete - {{String}} which determines the URL called when a Grid row is deleted.\r\nedit - {{String}} which determines the URL called when the Grid is edited.\r\ninstance - {{String}} which determines the javascript member within the Script tag which refers to the Grid's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.\r\nserver-processing - {{Boolean}} which determines whether server processing is enabled.\r\nsource-id - {{String}} which determines the data source's ID member.\r\nsource-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.\r\nsource-root - {{String}} which determines the data source's Root member.\r\nsource-total-records - {{Integer}} which determines the data source's TotalRecords member.\r\nsource-url - {{String}} which determines the data source's URL.\r\nsource-model - {{Model}} which determines the data source's Model.\r\n```\r\n\r\n```jqx-grid-columns``` tag helper should be defined within the ```jqx-grid``` tag helper and defines the Grid columns collection.\u003cbr /\u003e\r\n```jqx-grid-column``` tag helper should be defined within the ```jqx-grid-columns``` tag helper and defines a Grid column.\u003cbr /\u003e\r\n```jqx-grid-column-groups``` tag helper should be defined within the ```jqx-grid``` tag helper and defines the Grid columns hierarchy.\u003cbr /\u003e \r\n```jqx-grid-column-group``` tag helper should be defined within the ```jqx-grid-column-groups``` tag helper and defines a Grid column group.\u003cbr /\u003e\r\n\r\n### Bar Gauge\r\n\r\nThe ```jqx-bar-gauge``` tag helper adds a Bar Gauge component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbargauge.js\"\u003e\u003c/script\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Bar Gauge Example\";\r\n    List\u003cstring\u003e ranges = new List\u003cstring\u003e()\r\n    {\r\n        \"{ start-value: 0, end-value: 200, color: \\\"#000000\\\", opacity: 0.5 }\",\r\n        \"{ start-value: 200, end-value: 250, color: \\\"#000000\\\", opacity: 0.3 }\",\r\n        \"{ start-value: 250, end-value: 300, color: \\\"#000000\\\", opacity: 0.1 }\"\r\n    };\r\n    List\u003cdouble\u003e barGaugeValues = new List\u003cdouble\u003e()\r\n    {\r\n        102, 115, 130, 137\r\n    };\r\n}\r\n\u003cdiv class=\"example-description\"\u003eASP .NET MVC BarGauge Example\u003c/div\u003e\u003cbr /\u003e\r\n\u003cjqx-bar-gauge color-scheme=\"scheme02\" ranges=\"ranges\" values=\"barGaugeValues\" width=\"600\" height=\"600\" max=\"150\"\u003e\u003c/jqx-bar-gauge\u003e```\r\n```\r\n### Bullet Chart\r\n\r\nThe ```jqx-bullet-chart``` tag helper adds a Bullet Chart component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Bullet Chart Example\";\r\n    BulletChartDataObject pointer = new BulletChartDataObject()\r\n    {\r\n        Value = 270,\r\n        Label = \"Revenue 2016 YTD\",\r\n        Size = \"25%\",\r\n        Color = \"Black\"\r\n    };\r\n    BulletChartDataObject target = new BulletChartDataObject()\r\n    {\r\n        Value = 260,\r\n        Label = \"Revenue 2015 YTD\",\r\n        Size = \"4\",\r\n        Color = \"Black\"\r\n    };\r\n    BulletChartDataObject ticks = new BulletChartDataObject()\r\n    {\r\n        Position = \"both\",\r\n        Interval = 50,\r\n        Size = \"10\"\r\n    };\r\n    List\u003cBulletChartRange\u003e ranges = new List\u003cBulletChartRange\u003e()\r\n    {\r\n        new BulletChartRange()\r\n        {\r\n            StartValue = 0, EndValue = 200, Color = \"#000\", Opacity = 0.5\r\n        },\r\n        new BulletChartRange()\r\n        {\r\n            StartValue = 200, EndValue = 250, Color = \"#000\", Opacity = 0.3\r\n        },\r\n        new BulletChartRange()\r\n        {\r\n            StartValue = 250, EndValue = 300, Color = \"#000\", Opacity = 0.1\r\n        }\r\n    };\r\n}\r\n\u003clabel\u003eASP .NET MVC Core Bullet Chart Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-bullet-chart labels-format=\"c\" width=\"500\" height=\"80\" bar-size=\"40%\" pointer=\"pointer\" ticks=\"ticks\" ranges=\"ranges\" target=\"target\"  title=\"Revenue 2016 YTD\" description=\"(U.S. $ in thousands)\" \u003e\u003c/jqx-bullet-chart\u003e\r\n```\r\n\r\n### Button\r\n\r\nThe ```jqx-button``` tag helper adds a Button component to a web page.\r\n```jqx-repeat-button``` add a Repeat Button and ```jqx-toggle-button``` adds a toggle button\r\nto the web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Button, ToggleButton and RepeatButton Example\";\r\n}\r\n\u003clabel\u003eASP .NET MVC Button, ToggleButton and RepeatButton Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-button theme=\"@ViewData[\"Theme\"]\" on-click=\"@Url.Action(\"Increment\", \"TagHelpers\")\"\u003eButton\u003c/jqx-button\u003e\r\n\u003cjqx-toggle-button style=\"margin-left:20px;\" theme=\"@ViewData[\"Theme\"]\"\u003eToggle Button\u003c/jqx-toggle-button\u003e\r\n\u003cjqx-repeat-button style=\"margin-left:20px;\" on-click=\"@Url.Action(\"Increment\", \"TagHelpers\")\" theme=\"@ViewData[\"Theme\"]\"\u003eRepeat Button\u003c/jqx-repeat-button\u003e\r\n```\r\n\r\n### Button Group\r\n\r\nThe ```jqx-button-group``` tag helper adds a Button Group Chart component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ButtonGroup Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Button Group Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\nDefault Mode\u003cbr/\u003e\r\n\u003cjqx-button-group theme=\"@ViewData[\"Theme\"]\" id='jqxWidget'\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Left\r\n    \u003c/button\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Center\r\n    \u003c/button\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Right\r\n    \u003c/button\u003e\r\n\u003c/jqx-button-group\u003e\r\nRadio Mode\u003cbr/\u003e\r\n\u003cjqx-button-group id=\"buttongroup2\" theme=\"@ViewData[\"Theme\"]\" mode=\"radio\"\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Left\r\n    \u003c/button\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Center\r\n    \u003c/button\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Right\r\n    \u003c/button\u003e\r\n\u003c/jqx-button-group\u003e\r\nCheckBox Mode\u003cbr/\u003e\r\n\u003cjqx-button-group id=\"buttongroup3\" theme=\"@ViewData[\"Theme\"]\" mode=\"checkbox\"\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Left\r\n    \u003c/button\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Center\r\n    \u003c/button\u003e\r\n    \u003cbutton style=\"padding:4px 16px;\"\u003e\r\n        Right\r\n    \u003c/button\u003e\r\n\u003c/jqx-button-group\u003e\r\n```\r\n\r\n### Calendar\r\n\r\nThe ```jqx-calendar``` tag helper adds a Calendar component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Calendar Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Calendar Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-calendar theme=\"@ViewData[\"Theme\"]\" width=\"200\" height=\"200\" \u003e\u003c/jqx-calendar\u003e\r\n```\r\n\r\n### Chart\r\n\r\nThe ```jqx-chart``` tag helper adds a Chart component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers;\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.BrowserShare\u003e\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Pie Chart Example\";\r\n    Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };\r\n    Padding titlePadding = new Padding() { Left = 0, Top = 0, Right = 0, Bottom = 10 };\r\n    Rectangle legendPosition = new Rectangle() { Left = 520, Top = 140, Width = 100, Height = 100 };\r\n    FormatSettings formatSettings = new FormatSettings() { Sufix = \"%\", DecimalPlaces = 1 };\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Chart Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-chart style=\"width: 850px; height: 500px;\" color-scheme=\"scheme02\" padding=\"padding\" title-padding=\"titlePadding\" title=\"Desktop browsers share\" description=\"(source: wikipedia.org)\" show-legend=\"false\" legend-position=\"legendPosition\" source=\"Model\"\u003e\r\n    \u003cjqx-chart-series-groups\u003e\r\n         \u003cjqx-chart-serie-group show-labels=\"true\" type=@SerieType.Pie\u003e\r\n                \u003cjqx-chart-series\u003e\r\n                    \u003cjqx-chart-serie datafield=\"Share\" display-text=\"Browser\" label-radius=\"120\" initial-angle=\"15\" radius=\"170\" center-offset=\"0\" format-settings=\"formatSettings\"\u003e\r\n                   \u003c/jqx-chart-serie\u003e\r\n                \u003c/jqx-chart-series\u003e\r\n         \u003c/jqx-chart-serie-group\u003e\r\n    \u003c/jqx-chart-series-groups\u003e\r\n\u003c/jqx-chart\u003e\r\n```\r\n\r\n```jqx-chart-series-groups``` tag helper should be defined within the ```jqx-chart``` tag helper and\r\ndefines the Chart series groups collection. ```jqx-chart-serie-group``` tag helper should be\r\ndefined within the ```jqx-chart-series-groups``` tag helper and defines a Chart serie group.\u003cbr /\u003e\r\n```jqx-chart-series``` tag helper should be defined within the ```jqx-chart-serie-group``` tag helper\r\nand defines the Chart series collection. \u003cbr /\u003e\r\n```jqx-chart-serie``` tag helper should be defined within the ```jqx-chart-series``` tag helper and defines a Chart serie. \u003cbr /\u003e\r\nThe ```for``` and ```radiusFor``` members can be used for model binding. \u003cbr /\u003e\r\n```jqx-chart-x-axis``` tag helper should be defined within the ```jqx-chart``` tag helper and defines the Chart's X Axis. \r\nThe for member can be used for model binding. \u003cbr /\u003e\r\n```jqx-chart-value-axis``` tag helper should be defined within the ```jqx-chart``` tag helper and defines the Chart's Value Axis. \u003cbr /\u003e\r\n```jqx-chart-title``` tag helper should be defined within the ```jqx-chart-value-axis``` tag helper and defines the Chart's Title. \u003cbr /\u003e\r\n```jqx-chart-labels``` tag helper should be defined within the ```jqx-chart-value-axis``` tag helper and defines the Chart's Labels.\u003cbr /\u003e\r\n```jqx-chart-range-selector``` tag helper should be defined within the ```jqx-chart``` tag helper and defines the Chart's Range selector.\r\n\r\n```html\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.ChartSalesDataItem\u003e\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers;\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Bubble Chart Example\";\r\n    var item = Model.FirstOrDefault();\r\n    Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };\r\n    Padding titlePadding = new Padding() { Left = 90, Top = 0, Right = 0, Bottom = 10 };\r\n    FormatSettings formatSettings = new FormatSettings() { Prefix = \"$\", ThousandsSeparator=\",\" };\r\n}\r\n\u003clabel\u003eASP .NET MVC Core Bubble Chart Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-chart style=\"width: 850px; height: 500px;\" color-scheme=\"scheme02\" show-legend=\"true\" padding=\"padding\" title-padding=\"titlePadding\" title=\"Sales by City in Q1 and Q2, and YoY sales growth\"\r\n     description=\"(the size of the circles represents relative YoY growth)\" source=\"Model\"\u003e\r\n    \u003cjqx-chart-x-axis values-on-ticks=\"false\" for=\"@item.City\" \u003e\u003c/jqx-chart-x-axis\u003e\r\n    \u003cjqx-chart-value-axis unit-interval=\"50000\" min-value=\"50000\" max-value=\"350000\"\u003e\r\n        \u003cjqx-chart-title text=\"Sales ($)\"\u003e\u003c/jqx-chart-title\u003e\r\n        \u003cjqx-chart-labels horizontal-aligment=\"HorizontalAlignment.Right\" format-settings=\"formatSettings\"\u003e\u003c/jqx-chart-labels\u003e\r\n    \u003c/jqx-chart-value-axis\u003e\r\n    \u003cjqx-chart-series-groups\u003e\r\n        \u003cjqx-chart-serie-group type=\"SerieType.Bubble\"\u003e\r\n            \u003cjqx-chart-series\u003e\r\n                \u003cjqx-chart-serie for=\"@item.SalesQ1\" radius-for=\"@item.YoYGrowthQ1\" min-radius=\"10\" max-radius=\"30\" display-text=\"Sales in Q1\"\u003e\u003c/jqx-chart-serie\u003e\r\n                \u003cjqx-chart-serie for=\"@item.SalesQ2\" radius-for=\"@item.YoYGrowthQ2\" min-radius=\"10\" max-radius=\"30\" display-text=\"Sales in Q2\"\u003e\u003c/jqx-chart-serie\u003e\r\n            \u003c/jqx-chart-series\u003e\r\n        \u003c/jqx-chart-serie-group\u003e\r\n    \u003c/jqx-chart-series-groups\u003e\r\n\u003c/jqx-chart\u003e\r\n```\r\n\r\n### CheckBox\r\n\r\nThe ```jqx-check-box``` tag helper adds a CheckBox component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC CheckBox Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC CheckBox Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cform asp-action=\"CarFeatures\" method=\"post\"\u003e\r\n    Choose Optional Features:\r\n   @foreach (var item in Model.CarFeatures)\r\n   {\r\n        \u003cjqx-check-box height=\"30\" name=\"carFeatures\" checked=\"@item.Value\" theme=\"@ViewData[\"Theme\"]\"\u003e@item.Key\u003c/jqx-check-box\u003e\r\n   }\r\n  \u003cjqx-button type=\"submit\" theme=\"@ViewData[\"Theme\"]\"\u003eSubmit\u003c/jqx-button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n### Color Picker\r\n\r\nThe ```jqx-color-picker``` tag helper adds a Color Picker component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ColorPicker Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC ColorPicker Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-color-picker height=\"250\" width=\"250\" theme=\"@ViewData[\"Theme\"]\"\u003e\u003c/jqx-color-picker\u003e\r\n```\r\n\r\n### Combo Box\r\n\r\nThe ```jqx-combo-box``` tag helper adds a ComboBox component to a web page.\r\n\r\n```html\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.SalesEmployee\u003e\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ComboBox Example\";\r\n}\r\n@{\r\n    var employee = Model.FirstOrDefault();\r\n}\r\n\u003clabel\u003eASP .NET Core MVC ComboBox Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-combo-box for=\"@employee.Name\" value-for=\"@employee.ID\" selected-index=\"0\" edit=\"@Url.Action(\"EditItem\",\"TagHelpers\")\" create=\"@Url.Action(\"AddItem\",\"TagHelpers\")\" delete=\"@Url.Action(\"DeleteItem\",\"TagHelpers\")\" instance=\"listInstance()\" theme=\"@ViewData[\"Theme\"]\" width=\"250\" height=\"30\" source=\"Model\"\u003e\u003c/jqx-combo-box\u003e\r\n\u003cdiv style=\"margin-top:30px;\"\u003e\r\n    \u003clabel\u003eAdd/Delete/Update\u003c/label\u003e\r\n    \u003ctable\u003e\r\n        \u003ctr\u003e\r\n            \u003ctd style=\"padding:10px;\" align=\"right\"\u003eName:\u003c/td\u003e\r\n            \u003ctd\u003e\u003cjqx-input value=\"Peter Green\" height=\"25\" id=\"name\"\u003e\u003c/jqx-input\u003e\u003c/td\u003e\r\n        \u003c/tr\u003e\r\n    \u003c/table\u003e\r\n\u003c/div\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"addItem()\"\u003eAdd Item\u003c/jqx-button\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"removeItem()\"\u003eDelete Item\u003c/jqx-button\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"updateItem()\"\u003eUpdate Item\u003c/jqx-button\u003e\r\n\u003cscript\u003e\r\n    var list = {};\r\n    function addItem() {\r\n       list.addItem($(\"#name\").val());\r\n    }\r\n    function removeItem() {\r\n        var item = list.getSelectedItem();\r\n        if (item)\r\n        {\r\n            list.removeItem(item);\r\n        }\r\n    }\r\n    function updateItem() {\r\n        var item = list.getSelectedItem();\r\n        if (item)\r\n        {\r\n            list.updateItem({value: item.value, label: $(\"#name\").val() }, item);\r\n        }\r\n    }\r\n    function listInstance(instance) {\r\n        list = instance;\r\n    }\r\n\u003c/script\u003e\r\n```\r\n\r\n```\r\ncreate - {{String}} which determines the URL called when a ComboBox item is added.\r\nfor - {{ModelExpression}} used for model binding and determines the label member.\r\nvalue-for - {{ModelExpression}} used for model binding and determines the value member.\r\ndelete - {{String}} which determines the URL called when a ComboBox item is deleted.\r\nedit - {{String}} which determines the URL called when a ComboBox item is updated.\r\ninstance - {{String}} which determines the javascript member within the Script tag which refers to the ComboBox's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.\r\nserver-processing - {{Boolean}} which determines whether server processing is enabled.\r\nsource-id - {{String}} which determines the data source's ID member.\r\nsource-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.\r\nsource-root - {{String}} which determines the data source's Root member.\r\nsource-total-records - {{Integer}} which determines the data source's TotalRecords member.\r\nsource-url - {{String}} which determines the data source's URL.\r\nsource-model - {{Model}} which determines the data source's Model.\r\n```\r\n\r\n### Complex Input\r\n\r\nThe ```jqx-complex-input``` tag helper adds a Complex Input component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Complex Input Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Complex Input Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-complex-input theme=\"@ViewData[\"Theme\"]\" width=\"250\" height=\"25\"\u003e\u003c/jqx-complex-input\u003e\r\n```\r\n\r\n### DataTable\r\n\r\nThe ```jqx-data-table``` tag helper adds a DataTable component to a web page. \r\nThe DataTable tag helper shares the same API members as the Javascript DataTable widget i.e all properties, methods and events can be used. \r\nAdditional properties for the ```jqx-data-table``` tag helper are:\r\n\r\n```\r\ncreate - {{String}} which determines the URL called when a DataTable row is added.\r\ndatafield-for - {{ModelExpression}} used for model binding and determines the column's bound member.\r\ndelete - {{String}} which determines the URL called when a DataTable row is deleted.\r\nedit - {{String}} which determines the URL called when the DataTable is edited.\r\ninstance - {{String}} which determines the javascript member within the Script tag which refers to the DataTable's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.\r\nserver-processing - {{Boolean}} which determines whether server processing is enabled.\r\nsource-id - {{String}} which determines the data source's ID member.\r\nsource-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.\r\nsource-root - {{String}} which determines the data source's Root member.\r\nsource-total-records - {{Integer}} which determines the data source's TotalRecords member.\r\nsource-url - {{String}} which determines the data source's URL.\r\nsource-model - {{Model}} which determines the data source's Model.\r\n```\r\n\r\n```jqx-datatable-columns``` tag helper should be defined within the ```jqx-datatable``` tag helper and defines the DataTable columns collection. \u003cbr /\u003e\r\n```jqx-datatable-column``` tag helper should be defined within the ```jqx-datatable-columns``` tag helper and defines a DataTable column. \u003cbr /\u003e\r\n```jqx-datatable-column-groups``` tag helper should be defined within the ```jqx-datatable``` tag helper and defines the DataTable columns hierarchy. \u003cbr /\u003e\r\n```jqx-datatable-column-group``` tag helper should be defined within the ```jqx-datatable-column-groups``` tag helper and defines a DataTable column group.\r\n\r\n```html\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.Employee\u003e\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC DataTable Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC DataTable Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-data-table theme=\"@ViewData[\"Theme\"]\" sortable=\"true\" width=\"850\" source=\"Model\"\u003e \r\n    \u003cjqx-data-table-columns\u003e\r\n        \u003cjqx-data-table-column column-group=\"name\" dataField=\"FirstName\" width=\"100\" text=\"First Name\"\u003e\u003c/jqx-data-table-column\u003e\r\n        \u003cjqx-data-table-column column-group=\"name\" dataField=\"LastName\" width=\"100\" text=\"Last Name\"\u003e\u003c/jqx-data-table-column\u003e\r\n        \u003cjqx-data-table-column dataField=\"Title\" width=\"150\"\u003e\u003c/jqx-data-table-column\u003e\r\n        \u003cjqx-data-table-column dataField=\"Address\" width=\"200\"\u003e\u003c/jqx-data-table-column\u003e\r\n        \u003cjqx-data-table-column dataField=\"City\" width=\"150\"\u003e\u003c/jqx-data-table-column\u003e\r\n        \u003cjqx-data-table-column dataField=\"Country\"\u003e\u003c/jqx-data-table-column\u003e\r\n    \u003c/jqx-data-table-columns\u003e\r\n    \u003cjqx-data-table-column-groups\u003e\r\n        \u003cjqx-data-table-column-group name=\"name\" text=\"Name\"\u003e\u003c/jqx-data-table-column-group\u003e\r\n    \u003c/jqx-data-table-column-groups\u003e\r\n\u003c/jqx-data-table\u003e\r\n```\r\n\r\n### DateTimeInput\r\n\r\nThe ```jqx-datetime-input``` tag helper adds a DateTimeInput component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC DateTimeInput Example\";\r\n}\r\n\u003clabel\u003eDate Input\u003c/label\u003e\r\n\u003cjqx-date-time-input format-string=\"F\" show-time-button=\"true\" theme=\"@ViewData[\"Theme\"]\" width=\"300\" height=\"25\"\u003e\u003c/jqx-date-time-input\u003e\r\n```\r\n\r\n### Docking\r\n\r\nThe ```jqx-docking``` tag helper adds a Bullet Chart component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Docking Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Docking Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-docking theme=\"@ViewData[\"Theme\"]\"\u003e\r\n    \u003cjqx-docking-panel\u003e\r\n        \u003cjqx-docking-window\u003e\r\n            \u003cjqx-docking-window-header\u003eTitle 1.1\u003c/jqx-docking-window-header\u003e\r\n            \u003cjqx-docking-window-body\u003e\u003cjqx-button\u003eContent 1.1\u003c/jqx-button\u003e\u003c/jqx-docking-window-body\u003e\r\n        \u003c/jqx-docking-window\u003e\r\n        \u003cjqx-docking-window\u003e\r\n            \u003cjqx-docking-window-header\u003eTitle 1.2\u003c/jqx-docking-window-header\u003e\r\n            \u003cjqx-docking-window-body\u003e\u003cjqx-button\u003eContent 1.2\u003c/jqx-button\u003e\u003c/jqx-docking-window-body\u003e\r\n        \u003c/jqx-docking-window\u003e\r\n    \u003c/jqx-docking-panel\u003e\r\n    \u003cjqx-docking-panel\u003e\r\n        \u003cjqx-docking-window\u003e\r\n            \u003cjqx-docking-window-header\u003eTitle 2.1\u003c/jqx-docking-window-header\u003e\r\n            \u003cjqx-docking-window-body\u003e\u003cjqx-button\u003eContent 2.1\u003c/jqx-button\u003e\u003c/jqx-docking-window-body\u003e\r\n        \u003c/jqx-docking-window\u003e\r\n        \u003cjqx-docking-window\u003e\r\n            \u003cjqx-docking-window-header\u003eTitle 2.2\u003c/jqx-docking-window-header\u003e\r\n            \u003cjqx-docking-window-body\u003e\u003cjqx-button\u003eContent 2.2\u003c/jqx-button\u003e\u003c/jqx-docking-window-body\u003e\r\n        \u003c/jqx-docking-window\u003e\r\n    \u003c/jqx-docking-panel\u003e\r\n\u003c/jqx-docking\u003e\r\n```\r\n\r\n```jqx-docking-panel``` tag helper defines a docking panel. \u003cbr /\u003e\r\n```jqx-docking-window``` tag helper defines a docking window. \u003cbr /\u003e\r\n```jqx-docking-window-header``` tag helper defines a docking window's header. \u003cbr /\u003e\r\n```jqx-docking-window-body``` tag helper defines a docking window's body.\r\n\r\n### Docking Layout\r\n\r\nThe jqx-docking-layout tag helper adds a Docking Layout component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxpanel.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxribbon.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxlayout.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxtree.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxwindow.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxdockinglayout.js\"\u003e\u003c/script\u003e\r\n\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.TreeItem\u003e\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Docking Layout Example\";\r\n\r\n    // Create Layout Object.\r\n    List\u003cLayoutItem\u003e layout = new List\u003cLayoutItem\u003e()\r\n    {\r\n        new LayoutItem()\r\n        {\r\n           Type = LayoutItemType.LayoutGroup,\r\n          Orientation = Orientation.Horizontal,\r\n          Items = new List\u003cLayoutItem\u003e()\r\n          {\r\n              new LayoutItem()\r\n              {\r\n                  Type = LayoutItemType.AutoHideGroup,\r\n                  Alignment = Alignment.Left,\r\n                  Width = \"80\",\r\n                  Unpinned-width = \"200\",\r\n                  Items = new List\u003cLayoutItem\u003e()\r\n                  {\r\n                      new LayoutItem()\r\n                      {\r\n                          Type = LayoutItemType.LayoutPanel,\r\n                          Title = \"Toolbox\",\r\n                          ContentContainer = \"ToolboxPanel\"\r\n                      },\r\n                      new LayoutItem()\r\n                      {\r\n                          Type = LayoutItemType.LayoutPanel,\r\n                          Title = \"Helper\",\r\n                          ContentContainer = \"HelperPanel\"\r\n                      }\r\n                  }\r\n              },\r\n             new LayoutItem()\r\n             {\r\n                Type = LayoutItemType.LayoutGroup,\r\n                Orientation = Orientation.Vertical,\r\n                Width = \"500\",\r\n                Items = new List\u003cLayoutItem\u003e()\r\n                {\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.DocumentGroup,\r\n                        Height = \"400\",\r\n                        MinHeight = \"200\",\r\n                        Items = new List\u003cLayoutItem\u003e()\r\n                        {\r\n                            new LayoutItem()\r\n                            {\r\n                                Type = LayoutItemType.DocumentPanel,\r\n                                Title = \"Document 1\",\r\n                                ContentContainer = \"Document1Panel\"\r\n                            },\r\n                            new LayoutItem()\r\n                            {\r\n                                Type = LayoutItemType.DocumentPanel,\r\n                                Title = \"Document 2\",\r\n                                ContentContainer = \"Document2Panel\"\r\n                            }\r\n                        }\r\n                    },\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.TabbedGroup,\r\n                        Height = \"200\",\r\n                        PinnedHeight = \"30\",\r\n                        Items = new List\u003cLayoutItem\u003e()\r\n                        {\r\n                            new LayoutItem()\r\n                            {\r\n                                Type = LayoutItemType.LayoutPanel,\r\n                                Title = \"Error List\",\r\n                                ContentContainer = \"ErrorListPanel\"\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n              },\r\n            new LayoutItem()\r\n            {\r\n                Type = LayoutItemType.TabbedGroup,\r\n                Width = \"220\",\r\n                MinWidth = \"200\",\r\n                Items = new List\u003cLayoutItem\u003e()\r\n                {\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.LayoutPanel,\r\n                        Title = \"Solution Explorer\",\r\n                        ContentContainer = \"SolutionExplorerPanel\",\r\n                        InitContent = \"InitSolutionExplorerPanel()\"\r\n                    },\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.LayoutPanel,\r\n                        Title = \"Properties\",\r\n                        ContentContainer= \"PropertiesPanel\"\r\n                    }\r\n                }\r\n            }\r\n          }\r\n        },\r\n        new LayoutItem()\r\n        {\r\n            Type = LayoutItemType.FloatGroup,\r\n            Width = \"500\",\r\n            Height = \"300\",\r\n            Position = new Position()\r\n            {\r\n                X = 350,\r\n                Y = 250\r\n            },\r\n            Items = new List\u003cLayoutItem\u003e()\r\n            {\r\n                new LayoutItem()\r\n                {\r\n                    Type = LayoutItemType.LayoutPanel,\r\n                    Title = \"Output\",\r\n                    ContentContainer = \"OutputPanel\",\r\n                    Selected = true\r\n                }\r\n            }\r\n        }\r\n    };\r\n}\r\n\r\n\u003cscript\u003e\r\n \r\n    function InitSolutionExplorerPanel() {\r\n        $('#solutionExplorerTree')[0].setAttribute(\"initInstance\", \"true\");       \r\n    }\r\n\r\n\u003c/script\u003e\r\n\u003cjqx-docking-layout width=\"800\" height=\"600\" layout=\"@layout\" theme=\"@ViewData[\"Theme\"]\"\u003e\r\n    \u003c!--The panel content divs can have a flat structure--\u003e\r\n    \u003c!--auto-hideGroup--\u003e\r\n    \u003cdiv data-container=\"ToolboxPanel\"\u003e\r\n        List of tools\r\n    \u003c/div\u003e\r\n    \u003cdiv data-container=\"HelpPanel\"\u003e\r\n        Help topics\r\n    \u003c/div\u003e\r\n    \u003c!--documentGroup--\u003e\r\n    \u003cdiv data-container=\"Document1Panel\"\u003e\r\n        Document 1 content\r\n    \u003c/div\u003e\r\n    \u003cdiv data-container=\"Document2Panel\"\u003e\r\n        Document 2 content\r\n    \u003c/div\u003e\r\n    \u003c!--bottom tabbedGroup--\u003e\r\n    \u003cdiv data-container=\"ErrorListPanel\"\u003e\r\n        List of errors\r\n    \u003c/div\u003e\r\n    \u003c!--right tabbedGroup--\u003e\r\n    \u003cdiv data-container=\"SolutionExplorerPanel\"\u003e\r\n        \u003cjqx-tree initInstance=\"false\" theme=\"@ViewData[\"Theme\"]\" id=\"solutionExplorerTree\" width=\"190\" itemsMember=\"Items\" display-member=\"Label\" source=\"Model\" style=\"border: none;\"\u003e\r\n        \u003c/jqx-tree\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv data-container=\"PropertiesPanel\"\u003e\r\n        List of properties\r\n    \u003c/div\u003e\r\n    \u003c!--floatGroup--\u003e\r\n    \u003cdiv data-container=\"OutputPanel\"\u003e\r\n        \u003cdiv style=\"font-family: Consolas;\"\u003e\r\n            \u003cp\u003e\r\n                Themes installation complete.\r\n            \u003c/p\u003e\r\n            \u003cp\u003e\r\n                List of installed stylesheet files. Include at least one stylesheet Theme file and\r\n                the images folder:\r\n            \u003c/p\u003e\r\n            \u003cul\u003e\r\n                \u003cli\u003e\r\n                    styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should\r\n                    be always included in your project.\r\n                \u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.arctic.css: Stylesheet for the Arctic Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.web.css: Stylesheet for the Web Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.classic.css: Stylesheet for the Classic Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.office.css: Stylesheet for the Office Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.metro.css: Stylesheet for the Metro Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.orange.css: Stylesheet for the Orange Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.summer.css: Stylesheet for the Summer Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.black.css: Stylesheet for the Black Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.fresh.css: Stylesheet for the Fresh Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.blackberry.css: Stylesheet for the Blackberry Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.android.css: Stylesheet for the Android Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.mobile.css: Stylesheet for the Mobile Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-start.css: Stylesheet for the UI Start Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/images: contains images referenced in the stylesheet files\u003c/li\u003e\r\n            \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n    \u003c/div\u003e\r\n\u003c/jqx-docking-layout\u003e\r\n\r\n```\r\n\r\n### DropDownList\r\n\r\n\r\nThe ```jqx-dropdown-list``` tag helper adds a DropDownList component to a web page.\r\n\r\n```\r\ncreate - {{String}} which determines the URL called when a DropDownList item is added.\r\nfor - {{ModelExpression}} used for model binding and determines the label member.\r\nvalue-for - {{ModelExpression}} used for model binding and determines the value member.\r\ndelete - {{String}} which determines the URL called when a DropDownList item is deleted.\r\nedit - {{String}} which determines the URL called when a DropDownList item is updated.\r\ninstance - {{String}} which determines the javascript member within the Script tag which refers to the DropDownList's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.\r\nserver-processing - {{Boolean}} which determines whether server processing is enabled.\r\nsource-id - {{String}} which determines the data source's ID member.\r\nsource-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.\r\nsource-root - {{String}} which determines the data source's Root member.\r\nsource-total-records - {{Integer}} which determines the data source's TotalRecords member.\r\nsource-url - {{String}} which determines the data source's URL.\r\nsource-model - {{Model}} which determines the data source's Model.\r\n```\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxinput.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxlistbox.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxdropdownlist.js\"\u003e\u003c/script\u003e\r\n\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.SalesEmployee\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC DropDownList Example\";\r\n}\r\n@{\r\n    var employee = Model.FirstOrDefault();\r\n}\r\n\u003cjqx-drop-down-list for=\"@employee.Name\" value-for=\"@employee.ID\" selected-index=\"0\" edit=\"@Url.Action(\"EditItem\",\"TagHelpers\")\" create=\"@Url.Action(\"AddItem\",\"TagHelpers\")\" delete=\"@Url.Action(\"DeleteItem\",\"TagHelpers\")\" instance=\"listInstance()\" theme=\"@ViewData[\"Theme\"]\" width=\"250\" height=\"30\" source=\"Model\"\u003e\u003c/jqx-drop-down-list\u003e\r\n\u003cdiv style=\"margin-top:30px;\"\u003e\r\n    \u003clabel\u003eAdd/Delete/Update\u003c/label\u003e\r\n    \u003ctable\u003e\r\n        \u003ctr\u003e\r\n            \u003ctd style=\"padding:10px;\" align=\"right\"\u003eName:\u003c/td\u003e\r\n            \u003ctd\u003e\u003cjqx-input value=\"Peter Green\" height=\"25\" id=\"name\"\u003e\u003c/jqx-input\u003e\u003c/td\u003e\r\n        \u003c/tr\u003e\r\n    \u003c/table\u003e\r\n\u003c/div\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"addItem()\"\u003eAdd Item\u003c/jqx-button\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"removeItem()\"\u003eDelete Item\u003c/jqx-button\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"updateItem()\"\u003eUpdate Item\u003c/jqx-button\u003e\r\n\u003cscript\u003e\r\n    var list = {};\r\n    function addItem() {\r\n       list.addItem($(\"#name\").val());\r\n    }\r\n\r\n    function removeItem() {\r\n        var item = list.getSelectedItem();\r\n        if (item)\r\n        {\r\n            list.removeItem(item);\r\n        }\r\n    }\r\n\r\n    function updateItem() {\r\n        var item = list.getSelectedItem();\r\n        if (item)\r\n        {\r\n            list.updateItem({value: item.value, label: $(\"#name\").val() }, item);\r\n        }\r\n    }\r\n\r\n    function listInstance(instance) {\r\n        list = instance;\r\n    }\r\n\u003c/script\u003e\r\n```\r\n\r\n### Editor\r\n\r\nThe ```jqx-editor``` tag helper adds Editor component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Editor Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Editor Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-editor theme=\"@ViewData[\"Theme\"]\" width=\"800\" height=\"400\"\u003e\u003c/jqx-editor\u003e\r\n```\r\n\r\n### Expander\r\n\r\nThe ```jqx-expander``` tag helper adds Expander component to a web page.\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Expander Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Expander Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-expander width=\"500\" theme=\"@ViewData[\"Theme\"]\"\u003e\r\n    \u003cjqx-expander-header\u003eHeader\u003c/jqx-expander-header\u003e\r\n    \u003cjqx-expander-body\u003e\r\n       \u003cjqx-button style=\"margin:5px;\" theme=\"@ViewData[\"Theme\"]\"\u003eButton 1\u003c/jqx-button\u003e\r\n       \u003cjqx-button style=\"margin:5px;\" theme=\"@ViewData[\"Theme\"]\"\u003eButton 2\u003c/jqx-button\u003e\r\n       \u003cjqx-button style=\"margin:5px;\" theme=\"@ViewData[\"Theme\"]\"\u003eButton 3\u003c/jqx-button\u003e\r\n   \u003c/jqx-expander-body\u003e\r\n\u003c/jqx-expander\u003e\r\n```\r\njqx-expander-header tag helper defines the expander's header. jqx-expander-body tag helper defines the expander's body.\r\n### FileUpload\r\n\r\nThe jqx-file-upload tag helper adds a File Upload component to a web page.\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC FileUpload Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC File Upload Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-file-upload width=\"300\" multiple-files-upload=\"false\" upload-url=\"@Url.Action(\"UploadFile\", \"TagHelpers\")\", file-input-name=\"fileToUpload\" \u003e\u003c/jqx-file-upload\u003e\r\n```\r\n### Formatted Input\r\n\r\nThe ```jqx-formatted-input``` tag helper adds a Formatted Input component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Formatted Input Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Formatted Input Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-formatted-input theme=\"@ViewData[\"Theme\"]\" width=\"250\" height=\"25\"\u003e\u003c/jqx-formatted-input\u003e\r\n```\r\n\r\n### Gauge\r\n\r\nThe ```jqx-gauge``` tag helper adds a Gauge component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers;\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Gauge Example\";\r\n    List\u003cGaugeRange\u003e ranges = new List\u003cGaugeRange\u003e()\r\n    {\r\n        new GaugeRange() {StartValue = 0, EndValue = 55, StartWidth = 1, EndWidth = 5, Style = new GaugeStyle() {Fill = \"#4bb648\", Stroke = \"#4bb648\" }},\r\n        new GaugeRange() {StartValue = 55, EndValue = 110, StartWidth = 5, EndWidth = 10, Style = new GaugeStyle() {Fill = \"#fbd109\", Stroke = \"#fbd109\" }},\r\n        new GaugeRange() {StartValue = 110, EndValue = 165, StartWidth = 10, EndWidth = 13, Style = new GaugeStyle() {Fill = \"#ff8000\", Stroke = \"#ff8000\"} },\r\n        new GaugeRange() {StartValue = 165, EndValue = 220, StartWidth = 13, EndWidth = 16, Style = new GaugeStyle() {Fill = \"#e02629\", Stroke = \"#e02629\" } }\r\n    };\r\n    GaugeTicks ticksMinor = new GaugeTicks() { Interval = 5, Size = \"5%\" };\r\n    GaugeTicks ticksMajor = new GaugeTicks() { Interval = 10, Size = \"9%\" };\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Gauge Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-gauge ranges=\"ranges\" ticks-minor=\"ticksMinor\" ticks-major=\"ticksMajor\" value=\"50\" color-scheme=\"scheme05\" animation-duration=\"1200\"\u003e\u003c/jqx-gauge\u003e\r\n```\r\n\r\n### Input\r\n\r\nThe ```jqx-input``` tag helper adds an Input component to a web page.\r\n\r\n```\r\ncreate - {{String}} which determines the URL called when a Input item is added.\r\nfor - {{ModelExpression}} used for model binding and determines the label member.\r\nvalue-for - {{ModelExpression}} used for model binding and determines the value member.\r\ndelete - {{String}} which determines the URL called when a Input item is deleted.\r\nedit - {{String}} which determines the URL called when a Input item is updated.\r\ninstance - {{String}} which determines the javascript member within the Script tag which refers to the Input's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.\r\nserver-processing - {{Boolean}} which determines whether server processing is enabled.\r\nsource-id - {{String}} which determines the data source's ID member.\r\nsource-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.\r\nsource-root - {{String}} which determines the data source's Root member.\r\nsource-total-records - {{Integer}} which determines the data source's TotalRecords member.\r\nsource-url - {{String}} which determines the data source's URL.\r\nsource-model - {{Model}} which determines the data source's Model.\r\n```\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxinput.js\"\u003e\u003c/script\u003e\r\n\r\n\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.SalesEmployee\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Input Example\";\r\n}\r\n\u003cscript\u003e\r\n    function change(event) {\r\n        var args = event.args;\r\n        document.getElementById(\"log\").innerHTML = \"Label: \" + args.label + \", Value: \" + args.value;;\r\n    }\r\n\u003c/script\u003e\r\n\u003clabel\u003eEnter Name:\u003c/label\u003e\r\n\u003cjqx-input on-change=\"change()\" display-member=\"Name\" selected-index=\"0\" value-member=\"ID\" theme=\"@ViewData[\"Theme\"]\" width=\"250\" height=\"30\" source=\"Model\"\u003e\u003c/jqx-input\u003e\r\n(ex: An)\r\n\u003cbr /\u003e\u003cbr /\u003e\r\n\u003cdiv id=\"log\"\u003e\u003c/div\u003e\r\n```\r\n\r\n### Kanban\r\n\r\nThe ```jqx-kanban``` tag helper adds a Kanban component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxkanban.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxsortable.js\"\u003e\u003c/script\u003e\r\n\r\n@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Kanban Example\";\r\n    Dictionary\u003cstring, string\u003e mappings = new Dictionary\u003cstring, string\u003e();\r\n    mappings[\"Id\"] = \"id\";\r\n    mappings[\"State\"] = \"status\";\r\n    mappings[\"Text\"] = \"label\";\r\n    mappings[\"Label\"] = \"label\";\r\n    mappings[\"Tags\"] = \"tags\";\r\n    mappings[\"Hex\"] = \"color\";\r\n    mappings[\"ResourceId\"] = \"resourceId\";\r\n    mappings[\"Name\"] = \"name\";\r\n    mappings[\"Image\"] = \"image\";\r\n}\r\n\r\n\u003cscript\u003e\r\n\r\n\r\n\u003c/script\u003e\r\n\r\n\u003cjqx-kanban mappings=\"mappings\" resources=\"Model.KanbanResources\" source=\"Model.KanbanDataItems\" width=\"850\"\u003e\r\n    \u003cjqx-kanban-columns\u003e\r\n        \u003cjqx-kanban-column text=\"Backlog\" dataField=\"New\"\u003e\u003c/jqx-kanban-column\u003e\r\n        \u003cjqx-kanban-column text=\"In Progress\" dataField=\"Work\"\u003e\u003c/jqx-kanban-column\u003e\r\n        \u003cjqx-kanban-column text=\"Done\" dataField=\"Done\"\u003e\u003c/jqx-kanban-column\u003e\r\n\u003c/jqx-kanban-columns\u003e\r\n\u003c/jqx-kanban\u003e\r\n```\r\n\r\n### Knob\r\n\r\nThe ```jqx-knob``` tag helper adds a Knob component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers;\r\n@{\r\n\u003cscript src=\"~/jqwidgets/jqxknob.js\"\u003e\u003c/script\u003e\r\n\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers;\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Knob Example\";\r\n    KnobMarks marks = new KnobMarks()\r\n    {\r\n        ColorProgress = new KnobColor() { Color = \"#00a4e1\", Border = \"#00a4e1\" },\r\n        ColorRemaining = new KnobColor() { Color = \"#grey\", Border = \"#grey\" },\r\n        Type = \"line\",\r\n        Offset = \"71%\",\r\n        Thickness = 3,\r\n        Size = \"6%\",\r\n        MajorSize = \"9%\",\r\n        MajorInterval = 10,\r\n        MinorInterval = 2\r\n    };\r\n    KnobStyle style = new KnobStyle()\r\n    {\r\n        Stroke = \"#dfe3e9\",\r\n        StrokeWidth = 3,\r\n        Fill = new KnobGradientFill() { Color = \"#fefefe\", GradientStops = new List\u003cstring\u003e() { \"[0, 1]\", \"[50, 0.9]\", \"[100, 1]\" } }\r\n    };\r\n\r\n    KnobLabels labels = new KnobLabels()\r\n    {\r\n        Offset = \"88%\",\r\n        Step = 10\r\n    };\r\n    KnobProgressBar progressBar = new KnobProgressBar()\r\n    {\r\n        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = \"#00a4e1\" }, Stroke = \"grey\" },\r\n        Size = \"9%\",\r\n        Offset = \"60%\",\r\n        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = \"gray\" }, Stroke = \"gray\" }\r\n    };\r\n}\r\n\u003cjqx-knob min=\"0\" max=\"100\" value=\"60\" start-angle=\"120\" end-angle=\"420\" rotation=\"clockwise\"  progress-bar=\"progressBar\" labels=\"labels\" style=\"style\" marks=\"marks\"\u003e\u003c/jqx-knob\u003e\r\n\r\n```\r\n\r\n### Layout\r\n\r\nThe ```jqx-layout``` tag helper adds a Layout component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxpanel.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxlayout.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxribbon.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxtree.js\"\u003e\u003c/script\u003e\r\n\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.TreeItem\u003e\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Layout Example\";\r\n\r\n    // Create Layout Object.\r\n    List\u003cLayoutItem\u003e layout = new List\u003cLayoutItem\u003e()\r\n    {\r\n        new LayoutItem()\r\n        {\r\n           Type = LayoutItemType.LayoutGroup,\r\n          Orientation = Orientation.Horizontal,\r\n          Items = new List\u003cLayoutItem\u003e()\r\n          {\r\n              new LayoutItem()\r\n              {\r\n                  Type = LayoutItemType.AutoHideGroup,\r\n                  Alignment = Alignment.Left,\r\n                  Width = \"80\",\r\n                  UnpinnedWidth = \"200\",\r\n                  Items = new List\u003cLayoutItem\u003e()\r\n                  {\r\n                      new LayoutItem()\r\n                      {\r\n                          Type = LayoutItemType.LayoutPanel,\r\n                          Title = \"Toolbox\",\r\n                          ContentContainer = \"ToolboxPanel\"\r\n                      },\r\n                      new LayoutItem()\r\n                      {\r\n                          Type = LayoutItemType.LayoutPanel,\r\n                          Title = \"Helper\",\r\n                          ContentContainer = \"HelperPanel\"\r\n                      }\r\n                  }\r\n              },\r\n             new LayoutItem()\r\n             {\r\n                Type = LayoutItemType.LayoutGroup,\r\n                Orientation = Orientation.Vertical,\r\n                Width = \"500\",\r\n                Items = new List\u003cLayoutItem\u003e()\r\n                {\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.DocumentGroup,\r\n                        Height = \"400\",\r\n                        MinHeight = \"200\",\r\n                        Items = new List\u003cLayoutItem\u003e()\r\n                        {\r\n                            new LayoutItem()\r\n                            {\r\n                                Type = LayoutItemType.DocumentPanel,\r\n                                Title = \"Document 1\",\r\n                                ContentContainer = \"Document1Panel\"\r\n                            },\r\n                            new LayoutItem()\r\n                            {\r\n                                Type = LayoutItemType.DocumentPanel,\r\n                                Title = \"Document 2\",\r\n                                ContentContainer = \"Document2Panel\"\r\n                            }\r\n                        }\r\n                    },\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.TabbedGroup,\r\n                        Height = \"200\",\r\n                        PinnedHeight = \"30\",\r\n                        Items = new List\u003cLayoutItem\u003e()\r\n                        {\r\n                            new LayoutItem()\r\n                            {\r\n                                Type = LayoutItemType.LayoutPanel,\r\n                                Title = \"Error List\",\r\n                                ContentContainer = \"ErrorListPanel\"\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n              },\r\n            new LayoutItem()\r\n            {\r\n                Type = LayoutItemType.TabbedGroup,\r\n                Width = \"220\",\r\n                MinWidth = \"200\",\r\n                Items = new List\u003cLayoutItem\u003e()\r\n                {\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.LayoutPanel,\r\n                        Title = \"Solution Explorer\",\r\n                        ContentContainer = \"SolutionExplorerPanel\",\r\n                        InitContent = \"InitSolutionExplorerPanel()\"\r\n                    },\r\n                    new LayoutItem()\r\n                    {\r\n                        Type = LayoutItemType.LayoutPanel,\r\n                        Title = \"Properties\",\r\n                        ContentContainer= \"PropertiesPanel\"\r\n                    }\r\n                }\r\n            }\r\n          }\r\n        }\r\n    };\r\n}\r\n\r\n\u003cscript\u003e\r\n \r\n    function InitSolutionExplorerPanel() {\r\n        $('#solutionExplorerTree')[0].setAttribute(\"init-instance\", \"true\");       \r\n    }\r\n\r\n\u003c/script\u003e\r\n\u003cjqx-layout width=\"800\" height=\"600\" layout=\"@layout\" theme=\"@ViewData[\"Theme\"]\"\u003e\r\n    \u003c!--The panel content divs can have a flat structure--\u003e\r\n    \u003c!--auto-hideGroup--\u003e\r\n    \u003cdiv data-container=\"ToolboxPanel\"\u003e\r\n        List of tools\r\n    \u003c/div\u003e\r\n    \u003cdiv data-container=\"HelpPanel\"\u003e\r\n        Help topics\r\n    \u003c/div\u003e\r\n    \u003c!--documentGroup--\u003e\r\n    \u003cdiv data-container=\"Document1Panel\"\u003e\r\n        Document 1 content\r\n    \u003c/div\u003e\r\n    \u003cdiv data-container=\"Document2Panel\"\u003e\r\n        Document 2 content\r\n    \u003c/div\u003e\r\n    \u003c!--bottom tabbedGroup--\u003e\r\n    \u003cdiv data-container=\"ErrorListPanel\"\u003e\r\n        List of errors\r\n    \u003c/div\u003e\r\n    \u003c!--right tabbedGroup--\u003e\r\n    \u003cdiv data-container=\"SolutionExplorerPanel\"\u003e\r\n        \u003cjqx-tree init-instance=\"false\" theme=\"@ViewData[\"Theme\"]\" id=\"solutionExplorerTree\" width=\"190\" items-member=\"Items\" display-member=\"Label\" source=\"Model\" style=\"border: none;\"\u003e\r\n        \u003c/jqx-tree\u003e\r\n    \u003c/div\u003e\r\n    \u003cdiv data-container=\"PropertiesPanel\"\u003e\r\n        List of properties\r\n    \u003c/div\u003e\r\n    \u003c!--floatGroup--\u003e\r\n    \u003cdiv data-container=\"OutputPanel\"\u003e\r\n        \u003cdiv style=\"font-family: Consolas;\"\u003e\r\n            \u003cp\u003e\r\n                Themes installation complete.\r\n            \u003c/p\u003e\r\n            \u003cp\u003e\r\n                List of installed stylesheet files. Include at least one stylesheet Theme file and\r\n                the images folder:\r\n            \u003c/p\u003e\r\n            \u003cul\u003e\r\n                \u003cli\u003e\r\n                    styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should\r\n                    be always included in your project.\r\n                \u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.arctic.css: Stylesheet for the Arctic Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.web.css: Stylesheet for the Web Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.classic.css: Stylesheet for the Classic Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.office.css: Stylesheet for the Office Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.metro.css: Stylesheet for the Metro Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.orange.css: Stylesheet for the Orange Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.summer.css: Stylesheet for the Summer Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.black.css: Stylesheet for the Black Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.fresh.css: Stylesheet for the Fresh Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.blackberry.css: Stylesheet for the Blackberry Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.android.css: Stylesheet for the Android Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.mobile.css: Stylesheet for the Mobile Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-start.css: Stylesheet for the UI Start Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme\u003c/li\u003e\r\n                \u003cli\u003estyles/images: contains images referenced in the stylesheet files\u003c/li\u003e\r\n            \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n    \u003c/div\u003e\r\n\u003c/jqx-layout\u003e\r\n\r\n```\r\n\r\n### Linear Gauge\r\n\r\nThe ```jqx-linear-gauge``` tag helper adds a Linear Gauge component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxgauge.js\"\u003e\u003c/script\u003e\r\n\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers;\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Linear Gauge Example\";\r\n    GaugeLabels labels = new GaugeLabels() { Interval = 20, FormatValue = \"formatValue()\" };\r\n        List\u003cGaugeRange\u003e ranges = new List\u003cGaugeRange\u003e()\r\n        {\r\n            new GaugeRange() {StartValue = -10, EndValue = 10, Style = new GaugeStyle() {Fill = \"#4bb648\", Stroke = \"#4bb648\" }},\r\n            new GaugeRange() {StartValue = 10, EndValue = 35, Style = new GaugeStyle() {Fill = \"#fbd109\", Stroke = \"#fbd109\" }},\r\n            new GaugeRange() {StartValue = 35, EndValue = 60, Style = new GaugeStyle() {Fill = \"#ff8000\", Stroke = \"#ff8000\"}}\r\n        };\r\n    GaugeTicks ticksMinor = new GaugeTicks() { Interval = 2.5, Size = \"5%\", Style = new GaugeStyle() { StrokeWidth = 1, Stroke = \"#aaaaaa\" } };\r\n    GaugeTicks ticksMajor = new GaugeTicks() { Interval = 10, Size = \"10%\" };\r\n    GaugePointer pointer = new GaugePointer() { Size = \"5%\" };\r\n}\r\n\r\n\u003cscript\u003e\r\n    function formatValue(value, position) {\r\n        if (position === 'far') {\r\n            value = (9 / 5) * value + 32;\r\n            if (value === -76) {\r\n                return 'F';\r\n            }\r\n            return value + '';\r\n        }\r\n        if (value === -60) {\r\n            return 'C';\r\n        }\r\n        return value + '';\r\n    }\r\n\u003c/script\u003e\r\n\u003cjqx-linear-gauge width=\"100\" max=\"60\" orientation=\"Orientation.Vertical\" height=\"350\" pointer=\"pointer\" ranges=\"ranges\" labels=\"labels\" ticks-minor=\"ticksMinor\" ticks-major=\"ticksMajor\" value=\"50\" colorScheme=\"scheme05\" animationDuration=\"1200\"\u003e\u003c/jqx-linear-gauge\u003e\r\n\r\nLink Button\r\n\r\nThe jqx-link-button tag helper adds a Link Button component to a web page.\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxlinkbutton.js\"\u003e\u003c/script\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Link Button Example\";\r\n}\r\n\r\n\u003cjqx-link-button theme=\"@ViewData[\"Theme\"]\" target=\"_blank\" href=\"http://www.jqwidgets.com\"\u003eLink Button\u003c/jqx-link-button\u003e\r\n```\r\n\r\n### List Box\r\n\r\nThe ```jqx-list-box``` tag helper adds a List Box component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxlistbox.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxinput.js\"\u003e\u003c/script\u003e\r\n\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.SalesEmployee\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ListBox Example\";\r\n}\r\n@{\r\n    var employee = Model.FirstOrDefault();\r\n}\r\n\u003cjqx-list-box display-member=\"Name\" selected-index=\"0\" edit=\"@Url.Action(\"EditItem\",\"TagHelpers\")\" create=\"@Url.Action(\"AddItem\",\"TagHelpers\")\" delete=\"@Url.Action(\"DeleteItem\",\"TagHelpers\")\" instance=\"listInstance()\" value-member=\"ID\" theme=\"@ViewData[\"Theme\"]\" width=\"250\" height=\"300\" source=\"Model\"\u003e\u003c/jqx-list-box\u003e\r\n\u003cdiv style=\"margin-top:30px;\"\u003e\r\n    \u003clabel\u003eAdd/Delete/Update\u003c/label\u003e\r\n    \u003ctable\u003e\r\n        \u003ctr\u003e\r\n            \u003ctd style=\"padding:10px;\" align=\"right\"\u003eName:\u003c/td\u003e\r\n            \u003ctd\u003e\u003cjqx-input value=\"Peter Green\" height=\"25\" id=\"name\"\u003e\u003c/jqx-input\u003e\u003c/td\u003e\r\n        \u003c/tr\u003e\r\n    \u003c/table\u003e\r\n\u003c/div\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"addItem()\"\u003eAdd Item\u003c/jqx-button\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"removeItem()\"\u003eDelete Item\u003c/jqx-button\u003e\r\n\u003cjqx-button style=\"margin-top:20px;\" theme=\"@ViewData[\"Theme\"]\" on-click=\"updateItem()\"\u003eUpdate Item\u003c/jqx-button\u003e\r\n\u003cscript\u003e\r\n    var list = {};\r\n    function addItem() {\r\n       list.addItem($(\"#name\").val());\r\n    }\r\n\r\n    function removeItem() {\r\n        var item = list.getSelectedItem();\r\n        if (item)\r\n        {\r\n            list.removeItem(item);\r\n        }\r\n    }\r\n\r\n    function updateItem() {\r\n        var item = list.getSelectedItem();\r\n        if (item)\r\n        {\r\n            list.updateItem({value: item.value, label: $(\"#name\").val() }, item);\r\n        }\r\n    }\r\n\r\n    function listInstance(instance) {\r\n        list = instance;\r\n    }\r\n\u003c/script\u003e\r\n```\r\n\r\n### List Menu\r\n\r\nThe ```jqx-list-menu``` tag helper adds a List Menu component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxpanel.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxlistmenu.js\"\u003e\u003c/script\u003e\r\n\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ListMenu Example\";\r\n}\r\n\r\n\r\n\u003cjqx-list-menu theme=\"@ViewData[\"Theme\"]\" enable-scrolling=\"false\" width=\"350\"\u003e\r\n    \u003cjqx-list-menu-items\u003e\r\n      \u003cjqx-list-menu-item\u003e\r\n            OSI\r\n          \u003cjqx-list-menu-items\u003e\r\n              \u003cjqx-list-menu-item\u003e\r\n                  Application Layer\r\n                  \u003cjqx-list-menu-items\u003e\r\n                      \u003cjqx-list-menu-item\u003eSIP\u003c/jqx-list-menu-item\u003e\r\n                      \u003cjqx-list-menu-item\u003eDNS\u003c/jqx-list-menu-item\u003e\r\n                      \u003cjqx-list-menu-item\u003eFTP\u003c/jqx-list-menu-item\u003e\r\n                      \u003cjqx-list-menu-item\u003eRTP\u003c/jqx-list-menu-item\u003e\r\n                      \u003cjqx-list-menu-item\u003eDHCP\u003c/jqx-list-menu-item\u003e\r\n                  \u003c/jqx-list-menu-items\u003e\r\n              \u003c/jqx-list-menu-item\u003e\r\n          \u003c/jqx-list-menu-items\u003e         \r\n        \u003c/jqx-list-menu-item\u003e\r\n        \u003cjqx-list-menu-item\u003e\r\n            TCP/IP\r\n            \u003cjqx-list-menu-items\u003e\r\n                \u003cjqx-list-menu-item\u003e\r\n                    Application layer\r\n                    \u003cjqx-list-menu-items\u003e\r\n                        \u003cjqx-list-menu-item\u003eDHCP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eDNS\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eFTP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eHTTP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eIMAP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eLDAP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eXMPP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eSSH\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eRIP\u003c/jqx-list-menu-item\u003e\r\n                    \u003c/jqx-list-menu-items\u003e\r\n                \u003c/jqx-list-menu-item\u003e\r\n                \u003cjqx-list-menu-item\u003e\r\n                    Transport layer\r\n                    \u003cjqx-list-menu-items\u003e\r\n                        \u003cjqx-list-menu-item\u003eTCP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eUDP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eSCTP\u003c/jqx-list-menu-item\u003e\r\n                    \u003c/jqx-list-menu-items\u003e\r\n                \u003c/jqx-list-menu-item\u003e\r\n                \u003cjqx-list-menu-item\u003e\r\n                    Internet layer\r\n                    \u003cjqx-list-menu-items\u003e\r\n                        \u003cjqx-list-menu-item\u003eIP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eICMP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eECN\u003c/jqx-list-menu-item\u003e\r\n                    \u003c/jqx-list-menu-items\u003e\r\n                \u003c/jqx-list-menu-item\u003e\r\n                \u003cjqx-list-menu-item\u003e\r\n                    Link layer\r\n                    \u003cjqx-list-menu-items\u003e\r\n                        \u003cjqx-list-menu-item\u003eARP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eNDP\u003c/jqx-list-menu-item\u003e\r\n                        \u003cjqx-list-menu-item\u003eDSL\u003c/jqx-list-menu-item\u003e\r\n                    \u003c/jqx-list-menu-items\u003e\r\n                \u003c/jqx-list-menu-item\u003e\r\n            \u003c/jqx-list-menu-items\u003e\r\n        \u003c/jqx-list-menu-item\u003e\r\n    \u003c/jqx-list-menu-items\u003e\r\n\u003c/jqx-list-menu\u003e\r\n\r\n```\r\n\r\n### Masked Input\r\n\r\nThe ```jqx-masked-input``` tag helper adds a Masked Input component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxmaskedinput.js\"\u003e\u003c/script\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC MaskedInput Example\";\r\n}\r\n    \u003cdiv style='margin-top: 10px;'\u003e\r\n        Numeric\r\n    \u003c/div\u003e\r\n    \u003cjqx-masked-input width=\"250\" style='margin-top: 3px;' id='numericInput'\u003e\u003c/jqx-masked-input\u003e\r\n    \u003cdiv style='margin-top: 10px;'\u003e\r\n        Zip Code\r\n    \u003c/div\u003e\r\n    \u003cjqx-masked-input width=\"250\" mask=\"#####-####\" style='margin-top: 3px;' id='zipCodeInput'\u003e\u003c/jqx-masked-input\u003e\r\n    \u003cdiv style='margin-top: 10px;'\u003e\r\n        SSN\r\n    \u003c/div\u003e\r\n    \u003cjqx-masked-input width=\"250\" mask=\"###-##-####\" style='margin-top: 3px;' id='ssnInput'\u003e\u003c/jqx-masked-input\u003e\r\n    \u003cdiv style='margin-top: 10px;'\u003e\r\n        Phone Number\r\n    \u003c/div\u003e\r\n    \u003cjqx-masked-input width=\"250\" mask=\"(###)###-####\" style='margin-top: 3px;' id='phoneInput'\u003e \u003c/jqx-masked-input\u003e\r\n    \u003cdiv style='margin-top: 10px;'\u003e\r\n        Disabled\r\n    \u003c/div\u003e\r\n    \u003cjqx-masked-input width=\"250\" disabled=\"true\"  style='margin-top: 3px;' id='disabledInput'\u003e\u003c/jqx-masked-input\u003e\r\n```\r\n\r\n### Menu\r\n\r\nThe ```jqx-menu``` tag helper adds a Menu component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Menu Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Menu Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-menu theme=\"@ViewData[\"Theme\"]\"\u003e\r\n    \u003cjqx-menu-items\u003e\r\n        \u003cjqx-menu-item\u003e\u003ca href=\"#Home\"\u003eHome\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n        \u003cjqx-menu-item\u003e\r\n            Solutions\r\n            \u003cjqx-menu-items style='width: 250px;'\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Education\"\u003eEducation\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Financial\"\u003eFinancial services\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Government\"\u003eGovernment\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Manufacturing\"\u003eManufacturing\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item type='separator'\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\r\n                    Software Solutions\r\n                    \u003cjqx-menu-items style='width: 220px;'\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#ConsumerPhoto\"\u003eConsumer photo and video\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#Mobile\"\u003eMobile\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#RIA\"\u003eRich Internet apps\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#TechnicalCommunication\"\u003eTechnical communication\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#Training\"\u003eTraining and eLearning\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#WebConferencing\"\u003eWeb conferencing\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                    \u003c/jqx-menu-items\u003e\r\n                \u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#\"\u003eAll industries and solutions\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n            \u003c/jqx-menu-items\u003e\r\n        \u003c/jqx-menu-item\u003e\r\n        \u003cjqx-menu-item\u003e\r\n            Products\r\n            \u003cjqx-menu-items\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#PCProducts\"\u003ePC products\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#MobileProducts\"\u003eMobile products\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#AllProducts\"\u003eAll products\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n            \u003c/jqx-menu-items\u003e\r\n        \u003c/jqx-menu-item\u003e\r\n        \u003cjqx-menu-item\u003e\r\n            Support\r\n            \u003cjqx-menu-items style='width: 200px;'\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#SupportHome\"\u003eSupport home\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#CustomerService\"\u003eCustomer Service\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#KB\"\u003eKnowledge base\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Books\"\u003eBooks\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Training\"\u003eTraining and certification\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#SupportPrograms\"\u003eSupport programs\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Forums\"\u003eForums\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Documentation\"\u003eDocumentation\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Updates\"\u003eUpdates\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n            \u003c/jqx-menu-items\u003e\r\n        \u003c/jqx-menu-item\u003e\r\n        \u003cjqx-menu-item\u003e\r\n            Communities\r\n            \u003cjqx-menu-items style='width: 200px;'\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Designers\"\u003eDesigners\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Developers\"\u003eDevelopers\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Educators\"\u003eEducators and students\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Partners\"\u003ePartners\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item type='separator'\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\r\n                    By resource\r\n                    \u003cjqx-menu-items\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#Labs\"\u003eLabs\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#TV\"\u003eTV\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#Forums\"\u003eForums\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#Exchange\"\u003eExchange\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#Blogs\"\u003eBlogs\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                        \u003cjqx-menu-item\u003e\u003ca href=\"#Experience Design\"\u003eExperience Design\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                    \u003c/jqx-menu-items\u003e\r\n                \u003c/jqx-menu-item\u003e\r\n            \u003c/jqx-menu-items\u003e\r\n        \u003c/jqx-menu-item\u003e\r\n        \u003cjqx-menu-item\u003e\r\n            Company\r\n            \u003cjqx-menu-items style='width: 180px;'\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#About\"\u003eAbout Us\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Press\"\u003ePress\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Investor\"\u003eInvestor Relations\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#CorporateAffairs\"\u003eCorporate Affairs\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Careers\"\u003eCareers\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Showcase\"\u003eShowcase\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Events\"\u003eEvents\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#ContactUs\"\u003eContact Us\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n                \u003cjqx-menu-item\u003e\u003ca href=\"#Become an affijqx-menu-itemate\"\u003eBecome an affiliate\u003c/a\u003e\u003c/jqx-menu-item\u003e\r\n            \u003c/jqx-menu-items\u003e\r\n        \u003c/jqx-menu-item\u003e\r\n    \u003c/jqx-menu-items\u003e\r\n\u003c/jqx-menu\u003e\r\n```\r\n\r\n### Navigation Bar\r\n\r\nThe ```jqx-navigation-bar``` tag helper adds a NavigationBar component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxnavigationbar.js\"\u003e\u003c/script\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC NavigationBar Example\";\r\n}\r\n\r\n\u003cjqx-navigation-bar height=\"300\" width=\"500\" theme=\"@ViewData[\"Theme\"]\"\u003e\r\n    \u003cjqx-navigation-bar-panel\u003e\r\n        \u003cjqx-navigation-bar-panel-header\u003eHeader 1\u003c/jqx-navigation-bar-panel-header\u003e\r\n        \u003cjqx-navigation-bar-panel-body\u003e\u003clabel style=\"padding: 15px;\"\u003eBody 1\u003c/label\u003e\u003c/jqx-navigation-bar-panel-body\u003e\r\n    \u003c/jqx-navigation-bar-panel\u003e\r\n    \u003cjqx-navigation-bar-panel\u003e\r\n        \u003cjqx-navigation-bar-panel-header\u003eHeader 2\u003c/jqx-navigation-bar-panel-header\u003e\r\n        \u003cjqx-navigation-bar-panel-body\u003e\u003clabel style=\"padding: 15px;\"\u003eBody 2\u003c/label\u003e\u003c/jqx-navigation-bar-panel-body\u003e\r\n    \u003c/jqx-navigation-bar-panel\u003e\r\n    \u003cjqx-navigation-bar-panel\u003e\r\n        \u003cjqx-navigation-bar-panel-header\u003eHeader 3\u003c/jqx-navigation-bar-panel-header\u003e\r\n        \u003cjqx-navigation-bar-panel-body\u003e\u003clabel style=\"padding: 15px;\"\u003eBody 3\u003c/label\u003e\u003c/jqx-navigation-bar-panel-body\u003e\r\n    \u003c/jqx-navigation-bar-panel\u003e  \r\n\u003c/jqx-navigation-bar\u003e\r\n\r\n```\r\n\r\n### Notification\r\n\r\nThe ```jqx-notification``` tag helper adds a Notification component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Notification Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Notification Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-button on-click=\"openMessage()\" theme=\"@ViewData[\"Theme\"]\"\u003eOpen Notification Message\u003c/jqx-button\u003e\r\n\u003cjqx-notification id=\"notification\" instance=\"getNotification()\" theme=\"@ViewData[\"Theme\"]\"\u003eNotification Message\u003c/jqx-notification\u003e\r\n\u003cscript\u003e\r\n    var notification = {};\r\n    function getNotification(instance) {\r\n        notification = instance;\r\n    }\r\n    function openMessage() {\r\n        notification.open();\r\n    }\r\n\u003c/script\u003e\r\n```\r\n\r\n### Number Input\r\n\r\nThe ```jqx-number-input``` tag helper adds a Number Input component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxnumberinput.js\"\u003e\u003c/script\u003e\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC NumberInput Example\";\r\n}\r\n\u003clabel\u003eDefault Input\u003c/label\u003e\r\n\r\n\u003cjqx-number-input spin-buttons=\"true\" theme=\"@ViewData[\"Theme\"]\" width=\"300\" height=\"25\" \u003e\u003c/jqx-number-input\u003e\r\n\u003clabel\u003eSimple Input\u003c/label\u003e\r\n\r\n\u003cjqx-number-input input-mode=\"simple\" spin-buttons=\"true\" theme=\"@ViewData[\"Theme\"]\" width=\"300\" height=\"25\"\u003e\u003c/jqx-number-input\u003e\r\n\r\n```\r\n\r\n### Panel\r\n\r\nThe ```jqx-panel``` tag helper adds a Panel component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Panel Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Panel Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-panel width=350 height=300 theme=\"@ViewData[\"Theme\"]\"\u003e\r\n    \u003cjqx-panel-body\u003e\r\n        \u003cdiv style='margin: 10px;'\u003e\r\n            \u003ch3\u003eEarly History of the Internet\u003c/h3\u003e\r\n        \u003c/div\u003e\r\n        \u003c!--Content--\u003e\r\n        \u003cdiv style='white-space: nowrap;'\u003e\r\n            \u003cul\u003e\r\n                \u003cli\u003e1961 First packet-switching papers\u003c/li\u003e\r\n                \u003cli\u003e1966 Merit Network founded\u003c/li\u003e\r\n                \u003cli\u003e1966 ARPANET planning starts\u003c/li\u003e\r\n                \u003cli\u003e1969 ARPANET carries its first packets\u003c/li\u003e\r\n                \u003cli\u003e1970 Mark I network at NPL (UK)\u003c/li\u003e\r\n                \u003cli\u003e1970 Network Information Center (NIC)\u003c/li\u003e\r\n                \u003cli\u003e1971 Merit Network's packet-switched network operational\u003c/li\u003e\r\n                \u003cli\u003e1971 Tymnet packet-switched network\u003c/li\u003e\r\n                \u003cli\u003e1972 Internet Assigned Numbers Authority (IANA) established\u003c/li\u003e\r\n                \u003cli\u003e1973 CYCLADES network demonstrated\u003c/li\u003e\r\n                \u003cli\u003e1974 Telenet packet-switched network\u003c/li\u003e\r\n                \u003cli\u003e1976 X.25 protocol approved\u003c/li\u003e\r\n                \u003cli\u003e1979 Internet Activities Board (IAB)\u003c/li\u003e\r\n                \u003cli\u003e1980 USENET news using UUCP\u003c/li\u003e\r\n                \u003cli\u003e1980 Ethernet standard introduced\u003c/li\u003e\r\n                \u003cli\u003e1981 BITNET established\u003c/li\u003e\r\n            \u003c/ul\u003e\r\n        \u003c/div\u003e\r\n    \u003c/jqx-panel-body\u003e\r\n\u003c/jqx-panel\u003e\r\n```\r\n\r\n### Password Input\r\n\r\nThe ```jqx-passwordinput``` tag helper adds a Password Input component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC PasswordInput Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Password Input Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n    \u003cdiv style='margin-top: 10px;'\u003e\r\n        Password Input\r\n    \u003c/div\u003e\r\n    \u003cjqx-password-input width=\"200\" height=\"25\" place-holder=\"Enter password:\" showStrength=\"true\"\u003e\u003c/jqx-password-input\u003e\r\n```\r\n\r\n### Popover\r\n\r\nThe ```jqx-popover``` tag helper adds a popover components to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Popover Example\";\r\n    List\u003cKeyValuePair\u003cstring, object\u003e\u003e settings = new List\u003cKeyValuePair\u003cstring, object\u003e\u003e()\r\n    {\r\n        new KeyValuePair\u003cstring, object\u003e(\"offset\", \"{left: -50, top: 0}\"),\r\n        new KeyValuePair\u003cstring, object\u003e(\"arrowOffsetValue\", 50),\r\n        new KeyValuePair\u003cstring, object\u003e(\"title\", \"Employees\"),\r\n        new KeyValuePair\u003cstring, object\u003e(\"showCloseButton\", true),\r\n        new KeyValuePair\u003cstring, object\u003e(\"selector\", \"button\"),\r\n        new KeyValuePair\u003cstring, object\u003e(\"theme\", ViewData[\"Theme\"])\r\n    };\r\n}\r\n\u003clabel\u003eASP .NET Core MVC PopOver Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cdiv class=\"jqx-widget-header\" style=\"height: 33px; border-width: 1px; border-style: solid; padding:10px;\" id=\"header\"\u003e\r\n    \u003cjqx-button style=\"float: right; margin-right: 10px; padding: 8px 12px; border-radius: 6px;\" theme=\"@ViewData[\"Theme\"]\" template=\"inverse\"\u003eView Employees\u003c/jqx-button\u003e\r\n\u003c/div\u003e\r\n\u003cjqx-popover settings=\"settings\"\u003e\r\n    \u003cdiv id=\"movies\"\u003e\r\n        \u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/nancy.png\"\u003e\u003c/td\u003e\u003ctd\u003eNancy Davolio\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSales Representative\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/andrew.png\"\u003e\u003c/td\u003e\u003ctd\u003eAndrew Fuller\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eVice President, Sales\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/janet.png\"\u003e\u003c/td\u003e\u003ctd\u003eJanet Leverling\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSales Representative\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/margaret.png\"\u003e\u003c/td\u003e\u003ctd\u003eMargaret Peacock\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSales Representative\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/steven.png\"\u003e\u003c/td\u003e\u003ctd\u003eSteven Buchanan\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSales Manager\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/michael.png\"\u003e\u003c/td\u003e\u003ctd\u003eMichael Suyama\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSales Representative\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/robert.png\"\u003e\u003c/td\u003e\u003ctd\u003eRobert King\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSales Representative\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/laura.png\"\u003e\u003c/td\u003e\u003ctd\u003eLaura Callahan\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eInside Sales Coordinator\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003ctable style=\"min-width: 150px;\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"width: 55px;\" rowspan=\"2\"\u003e\u003cimg height=\"50\" width=\"45\" src=\"~/images/anne.png\"\u003e\u003c/td\u003e\u003ctd\u003eAnne Dodsworth\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSales Representative\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\r\n    \u003c/div\u003e\r\n\u003c/jqx-popover\u003e\r\n```\r\n\r\n### Progress Bar\r\n\r\nThe ```jqx-progress-bar``` tag helper adds a Progress Bar component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxprogressbar.js\"\u003e\u003c/script\u003e\r\n\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ProgressBar Example\";\r\n}\r\n\r\n\u003cjqx-progress-bar id=\"toolbar\" theme=\"@ViewData[\"theme\"]\" value=\"50\" width=\"300\" height=\"35\"\u003e\u003c/jqx-progress-bar\u003e\r\n```\r\n\r\n### Radio Button\r\n\r\nThe ```jqx-radio-button``` tag helper adds a Radio Button component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxradiobutton.js\"\u003e\u003c/script\u003e\r\n\r\n@model jQWidgetsDemosContext\r\n@using jQWidgets.AspNet.Core.Models;\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Radio Button Example\";\r\n    Contract contract = Model.ContractDuration;\r\n    bool year = false;\r\n    bool halfYear = false;\r\n    bool quarterYear = false;\r\n    bool month = false;\r\n    if (contract == Contract.Year)\r\n    {\r\n        year = true;\r\n    }\r\n    if (contract == Contract.HalfYear)\r\n    {\r\n        halfYear = true;\r\n    }\r\n    if (contract == Contract.QuarterYear)\r\n    {\r\n        quarterYear = true;\r\n    }\r\n    if (contract == Contract.Month)\r\n    {\r\n        month = true;\r\n    }\r\n}\r\n\r\n\u003cjqx-radio-button width=\"200\" height=\"30\" theme=\"@ViewData[\"Theme\"]\" on-checked=\"@Url.Action(\"Year\", \"TagHelpers\")\" checked=\"year\"\u003e12 Months Contract\u003c/jqx-radio-button\u003e\r\n\u003cjqx-radio-button width=\"200\" height=\"30\" theme=\"@ViewData[\"Theme\"]\" on-checked=\"@Url.Action(\"HalfYear\", \"TagHelpers\")\" checked=\"halfYear\"\u003e6 Months Contract\u003c/jqx-radio-button\u003e\r\n\u003cjqx-radio-button width=\"200\" height=\"30\" theme=\"@ViewData[\"Theme\"]\" on-checked=\"@Url.Action(\"QuarterYear\", \"TagHelpers\")\" checked=\"quarterYear\"\u003e3 Months Contract\u003c/jqx-radio-button\u003e\r\n\u003cjqx-radio-button width=\"200\" height=\"30\" theme=\"@ViewData[\"Theme\"]\" on-checked=\"@Url.Action(\"Month\", \"TagHelpers\")\" checked=\"month\"\u003e1 Month Contract\u003c/jqx-radio-button\u003e\r\n```\r\n\r\n### Range Selector\r\n\r\nThe ```jqx-range-selector``` tag helper adds a Range Selector component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC RangeSelector Example\";\r\n    List\u003cKeyValuePair\u003cstring, object\u003e\u003e settings = new List\u003cKeyValuePair\u003cstring, object\u003e\u003e()\r\n    {\r\n        new KeyValuePair\u003cstring, object\u003e(\"width\", 750),\r\n        new KeyValuePair\u003cstring, object\u003e(\"height\", 100),\r\n        new KeyValuePair\u003cstring, object\u003e(\"min\", 0),\r\n        new KeyValuePair\u003cstring, object\u003e(\"minorTicksInterval\", 1),\r\n        new KeyValuePair\u003cstring, object\u003e(\"majorTicksInterval\", 10),\r\n        new KeyValuePair\u003cstring, object\u003e(\"max\", 200),\r\n        new KeyValuePair\u003cstring, object\u003e(\"range\", \"{ from: 10, to: 50 }\"),\r\n        new KeyValuePair\u003cstring, object\u003e(\"theme\", ViewData[\"Theme\"])\r\n    };\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Range Selector Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-range-selector settings=\"settings\" \u003e\u003c/jqx-range-selector\u003e\r\n```\r\n\r\n### Rating\r\n\r\nThe ```jqx-rating``` tag helper adds a Rating component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Rating Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Rating Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-rating theme=\"@ViewData[\"theme\"]\" value=\"3\" width=\"200\" height=\"35\"\u003e\u003c/jqx-rating\u003e\r\n```\r\n\r\n### Ribbon\r\n\r\nThe ```jqx-ribbon``` tag helper adds a Ribbon component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Ribbon Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Ribbon Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-ribbon mode=\"popup\" theme=\"@ViewData[\"Theme\"]\" width=\"850\"\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header style=\"margin-left: 30px;\"\u003eNode.js\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e Node.js is an event-driven I/O server-side JavaScript environment based on V8. It\r\n        is intended for writing scalable network programs such as web servers. It was created\r\n        by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.\r\n        Similar environments written in other programming languages include Twisted for\r\n        Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.\r\n        Unlike most JavaScript, it is not executed in a web browser, but is instead a form\r\n        of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js\r\n        includes a REPL environment for interactive testing.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003eJavaServer Pages\u003c/jqx-tab-panel-header\u003e\r\n            \u003cjqx-tab-panel-body\u003e\r\n                JavaServer Pages (JSP) is a Java technology that helps software developers serve\r\n                dynamically generated web pages based on HTML, XML, or other document types. Released\r\n                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address\r\n                the perception that the Java programming environment didn't provide developers with\r\n                enough support for the Web. To deploy and run, a compatible web server with servlet\r\n                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications\r\n                from Sun Microsystems and the JCP (Java Community Process) must both be met by the\r\n                container.\r\n            \u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003eActive Server Pages\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e ASP.NET is a web application framework developed and marketed by Microsoft to allow\r\n            programmers to build dynamic web sites, web applications and web services. It was\r\n            first released in January 2002 with version 1.0 of the .NET Framework, and is the\r\n            successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built\r\n            on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code\r\n            using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET\r\n            components to process SOAP messages.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003ePython\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e Python is a general-purpose, high-level programming language[5] whose design philosophy\r\n            emphasizes code readability. Python claims to \"[combine] remarkable power with very\r\n            clear syntax\",[7] and its standard library is large and comprehensive. Its use of\r\n            indentation for block delimiters is unique among popular programming languages.\r\n            Python supports multiple programming paradigms, primarily but not limited to object-oriented,\r\n            imperative and, to a lesser extent, functional programming styles. It features a\r\n            fully dynamic type system and automatic memory management, similar to that of Scheme,\r\n            Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting\r\n            language, but is also used in a wide range of non-scripting contexts.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003ePerl\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e Perl is a high-level, general-purpose, interpreted, dynamic programming language.\r\n            Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting\r\n            language to make report processing easier. Since then, it has undergone many changes\r\n            and revisions and become widely popular amongst programmers. Larry Wall continues\r\n            to oversee development of the core language, and its upcoming version, Perl 6. Perl\r\n            borrows features from other programming languages including C, shell scripting (sh),\r\n            AWK, and sed.[5] The language provides powerful text processing facilities without\r\n            the arbitrary data length limits of many contemporary Unix tools, facilitating easy\r\n            manipulation of text files.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n\u003c/jqx-ribbon\u003e\r\n```\r\n\r\n### Scheduler\r\n\r\nThe ```jqx-scheduler``` tag helper adds a Scheduler component to a web page.\r\n\r\n```\r\ncreate - {{String}} which determines the URL called when a Scheduler appointment is added.\r\ndelete - {{String}} which determines the URL called when a Scheduler appointment is deleted.\r\nedit - {{String}} which determines the URL called when a Scheduler appointment is updated.\r\ninstance - {{String}} which determines the javascript member within the Script tag which refers to the Input's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.\r\nsource-id - {{String}} which determines the data source's ID member.\r\nsource-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.\r\nsource-root - {{String}} which determines the data source's Root member.\r\nsource-total-records - {{Integer}} which determines the data source's TotalRecords member.\r\nsource-url - {{String}} which determines the data source's URL.\r\nsource-model - {{Model}} which determines the data source's Model.\r\n```\r\n\r\n```jqx-scheduler-views``` tag helper defines the Scheduler's views collection. \u003cbr /\u003e\r\n```jqx-scheduler-view``` tag helper defines a Scheduler view. \u003cbr /\u003e\r\n```jqx-scheduler-time-ruler``` tag helper defines the Scheduler's time ruler.\r\n\r\n### ScrollBar\r\n\r\nThe ```jqx-scrollbar``` tag helper adds a ScrollBar component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ScrollBar Example\";\r\n    List\u003cKeyValuePair\u003cstring, object\u003e\u003e settings = new List\u003cKeyValuePair\u003cstring, object\u003e\u003e()\r\n    {\r\n        new KeyValuePair\u003cstring, object\u003e(\"width\", 450),\r\n        new KeyValuePair\u003cstring, object\u003e(\"height\", 18),\r\n        new KeyValuePair\u003cstring, object\u003e(\"min\", 0),\r\n        new KeyValuePair\u003cstring, object\u003e(\"max\", 10000),\r\n        new KeyValuePair\u003cstring, object\u003e(\"theme\", ViewData[\"Theme\"])\r\n    };\r\n}\r\n\u003cscript\u003e\r\n    function valueChanged(event) {\r\n        $(\"#log\").html(\"Horizontal (\" + parseInt(event.currentValue) + \")\");\r\n    }\r\n\u003c/script\u003e\r\n\u003clabel\u003eASP .NET Core MVC ScrollBar Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-scrollbar on-valueChanged=\"valueChanged()\" settings=\"settings\" \u003e\u003c/jqx-scrollbar\u003e\r\n\u003cbr /\u003e\u003cbr /\u003e\r\n\u003cdiv id=\"log\"\u003e\u003c/div\u003e\r\n```\r\n\r\n### ScrollView\r\n\r\nThe ```jqx-scrollview``` tag helper adds a ScrollView component to a web page.\r\n\r\n```html\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.SalesEmployee\u003e\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC ScrollView Example\";\r\n}\r\n\u003cstyle type=\"text/css\"\u003e\r\n    .photo {\r\n        width: 600px;\r\n        height: 450px;\r\n        background-color: #000;\r\n        background-position: center;\r\n        background-repeat: no-repeat;\r\n    }\r\n\u003c/style\u003e\r\n\u003clabel\u003eASP .NET Core MVC ScrollView Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-scrollview theme=\"@ViewData[\"Theme\"]\" width=\"600\" height=\"450\" id=\"photoGallery\"\u003e\r\n    \u003cdiv\u003e\u003cdiv class=\"photo\" style=\"background-image: url(/images/imageNature1.jpg)\"\u003e\u003c/div\u003e\u003c/div\u003e\r\n    \u003cdiv\u003e\u003cdiv class=\"photo\" style=\"background-image: url(/images/imageNature2.jpg)\"\u003e\u003c/div\u003e\u003c/div\u003e\r\n    \u003cdiv\u003e\u003cdiv class=\"photo\" style=\"background-image: url(/images/imageNature3.jpg)\"\u003e\u003c/div\u003e\u003c/div\u003e\r\n    \u003cdiv\u003e\u003cdiv class=\"photo\" style=\"background-image: url(/images/imageNature4.jpg)\"\u003e\u003c/div\u003e\u003c/div\u003e\r\n    \u003cdiv\u003e\u003cdiv class=\"photo\" style=\"background-image: url(/images/imageNature5.jpg)\"\u003e\u003c/div\u003e\u003c/div\u003e\r\n\u003c/jqx-scrollview\u003e\r\n```\r\n\r\n### Slider\r\n\r\nThe ```jqx-slider``` tag helper adds a Bullet Chart component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Slider Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Slider Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-slider theme=\"@ViewData[\"Theme\"]\" width=\"350\" height=\"50\" \u003e\u003c/jqx-slider\u003e\r\n```\r\n\r\n### Splitter\r\n\r\nThe ```jqx-splitter``` tag helper adds a Bullet Chart component to a web page.\r\n\r\n```html\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Splitter Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC Splitter Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-splitter theme=\"@ViewData[\"theme\"]\" width=\"800\" height=\"400\"\u003e\r\n    \u003cjqx-splitter-panel\u003e\r\n        \u003cjqx-tabs theme=\"@ViewData[\"theme\"]\" style=\"border:none;\" width=\"100%\" height=\"100%\"\u003e\r\n            \u003cjqx-tab-panel\u003e\r\n                \u003cjqx-tab-panel-header style=\"margin-left:30px;\"\u003eTab 1\u003c/jqx-tab-panel-header\u003e\r\n                \u003cjqx-tab-panel-body\u003eContent 1\u003c/jqx-tab-panel-body\u003e\r\n            \u003c/jqx-tab-panel\u003e\r\n            \u003cjqx-tab-panel\u003e\r\n                \u003cjqx-tab-panel-header\u003eTab 2\u003c/jqx-tab-panel-header\u003e\r\n                \u003cjqx-tab-panel-body\u003eContent 2\u003c/jqx-tab-panel-body\u003e\r\n            \u003c/jqx-tab-panel\u003e\r\n        \u003c/jqx-tabs\u003e\r\n    \u003c/jqx-splitter-panel\u003e\r\n    \u003cjqx-splitter-panel\u003e\r\n        \u003cjqx-tree style=\"border:none;\" height=\"100%\" width=\"100%\"\u003e\r\n            \u003cjqx-tree-items\u003e\r\n                \u003cjqx-tree-item\u003eItem 1\u003c/jqx-tree-item\u003e\r\n                \u003cjqx-tree-item\u003eItem 2\u003c/jqx-tree-item\u003e\r\n                \u003cjqx-tree-item\u003eItem 3\r\n                    \u003cjqx-tree-items\u003e\r\n                        \u003cjqx-tree-item\u003eSub Item 3.1\u003c/jqx-tree-item\u003e\r\n                        \u003cjqx-tree-item\u003eSub Item 3.2\u003c/jqx-tree-item\u003e\r\n                        \u003cjqx-tree-item\u003eSub Item 3.3\u003c/jqx-tree-item\u003e\r\n            \u003c/jqx-tree-items\u003e\r\n                \u003c/jqx-tree-item\u003e\r\n                \u003cjqx-tree-item\u003eItem 4\u003c/jqx-tree-item\u003e\r\n                \u003cjqx-tree-item\u003eItem 5\u003c/jqx-tree-item\u003e\r\n     \u003c/jqx-tree-items\u003e\r\n        \u003c/jqx-tree\u003e\r\n    \u003c/jqx-splitter-panel\u003e\r\n\u003c/jqx-splitter\u003e\r\n```\r\n\r\n```jqx-splitter-panel``` tag helper defines a splitter panel. \r\nThe Splitter component should have exactly two such tag helpers within the main ```jqx-splitter``` tag helper.\r\n\r\n### Switch Button\r\n\r\nThe ```jqx-switch-button``` tag helper adds a Switch Button component to a web page.\r\n\r\n```html\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Switch Button Example\";\r\n}\r\n\u003clabel\u003eASP .NET Core MVC SwitchButton Tag Helper Example\u003c/label\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\u003cjqx-switch-button theme=\"@ViewData[\"Theme\"]\" width=\"150\" height=\"30\"\u003e\u003c/jqx-switch-button\u003e\r\n```\r\n\r\n### Tabs\r\n\r\nThe ```jqx-tabs``` tag helper adds a Tabs component to a web page. \u003cbr /\u003e\r\n```jqx-tab-panel``` tag helper defines a Tab's panel. \u003cbr /\u003e\r\n```jqx-tab-panel-header``` tag helper defines a panel's header. \u003cbr /\u003e\r\n```jqx-tab-panel-body``` tag helper defines a panel's body.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxtabs.js\"\u003e\u003c/script\u003e\r\n\r\n\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Tabs Example\";\r\n}\r\n\r\n\u003cscript\u003e\r\n \r\n\u003c/script\u003e\r\n\u003cjqx-tabs theme=\"@ViewData[\"Theme\"]\" width=\"850\"\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header style=\"margin-left: 30px;\"\u003eNode.js\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e Node.js is an event-driven I/O server-side JavaScript environment based on V8. It\r\n        is intended for writing scalable network programs such as web servers. It was created\r\n        by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.\r\n        Similar environments written in other programming languages include Twisted for\r\n        Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.\r\n        Unlike most JavaScript, it is not executed in a web browser, but is instead a form\r\n        of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js\r\n        includes a REPL environment for interactive testing.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003eJavaServer Pages\u003c/jqx-tab-panel-header\u003e\r\n            \u003cjqx-tab-panel-body\u003e\r\n                JavaServer Pages (JSP) is a Java technology that helps software developers serve\r\n                dynamically generated web pages based on HTML, XML, or other document types. Released\r\n                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address\r\n                the perception that the Java programming environment didn't provide developers with\r\n                enough support for the Web. To deploy and run, a compatible web server with servlet\r\n                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications\r\n                from Sun Microsystems and the JCP (Java Community Process) must both be met by the\r\n                container.\r\n            \u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003eActive Server Pages\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e ASP.NET is a web application framework developed and marketed by Microsoft to allow\r\n            programmers to build dynamic web sites, web applications and web services. It was\r\n            first released in January 2002 with version 1.0 of the .NET Framework, and is the\r\n            successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built\r\n            on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code\r\n            using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET\r\n            components to process SOAP messages.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003ePython\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e Python is a general-purpose, high-level programming language[5] whose design philosophy\r\n            emphasizes code readability. Python claims to \"[combine] remarkable power with very\r\n            clear syntax\",[7] and its standard library is large and comprehensive. Its use of\r\n            indentation for block delimiters is unique among popular programming languages.\r\n            Python supports multiple programming paradigms, primarily but not limited to object-oriented,\r\n            imperative and, to a lesser extent, functional programming styles. It features a\r\n            fully dynamic type system and automatic memory management, similar to that of Scheme,\r\n            Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting\r\n            language, but is also used in a wide range of non-scripting contexts.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n    \u003cjqx-tab-panel\u003e\r\n        \u003cjqx-tab-panel-header\u003ePerl\u003c/jqx-tab-panel-header\u003e\r\n        \u003cjqx-tab-panel-body\u003e Perl is a high-level, general-purpose, interpreted, dynamic programming language.\r\n            Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting\r\n            language to make report processing easier. Since then, it has undergone many changes\r\n            and revisions and become widely popular amongst programmers. Larry Wall continues\r\n            to oversee development of the core language, and its upcoming version, Perl 6. Perl\r\n            borrows features from other programming languages including C, shell scripting (sh),\r\n            AWK, and sed.[5] The language provides powerful text processing facilities without\r\n            the arbitrary data length limits of many contemporary Unix tools, facilitating easy\r\n            manipulation of text files.\u003c/jqx-tab-panel-body\u003e\r\n    \u003c/jqx-tab-panel\u003e\r\n\u003c/jqx-tabs\u003e\r\n\r\n```\r\n\r\n### TextArea\r\n\r\nThe ```jqx-textarea``` tag helper adds a Text Area component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxtextarea.js\"\u003e\u003c/script\u003e\r\n\r\n\r\n@model IEnumerable\u003cjQWidgets.AspNet.Core.Models.SalesEmployee\u003e\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC TextArea Example\";\r\n}\r\n\u003cscript\u003e\r\n    function change(event) {\r\n        var args = event.args;\r\n        document.getElementById(\"log\").innerHTML = \"Label: \" + args.label + \", Value: \" + args.value;;\r\n    }\r\n\u003c/script\u003e\r\n\u003clabel\u003eEnter Name:\u003c/label\u003e\r\n\u003cjqx-text-area on-change=\"change()\" display-member=\"Name\" selected-index=\"0\" value-member=\"ID\" theme=\"@ViewData[\"Theme\"]\" width=\"250\" height=\"100\" source=\"Model\"\u003e\u003c/jqx-text-area\u003e\r\n(ex: An)\r\n\u003cbr /\u003e\u003cbr /\u003e\r\n\u003cdiv id=\"log\"\u003e\u003c/div\u003e\r\n```\r\n\r\n### Toolbar\r\n\r\nThe ```jqx-tool-bar``` tag helper adds a Toolbar component to a web page.\r\n\r\n```html\r\n\u003cscript src=\"~/jqwidgets/jqxbuttons.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxscrollbar.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxlistbox.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxinput.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxdropdownlist.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxcombobox.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"~/jqwidgets/jqxtoolbar.js\"\u003e\u003c/script\u003e\r\n\r\n\r\n@using jQWidgets.AspNetCore.Mvc.TagHelpers\r\n\r\n@{\r\n    ViewData[\"Title\"] = \"ASP .NET MVC Toolbar Example\";\r\n}\r\n\u003cstyle type=\"text/css\"\u003e\r\n    .buttonIcon {\r\n        margin: -5px 0 0 -3px;\r\n        width: 16px;\r\n        height: 17px;\r\n    }\r\n\u003c/style\u003e\r\n\r\n\u003cscript\u003e\r\n    function initTools (type, index, tool, menuToolIninitialization) {\r\n        var theme = $(\"#toolbar\").jqxToolBar(\"theme\");\r\n\r\n        if (type == \"toggleButton\") {\r\n            var icon = $(\"\u003cdiv class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-\" + theme + \" buttonIcon'\u003e\u003c/div\u003e\");\r\n        }\r\n        switch (index) {\r\n            case 0:\r\n                icon.addClass(\"jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-\" + theme);\r\n                icon.attr(\"title\", \"Bold\");\r\n                tool.append(icon);\r\n                break;\r\n            case 1:\r\n                icon.addClass(\"jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-\" + theme);\r\n                icon.attr(\"title\", \"Italic\");\r\n                tool.append(icon);\r\n                break;\r\n            case 2:\r\n                icon.addClass(\"jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-\" + theme);\r\n                icon.attr(\"title\", \"Underline\");\r\n                tool.append(icon);\r\n                break;\r\n            case 3:\r\n                tool.jqxToggleButton({ width: 80, toggled: true });\r\n                tool.text(\"Enabled\");\r\n                tool.on(\"click\", function () {\r\n                    var toggled = tool.jqxToggleButton(\"toggled\");\r\n                    if (toggled) {\r\n                        tool.text(\"Enabled\");\r\n                    } else {\r\n                        tool.text(\"Disabled\");\r\n                    }\r\n                });\r\n                break;\r\n            case 4:\r\n                tool.jqxDropDownList({ width: 130, source: [\"\u003cspan style='font-family: Courier New;'\u003eCourier New\u003c/span\u003e\", \"\u003cspan style='font-family: Times New Roman;'\u003eTimes New Roman\u003c/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjqwidgets%2Faspnetcore-mvc-tag-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjqwidgets%2Faspnetcore-mvc-tag-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjqwidgets%2Faspnetcore-mvc-tag-helpers/lists"}