https://github.com/jqwidgets/aspnetcore-mvc-tag-helpers
https://github.com/jqwidgets/aspnetcore-mvc-tag-helpers
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jqwidgets/aspnetcore-mvc-tag-helpers
- Owner: jqwidgets
- Created: 2016-10-11T13:10:25.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-12T17:08:39.000Z (over 8 years ago)
- Last Synced: 2025-06-23T11:50:57.107Z (12 months ago)
- Language: CSS
- Size: 7.02 MB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ASP .NET Core MVC Tag Helpers
## What is a ASP .NET Core MVC Tag Helper?
Tag Helper enables server-side code to participate in creating and rendering HTML elements in Razor files.
## ASP .NET Core MVC Demos
[ASP .NET Core MVC Tag Helpers Demos page](http://www.jqwidgets.com/jquery-widgets-demo/demos/asp.net-core-mvc-tag-helpers/index.htm).
## What Tag Helpers provide?
In general, HTML-friendly experience.
Razor markup using Tag Helpers looks like standard HTML.
Front-end designers familiar with HTML/CSS/JavaScript can edit
Razor without learning C# Razor syntax. ASP .NET MVC Core
Tag Helpers make you more productive and able to produce more
robust, reliable, and maintainable code using information only
available on the server. With ASP .NET Tag Helpers, you also get
a rich IntelliSense environment for creating HTML and Razor markup.
## Setup
### 1. Create a new ASP .NET Core Web Application
### 2. Reference the Tag Helpers
Install the Tag Helper's Nuget package from https://www.nuget.org/packages/jQWidgets.AspNetCore.Mvc.TagHelpers/1.0.0.
### 3. Update _ViewImports.cshtml
```
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers
@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration
```
### 4. Build the Solution
Click Build in the top menu bar of Visual Studio, then click Build Solution to Build the solution
### 5. Add a Tag Helper to a Page
We can now add a Tag Helper to one of the views (pages).
For example, we will add the Tag Helper to Views\Home\About.cshtml.
While typing, IntelliSense suggest the existing Tag Helpers:
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC Grid Example";
}
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC Grid Example";
}
```
## Bootstrap UI ASP.NET Core Tag Helpers
For those of you who use Twitter Bootstrap, we have yet another
good set of Tag Helpers. We developed more than two dozen Tag Helpers
to help you use Bootstrap with the new ASP.NET MVC Core.
You can find more about the project, see a live demo and download
the library from our
[Bootstrap Tag Helpers page](http://aspcore.jqwidgets.com/bootstrap).
## Tag Helpers
### Grid
The ```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.
```html
```
The 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:
```
create - {{String}} which determines the URL called when a Grid row is added.
datafield-for - {{ModelExpression}} used for model binding and determines the column's bound member.
delete - {{String}} which determines the URL called when a Grid row is deleted.
edit - {{String}} which determines the URL called when the Grid is edited.
instance - {{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.
server-processing - {{Boolean}} which determines whether server processing is enabled.
source-id - {{String}} which determines the data source's ID member.
source-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
source-root - {{String}} which determines the data source's Root member.
source-total-records - {{Integer}} which determines the data source's TotalRecords member.
source-url - {{String}} which determines the data source's URL.
source-model - {{Model}} which determines the data source's Model.
```
```jqx-grid-columns``` tag helper should be defined within the ```jqx-grid``` tag helper and defines the Grid columns collection.
```jqx-grid-column``` tag helper should be defined within the ```jqx-grid-columns``` tag helper and defines a Grid column.
```jqx-grid-column-groups``` tag helper should be defined within the ```jqx-grid``` tag helper and defines the Grid columns hierarchy.
```jqx-grid-column-group``` tag helper should be defined within the ```jqx-grid-column-groups``` tag helper and defines a Grid column group.
### Bar Gauge
The ```jqx-bar-gauge``` tag helper adds a Bar Gauge component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Bar Gauge Example";
List ranges = new List()
{
"{ start-value: 0, end-value: 200, color: \"#000000\", opacity: 0.5 }",
"{ start-value: 200, end-value: 250, color: \"#000000\", opacity: 0.3 }",
"{ start-value: 250, end-value: 300, color: \"#000000\", opacity: 0.1 }"
};
List barGaugeValues = new List()
{
102, 115, 130, 137
};
}
ASP .NET MVC BarGauge Example
```
```
### Bullet Chart
The ```jqx-bullet-chart``` tag helper adds a Bullet Chart component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
BulletChartDataObject pointer = new BulletChartDataObject()
{
Value = 270,
Label = "Revenue 2016 YTD",
Size = "25%",
Color = "Black"
};
BulletChartDataObject target = new BulletChartDataObject()
{
Value = 260,
Label = "Revenue 2015 YTD",
Size = "4",
Color = "Black"
};
BulletChartDataObject ticks = new BulletChartDataObject()
{
Position = "both",
Interval = 50,
Size = "10"
};
List ranges = new List()
{
new BulletChartRange()
{
StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
},
new BulletChartRange()
{
StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
},
new BulletChartRange()
{
StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
}
};
}
ASP .NET MVC Core Bullet Chart Tag Helper Example
```
### Button
The ```jqx-button``` tag helper adds a Button component to a web page.
```jqx-repeat-button``` add a Repeat Button and ```jqx-toggle-button``` adds a toggle button
to the web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Button, ToggleButton and RepeatButton Example";
}
ASP .NET MVC Button, ToggleButton and RepeatButton Example
Button
Toggle Button
Repeat Button
```
### Button Group
The ```jqx-button-group``` tag helper adds a Button Group Chart component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC ButtonGroup Example";
}
ASP .NET Core MVC Button Group Tag Helper Example
Default Mode
Left
Center
Right
Radio Mode
Left
Center
Right
CheckBox Mode
Left
Center
Right
```
### Calendar
The ```jqx-calendar``` tag helper adds a Calendar component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Calendar Example";
}
ASP .NET Core MVC Calendar Tag Helper Example
```
### Chart
The ```jqx-chart``` tag helper adds a Chart component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC Pie Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 0, Top = 0, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle() { Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
}
ASP .NET Core MVC Chart Tag Helper Example
```
```jqx-chart-series-groups``` tag helper should be defined within the ```jqx-chart``` tag helper and
defines the Chart series groups collection. ```jqx-chart-serie-group``` tag helper should be
defined within the ```jqx-chart-series-groups``` tag helper and defines a Chart serie group.
```jqx-chart-series``` tag helper should be defined within the ```jqx-chart-serie-group``` tag helper
and defines the Chart series collection.
```jqx-chart-serie``` tag helper should be defined within the ```jqx-chart-series``` tag helper and defines a Chart serie.
The ```for``` and ```radiusFor``` members can be used for model binding.
```jqx-chart-x-axis``` tag helper should be defined within the ```jqx-chart``` tag helper and defines the Chart's X Axis.
The for member can be used for model binding.
```jqx-chart-value-axis``` tag helper should be defined within the ```jqx-chart``` tag helper and defines the Chart's Value Axis.
```jqx-chart-title``` tag helper should be defined within the ```jqx-chart-value-axis``` tag helper and defines the Chart's Title.
```jqx-chart-labels``` tag helper should be defined within the ```jqx-chart-value-axis``` tag helper and defines the Chart's Labels.
```jqx-chart-range-selector``` tag helper should be defined within the ```jqx-chart``` tag helper and defines the Chart's Range selector.
```html
@model IEnumerable
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Bubble Chart Example";
var item = Model.FirstOrDefault();
Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 90, Top = 0, Right = 0, Bottom = 10 };
FormatSettings formatSettings = new FormatSettings() { Prefix = "$", ThousandsSeparator="," };
}
ASP .NET MVC Core Bubble Chart Example
```
### CheckBox
The ```jqx-check-box``` tag helper adds a CheckBox component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC CheckBox Example";
}
ASP .NET Core MVC CheckBox Example
Choose Optional Features:
@foreach (var item in Model.CarFeatures)
{
@item.Key
}
Submit
```
### Color Picker
The ```jqx-color-picker``` tag helper adds a Color Picker component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC ColorPicker Example";
}
ASP .NET Core MVC ColorPicker Example
```
### Combo Box
The ```jqx-combo-box``` tag helper adds a ComboBox component to a web page.
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC ComboBox Example";
}
@{
var employee = Model.FirstOrDefault();
}
ASP .NET Core MVC ComboBox Example
Add/Delete/Update
Name:
Add Item
Delete Item
Update Item
var list = {};
function addItem() {
list.addItem($("#name").val());
}
function removeItem() {
var item = list.getSelectedItem();
if (item)
{
list.removeItem(item);
}
}
function updateItem() {
var item = list.getSelectedItem();
if (item)
{
list.updateItem({value: item.value, label: $("#name").val() }, item);
}
}
function listInstance(instance) {
list = instance;
}
```
```
create - {{String}} which determines the URL called when a ComboBox item is added.
for - {{ModelExpression}} used for model binding and determines the label member.
value-for - {{ModelExpression}} used for model binding and determines the value member.
delete - {{String}} which determines the URL called when a ComboBox item is deleted.
edit - {{String}} which determines the URL called when a ComboBox item is updated.
instance - {{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.
server-processing - {{Boolean}} which determines whether server processing is enabled.
source-id - {{String}} which determines the data source's ID member.
source-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
source-root - {{String}} which determines the data source's Root member.
source-total-records - {{Integer}} which determines the data source's TotalRecords member.
source-url - {{String}} which determines the data source's URL.
source-model - {{Model}} which determines the data source's Model.
```
### Complex Input
The ```jqx-complex-input``` tag helper adds a Complex Input component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Complex Input Example";
}
ASP .NET Core MVC Complex Input Example
```
### DataTable
The ```jqx-data-table``` tag helper adds a DataTable component to a web page.
The DataTable tag helper shares the same API members as the Javascript DataTable widget i.e all properties, methods and events can be used.
Additional properties for the ```jqx-data-table``` tag helper are:
```
create - {{String}} which determines the URL called when a DataTable row is added.
datafield-for - {{ModelExpression}} used for model binding and determines the column's bound member.
delete - {{String}} which determines the URL called when a DataTable row is deleted.
edit - {{String}} which determines the URL called when the DataTable is edited.
instance - {{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.
server-processing - {{Boolean}} which determines whether server processing is enabled.
source-id - {{String}} which determines the data source's ID member.
source-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
source-root - {{String}} which determines the data source's Root member.
source-total-records - {{Integer}} which determines the data source's TotalRecords member.
source-url - {{String}} which determines the data source's URL.
source-model - {{Model}} which determines the data source's Model.
```
```jqx-datatable-columns``` tag helper should be defined within the ```jqx-datatable``` tag helper and defines the DataTable columns collection.
```jqx-datatable-column``` tag helper should be defined within the ```jqx-datatable-columns``` tag helper and defines a DataTable column.
```jqx-datatable-column-groups``` tag helper should be defined within the ```jqx-datatable``` tag helper and defines the DataTable columns hierarchy.
```jqx-datatable-column-group``` tag helper should be defined within the ```jqx-datatable-column-groups``` tag helper and defines a DataTable column group.
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC DataTable Example";
}
ASP .NET Core MVC DataTable Tag Helper Example
```
### DateTimeInput
The ```jqx-datetime-input``` tag helper adds a DateTimeInput component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC DateTimeInput Example";
}
Date Input
```
### Docking
The ```jqx-docking``` tag helper adds a Bullet Chart component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Docking Example";
}
ASP .NET Core MVC Docking Example
Title 1.1
Content 1.1
Title 1.2
Content 1.2
Title 2.1
Content 2.1
Title 2.2
Content 2.2
```
```jqx-docking-panel``` tag helper defines a docking panel.
```jqx-docking-window``` tag helper defines a docking window.
```jqx-docking-window-header``` tag helper defines a docking window's header.
```jqx-docking-window-body``` tag helper defines a docking window's body.
### Docking Layout
The jqx-docking-layout tag helper adds a Docking Layout component to a web page.
```html
@model IEnumerable
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Docking Layout Example";
// Create Layout Object.
List layout = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutGroup,
Orientation = Orientation.Horizontal,
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.AutoHideGroup,
Alignment = Alignment.Left,
Width = "80",
Unpinned-width = "200",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Toolbox",
ContentContainer = "ToolboxPanel"
},
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Helper",
ContentContainer = "HelperPanel"
}
}
},
new LayoutItem()
{
Type = LayoutItemType.LayoutGroup,
Orientation = Orientation.Vertical,
Width = "500",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.DocumentGroup,
Height = "400",
MinHeight = "200",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.DocumentPanel,
Title = "Document 1",
ContentContainer = "Document1Panel"
},
new LayoutItem()
{
Type = LayoutItemType.DocumentPanel,
Title = "Document 2",
ContentContainer = "Document2Panel"
}
}
},
new LayoutItem()
{
Type = LayoutItemType.TabbedGroup,
Height = "200",
PinnedHeight = "30",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Error List",
ContentContainer = "ErrorListPanel"
}
}
}
}
},
new LayoutItem()
{
Type = LayoutItemType.TabbedGroup,
Width = "220",
MinWidth = "200",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Solution Explorer",
ContentContainer = "SolutionExplorerPanel",
InitContent = "InitSolutionExplorerPanel()"
},
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Properties",
ContentContainer= "PropertiesPanel"
}
}
}
}
},
new LayoutItem()
{
Type = LayoutItemType.FloatGroup,
Width = "500",
Height = "300",
Position = new Position()
{
X = 350,
Y = 250
},
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Output",
ContentContainer = "OutputPanel",
Selected = true
}
}
}
};
}
function InitSolutionExplorerPanel() {
$('#solutionExplorerTree')[0].setAttribute("initInstance", "true");
}
List of tools
Help topics
Document 1 content
Document 2 content
List of errors
List of properties
Themes installation complete.
List of installed stylesheet files. Include at least one stylesheet Theme file and
the images folder:
-
styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
be always included in your project.
- styles/jqx.arctic.css: Stylesheet for the Arctic Theme
- styles/jqx.web.css: Stylesheet for the Web Theme
- styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme
- styles/jqx.classic.css: Stylesheet for the Classic Theme
- styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme
- styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme
- styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme
- styles/jqx.office.css: Stylesheet for the Office Theme
- styles/jqx.metro.css: Stylesheet for the Metro Theme
- styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme
- styles/jqx.orange.css: Stylesheet for the Orange Theme
- styles/jqx.summer.css: Stylesheet for the Summer Theme
- styles/jqx.black.css: Stylesheet for the Black Theme
- styles/jqx.fresh.css: Stylesheet for the Fresh Theme
- styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme
- styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme
- styles/jqx.android.css: Stylesheet for the Android Theme
- styles/jqx.mobile.css: Stylesheet for the Mobile Theme
- styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme
- styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme
- styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme
- styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme
- styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme
- styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme
- styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme
- styles/jqx.ui-start.css: Stylesheet for the UI Start Theme
- styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme
- styles/images: contains images referenced in the stylesheet files
```
### DropDownList
The ```jqx-dropdown-list``` tag helper adds a DropDownList component to a web page.
```
create - {{String}} which determines the URL called when a DropDownList item is added.
for - {{ModelExpression}} used for model binding and determines the label member.
value-for - {{ModelExpression}} used for model binding and determines the value member.
delete - {{String}} which determines the URL called when a DropDownList item is deleted.
edit - {{String}} which determines the URL called when a DropDownList item is updated.
instance - {{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.
server-processing - {{Boolean}} which determines whether server processing is enabled.
source-id - {{String}} which determines the data source's ID member.
source-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
source-root - {{String}} which determines the data source's Root member.
source-total-records - {{Integer}} which determines the data source's TotalRecords member.
source-url - {{String}} which determines the data source's URL.
source-model - {{Model}} which determines the data source's Model.
```
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC DropDownList Example";
}
@{
var employee = Model.FirstOrDefault();
}
Add/Delete/Update
Name:
Add Item
Delete Item
Update Item
var list = {};
function addItem() {
list.addItem($("#name").val());
}
function removeItem() {
var item = list.getSelectedItem();
if (item)
{
list.removeItem(item);
}
}
function updateItem() {
var item = list.getSelectedItem();
if (item)
{
list.updateItem({value: item.value, label: $("#name").val() }, item);
}
}
function listInstance(instance) {
list = instance;
}
```
### Editor
The ```jqx-editor``` tag helper adds Editor component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Editor Example";
}
ASP .NET Core MVC Editor Example
```
### Expander
The ```jqx-expander``` tag helper adds Expander component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Expander Example";
}
ASP .NET Core MVC Expander Example
Header
Button 1
Button 2
Button 3
```
jqx-expander-header tag helper defines the expander's header. jqx-expander-body tag helper defines the expander's body.
### FileUpload
The jqx-file-upload tag helper adds a File Upload component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC FileUpload Example";
}
ASP .NET Core MVC File Upload Example
```
### Formatted Input
The ```jqx-formatted-input``` tag helper adds a Formatted Input component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Formatted Input Example";
}
ASP .NET Core MVC Formatted Input Example
```
### Gauge
The ```jqx-gauge``` tag helper adds a Gauge component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Gauge Example";
List ranges = new List()
{
new GaugeRange() {StartValue = 0, EndValue = 55, StartWidth = 1, EndWidth = 5, Style = new GaugeStyle() {Fill = "#4bb648", Stroke = "#4bb648" }},
new GaugeRange() {StartValue = 55, EndValue = 110, StartWidth = 5, EndWidth = 10, Style = new GaugeStyle() {Fill = "#fbd109", Stroke = "#fbd109" }},
new GaugeRange() {StartValue = 110, EndValue = 165, StartWidth = 10, EndWidth = 13, Style = new GaugeStyle() {Fill = "#ff8000", Stroke = "#ff8000"} },
new GaugeRange() {StartValue = 165, EndValue = 220, StartWidth = 13, EndWidth = 16, Style = new GaugeStyle() {Fill = "#e02629", Stroke = "#e02629" } }
};
GaugeTicks ticksMinor = new GaugeTicks() { Interval = 5, Size = "5%" };
GaugeTicks ticksMajor = new GaugeTicks() { Interval = 10, Size = "9%" };
}
ASP .NET Core MVC Gauge Tag Helper Example
```
### Input
The ```jqx-input``` tag helper adds an Input component to a web page.
```
create - {{String}} which determines the URL called when a Input item is added.
for - {{ModelExpression}} used for model binding and determines the label member.
value-for - {{ModelExpression}} used for model binding and determines the value member.
delete - {{String}} which determines the URL called when a Input item is deleted.
edit - {{String}} which determines the URL called when a Input item is updated.
instance - {{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.
server-processing - {{Boolean}} which determines whether server processing is enabled.
source-id - {{String}} which determines the data source's ID member.
source-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
source-root - {{String}} which determines the data source's Root member.
source-total-records - {{Integer}} which determines the data source's TotalRecords member.
source-url - {{String}} which determines the data source's URL.
source-model - {{Model}} which determines the data source's Model.
```
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC Input Example";
}
function change(event) {
var args = event.args;
document.getElementById("log").innerHTML = "Label: " + args.label + ", Value: " + args.value;;
}
Enter Name:
(ex: An)
```
### Kanban
The ```jqx-kanban``` tag helper adds a Kanban component to a web page.
```html
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Kanban Example";
Dictionary mappings = new Dictionary();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
```
### Knob
The ```jqx-knob``` tag helper adds a Knob component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Knob Example";
KnobMarks marks = new KnobMarks()
{
ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
Type = "line",
Offset = "71%",
Thickness = 3,
Size = "6%",
MajorSize = "9%",
MajorInterval = 10,
MinorInterval = 2
};
KnobStyle style = new KnobStyle()
{
Stroke = "#dfe3e9",
StrokeWidth = 3,
Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List() { "[0, 1]", "[50, 0.9]", "[100, 1]" } }
};
KnobLabels labels = new KnobLabels()
{
Offset = "88%",
Step = 10
};
KnobProgressBar progressBar = new KnobProgressBar()
{
Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
Size = "9%",
Offset = "60%",
Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
};
}
```
### Layout
The ```jqx-layout``` tag helper adds a Layout component to a web page.
```html
@model IEnumerable
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Layout Example";
// Create Layout Object.
List layout = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutGroup,
Orientation = Orientation.Horizontal,
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.AutoHideGroup,
Alignment = Alignment.Left,
Width = "80",
UnpinnedWidth = "200",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Toolbox",
ContentContainer = "ToolboxPanel"
},
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Helper",
ContentContainer = "HelperPanel"
}
}
},
new LayoutItem()
{
Type = LayoutItemType.LayoutGroup,
Orientation = Orientation.Vertical,
Width = "500",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.DocumentGroup,
Height = "400",
MinHeight = "200",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.DocumentPanel,
Title = "Document 1",
ContentContainer = "Document1Panel"
},
new LayoutItem()
{
Type = LayoutItemType.DocumentPanel,
Title = "Document 2",
ContentContainer = "Document2Panel"
}
}
},
new LayoutItem()
{
Type = LayoutItemType.TabbedGroup,
Height = "200",
PinnedHeight = "30",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Error List",
ContentContainer = "ErrorListPanel"
}
}
}
}
},
new LayoutItem()
{
Type = LayoutItemType.TabbedGroup,
Width = "220",
MinWidth = "200",
Items = new List()
{
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Solution Explorer",
ContentContainer = "SolutionExplorerPanel",
InitContent = "InitSolutionExplorerPanel()"
},
new LayoutItem()
{
Type = LayoutItemType.LayoutPanel,
Title = "Properties",
ContentContainer= "PropertiesPanel"
}
}
}
}
}
};
}
function InitSolutionExplorerPanel() {
$('#solutionExplorerTree')[0].setAttribute("init-instance", "true");
}
List of tools
Help topics
Document 1 content
Document 2 content
List of errors
List of properties
Themes installation complete.
List of installed stylesheet files. Include at least one stylesheet Theme file and
the images folder:
-
styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
be always included in your project.
- styles/jqx.arctic.css: Stylesheet for the Arctic Theme
- styles/jqx.web.css: Stylesheet for the Web Theme
- styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme
- styles/jqx.classic.css: Stylesheet for the Classic Theme
- styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme
- styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme
- styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme
- styles/jqx.office.css: Stylesheet for the Office Theme
- styles/jqx.metro.css: Stylesheet for the Metro Theme
- styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme
- styles/jqx.orange.css: Stylesheet for the Orange Theme
- styles/jqx.summer.css: Stylesheet for the Summer Theme
- styles/jqx.black.css: Stylesheet for the Black Theme
- styles/jqx.fresh.css: Stylesheet for the Fresh Theme
- styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme
- styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme
- styles/jqx.android.css: Stylesheet for the Android Theme
- styles/jqx.mobile.css: Stylesheet for the Mobile Theme
- styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme
- styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme
- styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme
- styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme
- styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme
- styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme
- styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme
- styles/jqx.ui-start.css: Stylesheet for the UI Start Theme
- styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme
- styles/images: contains images referenced in the stylesheet files
```
### Linear Gauge
The ```jqx-linear-gauge``` tag helper adds a Linear Gauge component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Linear Gauge Example";
GaugeLabels labels = new GaugeLabels() { Interval = 20, FormatValue = "formatValue()" };
List ranges = new List()
{
new GaugeRange() {StartValue = -10, EndValue = 10, Style = new GaugeStyle() {Fill = "#4bb648", Stroke = "#4bb648" }},
new GaugeRange() {StartValue = 10, EndValue = 35, Style = new GaugeStyle() {Fill = "#fbd109", Stroke = "#fbd109" }},
new GaugeRange() {StartValue = 35, EndValue = 60, Style = new GaugeStyle() {Fill = "#ff8000", Stroke = "#ff8000"}}
};
GaugeTicks ticksMinor = new GaugeTicks() { Interval = 2.5, Size = "5%", Style = new GaugeStyle() { StrokeWidth = 1, Stroke = "#aaaaaa" } };
GaugeTicks ticksMajor = new GaugeTicks() { Interval = 10, Size = "10%" };
GaugePointer pointer = new GaugePointer() { Size = "5%" };
}
function formatValue(value, position) {
if (position === 'far') {
value = (9 / 5) * value + 32;
if (value === -76) {
return 'F';
}
return value + '';
}
if (value === -60) {
return 'C';
}
return value + '';
}
Link Button
The jqx-link-button tag helper adds a Link Button component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Link Button Example";
}
Link Button
```
### List Box
The ```jqx-list-box``` tag helper adds a List Box component to a web page.
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC ListBox Example";
}
@{
var employee = Model.FirstOrDefault();
}
Add/Delete/Update
Name:
Add Item
Delete Item
Update Item
var list = {};
function addItem() {
list.addItem($("#name").val());
}
function removeItem() {
var item = list.getSelectedItem();
if (item)
{
list.removeItem(item);
}
}
function updateItem() {
var item = list.getSelectedItem();
if (item)
{
list.updateItem({value: item.value, label: $("#name").val() }, item);
}
}
function listInstance(instance) {
list = instance;
}
```
### List Menu
The ```jqx-list-menu``` tag helper adds a List Menu component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC ListMenu Example";
}
OSI
Application Layer
SIP
DNS
FTP
RTP
DHCP
TCP/IP
Application layer
DHCP
DNS
FTP
HTTP
IMAP
LDAP
XMPP
SSH
RIP
Transport layer
TCP
UDP
SCTP
Internet layer
IP
ICMP
ECN
Link layer
ARP
NDP
DSL
```
### Masked Input
The ```jqx-masked-input``` tag helper adds a Masked Input component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC MaskedInput Example";
}
Numeric
Zip Code
SSN
Phone Number
Disabled
```
### Menu
The ```jqx-menu``` tag helper adds a Menu component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Menu Example";
}
ASP .NET Core MVC Menu Tag Helper Example
Home
Solutions
Education
Financial services
Government
Manufacturing
Software Solutions
Consumer photo and video
Mobile
Rich Internet apps
Technical communication
Training and eLearning
Web conferencing
All industries and solutions
Products
PC products
Mobile products
All products
Support
Support home
Customer Service
Knowledge base
Books
Training and certification
Support programs
Forums
Documentation
Updates
Communities
Designers
Developers
Educators and students
Partners
By resource
Labs
TV
Forums
Exchange
Blogs
Experience Design
Company
About Us
Press
Investor Relations
Corporate Affairs
Careers
Showcase
Events
Contact Us
Become an affiliate
```
### Navigation Bar
The ```jqx-navigation-bar``` tag helper adds a NavigationBar component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC NavigationBar Example";
}
Header 1
Body 1
Header 2
Body 2
Header 3
Body 3
```
### Notification
The ```jqx-notification``` tag helper adds a Notification component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Notification Example";
}
ASP .NET Core MVC Notification Tag Helper Example
Open Notification Message
Notification Message
var notification = {};
function getNotification(instance) {
notification = instance;
}
function openMessage() {
notification.open();
}
```
### Number Input
The ```jqx-number-input``` tag helper adds a Number Input component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC NumberInput Example";
}
Default Input
Simple Input
```
### Panel
The ```jqx-panel``` tag helper adds a Panel component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Panel Example";
}
ASP .NET Core MVC Panel Tag Helper Example
Early History of the Internet
- 1961 First packet-switching papers
- 1966 Merit Network founded
- 1966 ARPANET planning starts
- 1969 ARPANET carries its first packets
- 1970 Mark I network at NPL (UK)
- 1970 Network Information Center (NIC)
- 1971 Merit Network's packet-switched network operational
- 1971 Tymnet packet-switched network
- 1972 Internet Assigned Numbers Authority (IANA) established
- 1973 CYCLADES network demonstrated
- 1974 Telenet packet-switched network
- 1976 X.25 protocol approved
- 1979 Internet Activities Board (IAB)
- 1980 USENET news using UUCP
- 1980 Ethernet standard introduced
- 1981 BITNET established
```
### Password Input
The ```jqx-passwordinput``` tag helper adds a Password Input component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC PasswordInput Example";
}
ASP .NET Core MVC Password Input Tag Helper Example
Password Input
```
### Popover
The ```jqx-popover``` tag helper adds a popover components to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Popover Example";
List> settings = new List>()
{
new KeyValuePair("offset", "{left: -50, top: 0}"),
new KeyValuePair("arrowOffsetValue", 50),
new KeyValuePair("title", "Employees"),
new KeyValuePair("showCloseButton", true),
new KeyValuePair("selector", "button"),
new KeyValuePair("theme", ViewData["Theme"])
};
}
ASP .NET Core MVC PopOver Tag Helper Example
Nancy DavolioSales Representative
Andrew FullerVice President, Sales
Janet LeverlingSales Representative
Margaret PeacockSales Representative
Steven BuchananSales Manager
Michael SuyamaSales Representative
Robert KingSales Representative
Laura CallahanInside Sales Coordinator
Anne DodsworthSales Representative
```
### Progress Bar
The ```jqx-progress-bar``` tag helper adds a Progress Bar component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC ProgressBar Example";
}
```
### Radio Button
The ```jqx-radio-button``` tag helper adds a Radio Button component to a web page.
```html
@model jQWidgetsDemosContext
@using jQWidgets.AspNet.Core.Models;
@{
ViewData["Title"] = "ASP .NET MVC Radio Button Example";
Contract contract = Model.ContractDuration;
bool year = false;
bool halfYear = false;
bool quarterYear = false;
bool month = false;
if (contract == Contract.Year)
{
year = true;
}
if (contract == Contract.HalfYear)
{
halfYear = true;
}
if (contract == Contract.QuarterYear)
{
quarterYear = true;
}
if (contract == Contract.Month)
{
month = true;
}
}
12 Months Contract
6 Months Contract
3 Months Contract
1 Month Contract
```
### Range Selector
The ```jqx-range-selector``` tag helper adds a Range Selector component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC RangeSelector Example";
List> settings = new List>()
{
new KeyValuePair("width", 750),
new KeyValuePair("height", 100),
new KeyValuePair("min", 0),
new KeyValuePair("minorTicksInterval", 1),
new KeyValuePair("majorTicksInterval", 10),
new KeyValuePair("max", 200),
new KeyValuePair("range", "{ from: 10, to: 50 }"),
new KeyValuePair("theme", ViewData["Theme"])
};
}
ASP .NET Core MVC Range Selector Tag Helper Example
```
### Rating
The ```jqx-rating``` tag helper adds a Rating component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Rating Example";
}
ASP .NET Core MVC Rating Tag Helper Example
```
### Ribbon
The ```jqx-ribbon``` tag helper adds a Ribbon component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Ribbon Example";
}
ASP .NET Core MVC Ribbon Tag Helper Example
Node.js
Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
is intended for writing scalable network programs such as web servers. It was created
by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
Similar environments written in other programming languages include Twisted for
Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
Unlike most JavaScript, it is not executed in a web browser, but is instead a form
of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
includes a REPL environment for interactive testing.
JavaServer Pages
JavaServer Pages (JSP) is a Java technology that helps software developers serve
dynamically generated web pages based on HTML, XML, or other document types. Released
in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
the perception that the Java programming environment didn't provide developers with
enough support for the Web. To deploy and run, a compatible web server with servlet
container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
from Sun Microsystems and the JCP (Java Community Process) must both be met by the
container.
Active Server Pages
ASP.NET is a web application framework developed and marketed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services. It was
first released in January 2002 with version 1.0 of the .NET Framework, and is the
successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
components to process SOAP messages.
Python
Python is a general-purpose, high-level programming language[5] whose design philosophy
emphasizes code readability. Python claims to "[combine] remarkable power with very
clear syntax",[7] and its standard library is large and comprehensive. Its use of
indentation for block delimiters is unique among popular programming languages.
Python supports multiple programming paradigms, primarily but not limited to object-oriented,
imperative and, to a lesser extent, functional programming styles. It features a
fully dynamic type system and automatic memory management, similar to that of Scheme,
Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
language, but is also used in a wide range of non-scripting contexts.
Perl
Perl is a high-level, general-purpose, interpreted, dynamic programming language.
Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
language to make report processing easier. Since then, it has undergone many changes
and revisions and become widely popular amongst programmers. Larry Wall continues
to oversee development of the core language, and its upcoming version, Perl 6. Perl
borrows features from other programming languages including C, shell scripting (sh),
AWK, and sed.[5] The language provides powerful text processing facilities without
the arbitrary data length limits of many contemporary Unix tools, facilitating easy
manipulation of text files.
```
### Scheduler
The ```jqx-scheduler``` tag helper adds a Scheduler component to a web page.
```
create - {{String}} which determines the URL called when a Scheduler appointment is added.
delete - {{String}} which determines the URL called when a Scheduler appointment is deleted.
edit - {{String}} which determines the URL called when a Scheduler appointment is updated.
instance - {{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.
source-id - {{String}} which determines the data source's ID member.
source-id-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
source-root - {{String}} which determines the data source's Root member.
source-total-records - {{Integer}} which determines the data source's TotalRecords member.
source-url - {{String}} which determines the data source's URL.
source-model - {{Model}} which determines the data source's Model.
```
```jqx-scheduler-views``` tag helper defines the Scheduler's views collection.
```jqx-scheduler-view``` tag helper defines a Scheduler view.
```jqx-scheduler-time-ruler``` tag helper defines the Scheduler's time ruler.
### ScrollBar
The ```jqx-scrollbar``` tag helper adds a ScrollBar component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC ScrollBar Example";
List> settings = new List>()
{
new KeyValuePair("width", 450),
new KeyValuePair("height", 18),
new KeyValuePair("min", 0),
new KeyValuePair("max", 10000),
new KeyValuePair("theme", ViewData["Theme"])
};
}
function valueChanged(event) {
$("#log").html("Horizontal (" + parseInt(event.currentValue) + ")");
}
ASP .NET Core MVC ScrollBar Tag Helper Example
```
### ScrollView
The ```jqx-scrollview``` tag helper adds a ScrollView component to a web page.
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
ASP .NET Core MVC ScrollView Tag Helper Example
```
### Slider
The ```jqx-slider``` tag helper adds a Bullet Chart component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Slider Example";
}
ASP .NET Core MVC Slider Tag Helper Example
```
### Splitter
The ```jqx-splitter``` tag helper adds a Bullet Chart component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Splitter Example";
}
ASP .NET Core MVC Splitter Tag Helper Example
Tab 1
Content 1
Tab 2
Content 2
Item 1
Item 2
Item 3
Sub Item 3.1
Sub Item 3.2
Sub Item 3.3
Item 4
Item 5
```
```jqx-splitter-panel``` tag helper defines a splitter panel.
The Splitter component should have exactly two such tag helpers within the main ```jqx-splitter``` tag helper.
### Switch Button
The ```jqx-switch-button``` tag helper adds a Switch Button component to a web page.
```html
@{
ViewData["Title"] = "ASP .NET MVC Switch Button Example";
}
ASP .NET Core MVC SwitchButton Tag Helper Example
```
### Tabs
The ```jqx-tabs``` tag helper adds a Tabs component to a web page.
```jqx-tab-panel``` tag helper defines a Tab's panel.
```jqx-tab-panel-header``` tag helper defines a panel's header.
```jqx-tab-panel-body``` tag helper defines a panel's body.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Tabs Example";
}
Node.js
Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
is intended for writing scalable network programs such as web servers. It was created
by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
Similar environments written in other programming languages include Twisted for
Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
Unlike most JavaScript, it is not executed in a web browser, but is instead a form
of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
includes a REPL environment for interactive testing.
JavaServer Pages
JavaServer Pages (JSP) is a Java technology that helps software developers serve
dynamically generated web pages based on HTML, XML, or other document types. Released
in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
the perception that the Java programming environment didn't provide developers with
enough support for the Web. To deploy and run, a compatible web server with servlet
container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
from Sun Microsystems and the JCP (Java Community Process) must both be met by the
container.
Active Server Pages
ASP.NET is a web application framework developed and marketed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services. It was
first released in January 2002 with version 1.0 of the .NET Framework, and is the
successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
components to process SOAP messages.
Python
Python is a general-purpose, high-level programming language[5] whose design philosophy
emphasizes code readability. Python claims to "[combine] remarkable power with very
clear syntax",[7] and its standard library is large and comprehensive. Its use of
indentation for block delimiters is unique among popular programming languages.
Python supports multiple programming paradigms, primarily but not limited to object-oriented,
imperative and, to a lesser extent, functional programming styles. It features a
fully dynamic type system and automatic memory management, similar to that of Scheme,
Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
language, but is also used in a wide range of non-scripting contexts.
Perl
Perl is a high-level, general-purpose, interpreted, dynamic programming language.
Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
language to make report processing easier. Since then, it has undergone many changes
and revisions and become widely popular amongst programmers. Larry Wall continues
to oversee development of the core language, and its upcoming version, Perl 6. Perl
borrows features from other programming languages including C, shell scripting (sh),
AWK, and sed.[5] The language provides powerful text processing facilities without
the arbitrary data length limits of many contemporary Unix tools, facilitating easy
manipulation of text files.
```
### TextArea
The ```jqx-textarea``` tag helper adds a Text Area component to a web page.
```html
@model IEnumerable
@{
ViewData["Title"] = "ASP .NET MVC TextArea Example";
}
function change(event) {
var args = event.args;
document.getElementById("log").innerHTML = "Label: " + args.label + ", Value: " + args.value;;
}
Enter Name:
(ex: An)
```
### Toolbar
The ```jqx-tool-bar``` tag helper adds a Toolbar component to a web page.
```html
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Toolbar Example";
}
.buttonIcon {
margin: -5px 0 0 -3px;
width: 16px;
height: 17px;
}
function initTools (type, index, tool, menuToolIninitialization) {
var theme = $("#toolbar").jqxToolBar("theme");
if (type == "toggleButton") {
var icon = $("<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>");
}
switch (index) {
case 0:
icon.addClass("jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme);
icon.attr("title", "Bold");
tool.append(icon);
break;
case 1:
icon.addClass("jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme);
icon.attr("title", "Italic");
tool.append(icon);
break;
case 2:
icon.addClass("jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme);
icon.attr("title", "Underline");
tool.append(icon);
break;
case 3:
tool.jqxToggleButton({ width: 80, toggled: true });
tool.text("Enabled");
tool.on("click", function () {
var toggled = tool.jqxToggleButton("toggled");
if (toggled) {
tool.text("Enabled");
} else {
tool.text("Disabled");
}
});
break;
case 4:
tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</