ASP .NET MVC DropDownList Tag Helper

The jqx-dropdownlist 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.
  • serverProcessing - {{Boolean}} which determines whether server processing is enabled.
  • sourceId - {{String}} which determines the data source's ID member.
  • sourceId-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
  • sourceRoot - {{String}} which determines the data source's Root member.
  • sourceTotalRecords - {{Integer}} which determines the data source's TotalRecords member.
  • sourceUrl - {{String}} which determines the data source's URL.
  • sourceModel - {{Model}} which determines the data source's Model.
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
@{
ViewData["Title"] = "ASP .NET MVC DropDownList Example";
}
@{
var employee = Model.FirstOrDefault();
}
<label>ASP .NET Core MVC DropDownList Tag Helper Example</label><br/><br/>
<jqx-dropdownlist for="@employee.Name" value-for="@employee.ID" selectedIndex="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"></jqx-dropdownlist>
<div style="margin-top:30px;">
<label>Add/Delete/Update</label>
<table>
<tr>
<td style="padding:10px;" align="right">Name:</td>
<td><jqx-input value="Peter Green" height="25" id="name"></jqx-input></td>
</tr>
</table>
</div>
<jqx-button style="margin-top:20px;" theme="@ViewData["Theme"]" on-click="addItem()">Add Item</jqx-button>
<jqx-button style="margin-top:20px;" theme="@ViewData["Theme"]" on-click="removeItem()">Delete Item</jqx-button>
<jqx-button style="margin-top:20px;" theme="@ViewData["Theme"]" on-click="updateItem()">Update Item</jqx-button>
<script>
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;
}
</script>