Single Selection - ASP.NET Core Drop Down Box Demo (2024)

Material Light

Single Selection - ASP.NET Core Drop Down Box Demo (1) Material Blue Light

Single Selection - ASP.NET Core Drop Down Box Demo (2) Material Lime Light

Single Selection - ASP.NET Core Drop Down Box Demo (3) Material Orange Light

Single Selection - ASP.NET Core Drop Down Box Demo (4) Material Purple Light

Single Selection - ASP.NET Core Drop Down Box Demo (5) Material Teal Light

Material Dark

Single Selection - ASP.NET Core Drop Down Box Demo (6) Material Blue Dark

Single Selection - ASP.NET Core Drop Down Box Demo (7) Material Lime Dark

Single Selection - ASP.NET Core Drop Down Box Demo (8) Material Orange Dark

Single Selection - ASP.NET Core Drop Down Box Demo (9) Material Purple Dark

Single Selection - ASP.NET Core Drop Down Box Demo (10) Material Teal Dark

Material Light Compact

Material Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (16) Material Blue Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (17) Material Lime Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (18) Material Orange Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (19) Material Purple Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (20) Material Teal Dark Compact

Generic Light

Single Selection - ASP.NET Core Drop Down Box Demo (21) Generic Light

Single Selection - ASP.NET Core Drop Down Box Demo (22) Carmine

Single Selection - ASP.NET Core Drop Down Box Demo (23) Soft Blue

Single Selection - ASP.NET Core Drop Down Box Demo (24) Green Mist

Generic Dark

Single Selection - ASP.NET Core Drop Down Box Demo (25) Generic Dark

Single Selection - ASP.NET Core Drop Down Box Demo (26) Contrast

Single Selection - ASP.NET Core Drop Down Box Demo (27) Dark Violet

Single Selection - ASP.NET Core Drop Down Box Demo (28) Dark Moon

Generic Light Compact

Single Selection - ASP.NET Core Drop Down Box Demo (29) Generic Light Compact

Generic Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (30) Generic Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (31) Contrast Dark Compact

Fluent Light

Single Selection - ASP.NET Core Drop Down Box Demo (32) Fluent Light

Single Selection - ASP.NET Core Drop Down Box Demo (33) Fluent SaaS Light

Fluent Dark

Single Selection - ASP.NET Core Drop Down Box Demo (34) Fluent Dark

Single Selection - ASP.NET Core Drop Down Box Demo (35) Fluent SaaS Dark

Fluent Light Compact

Single Selection - ASP.NET Core Drop Down Box Demo (36) Fluent Light Compact

Single Selection - ASP.NET Core Drop Down Box Demo (37) Fluent SaaS Light Compact

Fluent Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (38) Fluent Dark Compact

Single Selection - ASP.NET Core Drop Down Box Demo (39) Fluent SaaS Dark Compact

Backend API

<div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">DropDownBox with embedded TreeView</div> <div class="dx-field-value"> @(Html.DevExtreme().DropDownBox() .Value("1_1") .ValueExpr("ID") .DisplayExpr("Text") .InputAttr("aria-label", "Owner") .DropDownOptions(o => o.Height(350)) .DataSource(d => d.Mvc() .Controller("TreeViewPlainData") .LoadAction("Get") .LoadMode(DataSourceLoadMode.Raw) .Key("ID") ) .Placeholder("Select a value...") .ShowClearButton(true) .OnValueChanged("treeBox_valueChanged") .ContentTemplate(new TemplateName("EmbeddedTreeViewSingle")) ) <div id="treeBox"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">DropDownBox with embedded DataGrid</div> <div class="dx-field-value"> @(Html.DevExtreme().DropDownBox() .Value(3) .ValueExpr("ID") .InputAttr("aria-label", "Owner") .DisplayExpr(new JS("gridBox_displayExpr")) .DataSource(d => d.Mvc() .Controller("DataGridCustomers") .LoadAction("Get") .LoadMode(DataSourceLoadMode.Raw) .Key("ID") ) .Placeholder("Select a value...") .ShowClearButton(true) .OnValueChanged("gridBox_valueChanged") .ContentTemplate(new TemplateName("EmbeddedDataGridSingle")) ) </div> </div></div>@using(Html.DevExtreme().NamedTemplate("EmbeddedTreeViewSingle")) { @(Html.DevExtreme().TreeView() .DataSource(new JS(@"component.getDataSource()")) .KeyExpr("ID") .DisplayExpr("Text") .ItemsExpr("Items") .ExpandedExpr("Expanded") .ParentIdExpr("CategoryId") .DataStructure(TreeViewDataStructure.Plain) .SelectionMode(NavSelectionMode.Single) .SelectByClick(true) .Height(235) .OnItemClick(@<text> function(args) { component.close(); } </text>) .OnItemSelectionChanged(@<text> function(args) { component.option("value", args.component.getSelectedNodeKeys()); } </text>) .OnContentReady(@<text> function(args) { syncTreeViewSelection(args.component, component.option("value")); } </text>) )}@using(Html.DevExtreme().NamedTemplate("EmbeddedDataGridSingle")) { @(Html.DevExtreme().DataGrid() .ID("embedded-datagrid") .DataSource(new JS(@"component.getDataSource()")) .Columns(columns => { columns.Add().DataField("CompanyName"); columns.Add().DataField("City"); columns.Add().DataField("Phone"); }) .ShowBorders(true) .HoverStateEnabled(true) .Paging(p => p.PageSize(10)) .FilterRow(f => f.Visible(true)) .Scrolling(s => s.Mode(GridScrollingMode.Virtual)) .Height(345) .Selection(s => s.Mode(SelectionMode.Single)) .SelectedRowKeys(new JS(@"component.option(""value"") ? [component.option(""value"")] : []")) .OnSelectionChanged(@<text> function(selectedItems) { var keys = selectedItems.selectedRowKeys; component.option("value", keys); component.close(); } </text>) )}<script> function syncTreeViewSelection(treeView, value) { if (!value) { treeView.unselectAll(); } else { treeView.selectItem(value); } } function treeBox_valueChanged(e) { var $treeView = e.component.content().find(".dx-treeview"); if($treeView.length) { syncTreeViewSelection($treeView.dxTreeView("instance"), e.value); } } function gridBox_valueChanged(e) { var $dataGrid = $("#embedded-datagrid"); if ($dataGrid.length) { var dataGrid = $dataGrid.dxDataGrid("instance"); dataGrid.selectRows(e.value, false); } } function gridBox_displayExpr(item) { return item && item.CompanyName + " <" + item.Phone + ">"; }</script>

using DevExtreme.AspNet.Data;using Microsoft.AspNetCore.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using DevExtreme.NETCore.Demos.ViewModels;using Newtonsoft.Json;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers { public class DropDownBoxController : Controller { public ActionResult SingleSelection() { return View(); } }}

using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class DataGridCustomersController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.Customers, loadOptions); } }}

using System;using System.Linq;using System.Collections.Generic;using System.Net.Http;using Microsoft.AspNetCore.Mvc;using DevExtreme.AspNet.Mvc;using DevExtreme.AspNet.Data;using DevExtreme.NETCore.Demos.Models.SampleData;namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class TreeViewPlainDataController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(TreeViewPlainData.Products, loadOptions); } }}

using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models { public class Customer { public int ID { get; set; } public string CompanyName { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public int Zipcode { get; set; } public string Phone { get; set; } public string Fax { get; set; } public string Website { get; set; } }}

using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Customer> Customers = new[] { new Customer { ID = 1, CompanyName = "Premier Buy", Address = "7601 Penn Avenue South", City = "Richfield", State = "Minnesota", Zipcode = 55423, Phone = "(612) 291-1000", Fax = "(612) 291-2001", Website = "http =//www.nowebsitepremierbuy.dx" }, new Customer { ID = 2, CompanyName = "ElectrixMax", Address = "263 Shuman Blvd", City = "Naperville", State = "Illinois", Zipcode = 60563, Phone = "(630) 438-7800", Fax = "(630) 438-7801", Website = "http =//www.nowebsiteelectrixmax.dx" }, new Customer { ID = 3, CompanyName = "Video Emporium", Address = "1201 Elm Street", City = "Dallas", State = "Texas", Zipcode = 75270, Phone = "(214) 854-3000", Fax = "(214) 854-3001", Website = "http =//www.nowebsitevideoemporium.dx" }, new Customer { ID = 4, CompanyName = "Screen Shop", Address = "1000 Lowes Blvd", City = "Mooresville", State = "North Carolina", Zipcode = 28117, Phone = "(800) 445-6937", Fax = "(800) 445-6938", Website = "http =//www.nowebsitescreenshop.dx" }, new Customer { ID = 5, CompanyName = "Braeburn", Address = "1 Infinite Loop", City = "Cupertino", State = "California", Zipcode = 95014, Phone = "(408) 996-1010", Fax = "(408) 996-1012", Website = "http =//www.nowebsitebraeburn.dx" }, new Customer { ID = 6, CompanyName = "PriceCo", Address = "30 Hunter Lane", City = "Camp Hill", State = "Pennsylvania", Zipcode = 17011, Phone = "(717) 761-2633", Fax = "(717) 761-2334", Website = "http =//www.nowebsitepriceco.dx" }, new Customer { ID = 7, CompanyName = "Ultimate Gadget", Address = "1557 Watson Blvd", City = "Warner Robbins", State = "Georgia", Zipcode = 31093, Phone = "(995) 623-6785", Fax = "(995) 623-6786", Website = "http =//www.nowebsiteultimategadget.dx" }, new Customer { ID = 8, CompanyName = "EZ Stop", Address = "618 Michillinda Ave.", City = "Arcadia", State = "California", Zipcode = 91007, Phone = "(626) 265-8632", Fax = "(626) 265-8633", Website = "http =//www.nowebsitee*zstop.dx" }, new Customer { ID = 9, CompanyName = "Clicker", Address = "1100 W. Artesia Blvd.", City = "Compton", State = "California", Zipcode = 90220, Phone = "(310) 884-9000", Fax = "(310) 884-9001", Website = "http =//www.nowebsiteclicker.dx" }, new Customer { ID = 10, CompanyName = "Store of America", Address = "2401 Utah Ave. South", City = "Seattle", State = "Washington", Zipcode = 98134, Phone = "(206) 447-1575", Fax = "(206) 447-1576", Website = "http =//www.nowebsiteamerica.dx" }, new Customer { ID = 11, CompanyName = "Zone Toys", Address = "1945 S Cienega Boulevard", City = "Los Angeles", State = "California", Zipcode = 90034, Phone = "(310) 237-5642", Fax = "(310) 237-5643", Website = "http =//www.nowebsitezonetoys.dx" }, new Customer { ID = 12, CompanyName = "ACME", Address = "2525 E El Segundo Blvd", City = "El Segundo", State = "California", Zipcode = 90245, Phone = "(310) 536-0611", Fax = "(310) 536-0612", Website = "http =//www.nowebsiteacme.dx" }, new Customer { ID = 13, CompanyName = "Super Mart of the West", Address = "702 SW 8th Street", City = "Bentonville", State = "Arkansas", Zipcode = 72716, Phone = "(800) 555-2797", Fax = "(800) 555-2171", Website = "http://www.nowebsitesupermart.dx" }, new Customer { ID = 14, CompanyName = "Electronics Depot", Address = "2455 Paces Ferry Road NW", City = "Atlanta", State = "Georgia", Zipcode = 30339, Phone = "(800) 595-3232", Fax = "(800) 595-3231", Website = "http =//www.nowebsitedepot.dx" }, new Customer { ID = 15, CompanyName = "K&S Music", Address = "1000 Nicllet Mall", City = "Minneapolis", State = "Minnesota", Zipcode = 55403, Phone = "(612) 304-6073", Fax = "(612) 304-6074", Website = "http =//www.nowebsitemusic.dx" }, new Customer { ID = 16, CompanyName = "Tom's Club", Address = "999 Lake Drive", City = "Issaquah", State = "Washington", Zipcode = 98027, Phone = "(800) 955-2292", Fax = "(800) 955-2293", Website = "http =//www.nowebsitetomsclub.dx" }, new Customer { ID = 17, CompanyName = "E-Mart", Address = "3333 Beverly Rd", City = "Hoffman Estates", State = "Illinois", Zipcode = 60179, Phone = "(847) 286-2500", Fax = "(847) 286-2501", Website = "http =//www.nowebsiteemart.dx" }, new Customer { ID = 18, CompanyName = "Walters", Address = "200 Wilmot Rd", City = "Deerfield", State = "Illinois", Zipcode = 60015, Phone = "(847) 940-2500", Fax = "(847) 940-2501", Website = "http =//www.nowebsitewalters.dx" }, new Customer { ID = 19, CompanyName = "StereoShack", Address = "400 Commerce S", City = "Fort Worth", State = "Texas", Zipcode = 76102, Phone = "(817) 820-0741", Fax = "(817) 820-0742", Website = "http =//www.nowebsiteshack.dx" }, new Customer { ID = 20, CompanyName = "Circuit Town", Address = "2200 Kensington Court", City = "Oak Brook", State = "Illinois", Zipcode = 60523, Phone = "(800) 955-2929", Fax = "(800) 955-9392", Website = "http =//www.nowebsitecircuittown.dx" } }; }}

using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models { public class Product { public string ID { get; set; } public string CategoryId { get; set; } public string Text { get; set; } public bool Expanded { get; set; } public IEnumerable<Product> Items { get; set; } public int Price { get; set; } public string Image { get; set; } }}

using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models.SampleData { public static class TreeViewPlainData { public static readonly IEnumerable<Product> Products = new[] { new Product { ID = "1", Text = "Stores", Expanded = true }, new Product { ID = "1_1", CategoryId = "1", Text = "Super Mart of the West", Expanded = true }, new Product { ID = "1_1_1", CategoryId = "1_1", Text = "Video Players" }, new Product { ID = "1_1_1_1", CategoryId = "1_1_1", Text = "HD Video Player", Image = "../../images/ProductsLarge/1.png", Price = 220 }, new Product { ID = "1_1_1_2", CategoryId = "1_1_1", Text = "SuperHD Video Player", Image = "../../images/ProductsLarge/2.png", Price = 270 }, new Product { ID = "1_1_2", CategoryId = "1_1", Text = "Televisions", Expanded = true }, new Product { ID = "1_1_2_1", CategoryId = "1_1_2", Text = "SuperLCD 42", Image = "../../images/ProductsLarge/7.png", Price = 1200 }, new Product { ID = "1_1_2_2", CategoryId = "1_1_2", Text = "SuperLED 42", Image = "../../images/ProductsLarge/5.png", Price = 1450 }, new Product { ID = "1_1_2_3", CategoryId = "1_1_2", Text = "SuperLED 50", Image = "../../images/ProductsLarge/4.png", Price = 1600 }, new Product { ID = "1_1_2_4", CategoryId = "1_1_2", Text = "SuperLCD 55", Image = "../../images/ProductsLarge/6.png", Price = 1750 }, new Product { ID = "1_1_2_5", CategoryId = "1_1_2", Text = "SuperLCD 70", Image = "../../images/ProductsLarge/9.png", Price = 4000 }, new Product { ID = "1_1_3", CategoryId = "1_1", Text = "Monitors" }, new Product { ID = "1_1_3_1", CategoryId = "1_1_3", Text = "19\"" }, new Product { ID = "1_1_3_1_1", CategoryId = "1_1_3_1", Text = "DesktopLCD 19", Image = "../../images/ProductsLarge/10.png", Price = 160 }, new Product { ID = "1_1_4", CategoryId = "1_1", Text = "Projectors" }, new Product { ID = "1_1_4_1", CategoryId = "1_1_4", Text = "Projector Plus", Image = "../../images/ProductsLarge/14.png", Price = 550 }, new Product { ID = "1_1_4_2", CategoryId = "1_1_4", Text = "Projector PlusHD", Image = "../../images/ProductsLarge/15.png", Price = 750 } }; }}

.dx-fieldset { height: 500px;}

Single Selection - ASP.NET Core Drop Down Box Demo (2024)

FAQs

How to pass selected value of dropdown to controller? ›

pass the selected value in a drop down to the controller
  1. I open a page (GetItemID) with a form in it.
  2. I type an id.
  3. click a button (submit)
  4. open a new page (ItemDetails) with the details of the item and a dropdown list and a submit button.
  5. select a value in the dropdown.
  6. click the submit button.
Jan 31, 2024

Keep Reading ›
How to select multiple items in DropDownList in asp net? ›

By default, single selection is enabled ; in order to enable multiple selection the DisplayMode property should be set to either DropDown or DropDownList and the EnableMultipleSelection property must be set to true.

Learn More Now ›
How to clear the value of dropdown in asp net? ›

You can clear the selected item in the below two different ways. By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element.

See Details ›
How to set selected value of dropdown in asp net? ›

Abstract
  1. List<SelectListItem> items = GetDropDownListItems();
  2. string selectedValue = "2"; // Set your desired selected value here.
  3. items.FirstOrDefault(item => item.Value == selectedValue)?.Selected = true;
  4. ViewBag.Items = items;
  5. return View();
  6. @{
  7. var items = ViewBag.Items as List<SelectListItem>;
Jul 5, 2023

Tell Me More ›
How do I get a value selected in dropdown? ›

The value of the selected element can be found by using the value property on the selected element that defines the list. This property returns a string representing the value attribute of the <option> element in the list. If no option is selected then nothing will be returned.

Get More Info Here ›
How do you handle dropdown values? ›

You can handle Dropdown in Selenium by storing all the options in the form of a List and then iterate through it as seen in the example below: Example: Step 1 Launch BStackDemo website and click on the Order By drop down to make all the options visible. Step 2: Store all the options as WebElements in a List.

Know More ›
Can we add check boxes in dropdown .net core? ›

For each item of the DropDownTree component, you can add a checkbox beside each node through the Checkboxes() configuration. You can define the checkbox either by using a Boolean value or setting the Checkboxes() option to true , or by utilizing inner configuration options, such as Name() , CheckChildren() , and more.

Get More Info Here ›
How do I get the value of a multi-select dropdown? ›

Windows: We need to hold down the CTRL button to select multiple options. Mac: We need to hold down the command button to select multiple options.

Show Me More ›
How do I make multiple selections in a drop down list? ›

How to make Excel drop down with multiple selections
  1. Select one or more cells for your dropdown (D3:D7 in our case).
  2. On the Data tab, in the Data Tools group, click Data Validation.
  3. In the Allow drop-down box, select List.
  4. In the Source box, enter the formula that indirectly refers to Table1's column named Items.
Feb 5, 2024

Discover More Details ›
How do you retain a value in a dropdown? ›

Assuming plain javascript, try the following in a script placed after the dropdown:
  1. const mySel = document.getElementById("theIDofYourSelect");
  2. mySel.addEventListener("change",function() {
  3. localStorage.setItem("selValue",this.value); // save it.
  4. });
  5. let val = localStorage.getItem("selValue");
Jun 17, 2019

See Details ›

How do I remove a selected value from a dropdown? ›

Description. The remove() method is used to remove an option from a drop-down list. Tip: To add an option to a drop-down list, use the add() method.

Learn More ›
How do I set an empty value in a dropdown? ›

  1. Select the dropdown.
  2. Goto its advance setting.
  3. type AllowEmptySelection in search box of advance.
  4. set value as true.
  5. Set default value =Blank()

Discover More Details ›
How to populate dropdown in asp net? ›

To do that, we create a connection string object to connect the database with the application and read data from the database using the select command to display data in the DropDownList. All you have to do is implement and hook it up to your requirements or needs.

Know More ›
How to create a DropDownList in C#? ›

Through Designer
  1. Create a new Visual C# application or VB.NET application in Visual Studio . ...
  2. Drag and drop a ComboDropDown control, TreeView control from the toolbox onto the form.
  3. Add nodes to the TreeView control and set HideSelection property to false.

Find Out More ›
How to bind a DropDownList in an asp net core with entity framework core? ›

  1. Database part. ...
  2. Creating application. ...
  3. Installing Package for Entity framework core From NuGet. ...
  4. Adding Connection string and Setting up DbContext. ...
  5. Adding Model CountryMaster in Models Folder. ...
  6. Adding DbSet for CountryMaster Model in DatabaseContext class. ...
  7. Adding Controller. ...
  8. Getting Data from Database using Entity framework core.
Dec 12, 2016

See More ›
How to make a DropDownList in ASP.Net MVC? ›

  1. Prerequisites.
  2. Create ASP.NET MVC application with HTML helper.
  3. Install ASP.NET MVC package in the application.
  4. Add namespace.
  5. Add stylesheet and script resources.
  6. Register Syncfusion script manager.
  7. Add ASP.NET MVC DropDownList control.
  8. Binding data source.

See More ›

References

Top Articles
60 Vintage-Inspired Thanksgiving Recipes
100 Best Old Fashioned Recipes
Brunetta Tinto And Pasta Menu
Shares On Twitter Formerly Crossword Clue
Atom Tickets - Check out showtimes and buy movie tickets for Regal Oviedo Mall in Oviedo.
DOM Cinema Bar - Louis Hartlooper
Varisu 2023 Full Tamil Movie Online Watch in HD 720p DVDRip
Bigg Boss OTT 3: Neeraj Goyat Evicted In Surprise Twist
TV Samsung 85-inch QN85D - QLED 4K, Direct Full Array ( Model 2024 )
BD-5 f?r die vorderen Freilaufgeh?use BD-641 (Japan Import / das Paket und das Handbuch sind in Japanisch) - npo-egao.net
Go Upstate Mugshots Gaffney Sc
Kp My Schedule Lawson
Latest Posts
Roasted Eggplant With Tahini, Pine Nuts, and Lentils Recipe
10 Recipes of the Great Depression
Article information

Author: Otha Schamberger

Last Updated:

Views: 5754

Rating: 4.4 / 5 (55 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Otha Schamberger

Birthday: 1999-08-15

Address: Suite 490 606 Hammes Ferry, Carterhaven, IL 62290

Phone: +8557035444877

Job: Forward IT Agent

Hobby: Fishing, Flying, Jewelry making, Digital arts, Sand art, Parkour, tabletop games

Introduction: My name is Otha Schamberger, I am a vast, good, healthy, cheerful, energetic, gorgeous, magnificent person who loves writing and wants to share my knowledge and understanding with you.