ASP .NET Core MVC Demos

Show Demo List

ASP .NET MVC DropDownList Tag Helper

jqx-dropdownlist

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>

<label>Add/Delete/Update</label>

<table>

<tr>

</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>

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>

ASP .NET Core MVC Demos

ASP .NET Core MVC UI Components

ASP .NET MVC DropDownList Tag Helper