Click here to Skip to main content
14,423,065 members

Multiple HTML Select Control in ASP.NET MVC Programmatically

Rate this:
5.00 (1 vote)
Please Sign up or sign in to vote.
5.00 (1 vote)
12 Jan 2020CPOL
This article describes two ways of how to create a multiple HTML select control in ASP.NET MVC programmatically, using JQuery, C# and Razor.

Introduction

Many times, we manipulate HTML controls using JavaScript or JQuery code and don't know how strong ASP.NET MVC can be together with Razor and C# or don't know both ways to do it.

Below are these two ways to do it, the classic way with JQuery, that can also be used in PHP, JSP, etc.

Using the Code

This is a common multiple HTML select control:

@* Home\Index.cshtml *@

<select name='categories' id="selectCategories" multiple>
  <option value="1">Meat</option>
  <option value="2">Cereals</option>
  <option value="3">Seafood</option>
  <option value="4">Soda</option>
  <option value="5">Coffee</option>
</select>

We need to select many options programmatically, for example: Meat (1), Cereals (2) and Soda (4).

Using JQuery

With JQuery, we need to create the JavaScript tag in the same HTML page or in JavaScript file and add the reference in the page, in this article, it has been used in the second way:

// Index.js

$(document).ready(function () {
    selectItems();
});
function selectItems() {
    var values = "1,2,4";
    $.each(values.split(","), function (i, e) {
        $("#selectCategories option[value='" + e + "']").prop("selected", true);
    });
}

In this line, we have the options that need to be selected:

var values = "1,2,4";

Using Razor and C#

This is the Model class which we want load in HTML select control:

// Category.cs

public class Category
{
   public int Id { get; set; }
   public string Name { get; set; }
}

The Controller which allows to populate the select control and select:

// HomeController.cs

public ActionResult Index()
{
     List<Category> categories = new List<Category>();
     Category category = new Category();
     category.Id = 1;
     category.Name = "Meat";
     categories.Add(category);
     category = new Category();
     category.Id = 2;
     category.Name = "Cereals";
     categories.Add(category);
     category = new Category();
     category.Id = 3;
     category.Name = "Seafood";
     categories.Add(category);
     category = new Category();
     category.Id = 4;
     category.Name = "Soda";
     categories.Add(category);
     category = new Category();
     category.Id = 5;
     category.Name = "Coffee";
     categories.Add(category);
     ViewBag.Categories = new MultiSelectList(categories, "Id", "Name", new[] { 1, 2, 4 });
     return View();
}

The MultiSelectList object allows selected and pass the List with all options to Home\Index.cshtml:

ViewBag.Categories = new MultiSelectList(categories, "Id", "Name", new[] { 1, 2, 4 });

In the Home\Index.cshtml, we can use an empty HTML select control and populate with ViewBag.Categories with loop sentence as for or while in Razor:

<select name='categories' id="selectCategories" multiple/>

Or use Razor HTML Helpers:

<h2>Multiselect with Razor (DropDownList)</h2>
@Html.DropDownList("Id", (MultiSelectList)ViewBag.Categories, new { multiple = "multiple" })
<h2>Multiselect with Razor (ListBox)</h2>
@Html.ListBox("Id", (MultiSelectList)ViewBag.Categories)

Image 1

Points of Interest

Personally, I prefer Razor HTML Helpers, solve many HTML controls that lack functionalities and reduced code lines.

History

  • 12th January, 2020: Initial submission

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ejrr1085
Software Developer (Senior) Biologicsoft
Ecuador Ecuador
No Biography provided

Comments and Discussions

 
Bugthe image is broken Pin
Member 1399451613-Jan-20 1:11
MemberMember 1399451613-Jan-20 1:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tip/Trick
Posted 12 Jan 2020

Stats

1.8K views
4 bookmarked