Trending September 2023 # Complete Guide To Mvc Dropdownlist # Suggested October 2023 # Top 12 Popular

You are reading the article Complete Guide To Mvc Dropdownlist updated in September 2023 on the website Chivangcangda.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Complete Guide To Mvc Dropdownlist

Introduction to MVC DropDownList

Web development, programming languages, Software testing & others

Syntax

Parameters

MvcHtmlString: It is the HTML code string that is returned by the DropDownList method and represents the select element code in HTML.

string name: It is the string parameter passed to this method which is the name of the dropDownList.

String optionLabel: It is the optional parameter that helps to specify the first label on the dropdown list.

Object HTML attributes: This is generally a collection of HTML attributes that helps in specifying different things related to the dropdown list.

Now, We will take one simple example which is for payroll application’s registration form for employees which will accept two fields namely Employee Name and Role of that employee. We will collect all the possible options of the drop-down list of roles from the controller. MVC pattern focuses on segregating the code in model, view and controller format. Further, we will learn how this drop-down list will be displayed on view after collecting options from the controller and how the selected option can be further processed and render the selected value back to the user.

Examples to Implement MVC DropDownList

Below are the examples mentioned:

Example #1

Firstly we will need a model that will hold the state and values selected by the user in the registration form. Note that both the fields on registration form namely name and role are required fields.

Code:

public class RegistrationModel { [Required] [Display(Name="Name")] public string Name { get; set; } [Required] [Display(Name="Role")] public string Role { get; set; } }

Explanation: The name and role will store or hold the values as selected by the employee on the registration form and roles enum will store all the possible positions or roles.

Examples #2

Now we will go for the main essence and most critical part of the code which is the controller. The controller consists of a bit complex code and three action methods one for form loading, second for taking up the form inputs and then for the submission of the form.

Code:

public class RegistrationController : Controller { public ActionResult register() { var roles = GetAllRoles(); var model = new registerModel(); model.roles = GetOptionRolesList(roles); return View(model); } [HttpPost] public ActionResult register(registerModel model) { var roles = GetAllRoles(); model.roles = GetOptionRolesList(roles); if (ModelRole.IsValid) { Session["registerModel"] = model; return RedirectToAction("Successful"); } return View("register", model); } public ActionResult Successful() { var model = Session["registerModel"] as registerModel; return View(model); } { { "Project Manager", "Team Leader", "Senior Developer", "Junior Developer", "Tester", "Network Manager", "Support Person", }; } { foreach (var element in elements) { roleList.Add(new SelectListItem { Value = element, Text = element }); } return roleList; } }

One of the important things to consider over here is that we have to render it twice because of the browse’s nature which posts back only the selected values back to the page. In this case, if the drop-down list is not passed all the selectItemList again it will be rendered blank. This creates a problem when you want to redisplay the form during some validation failure. That’s the reason why the code is rendered twice.

Example #3

Here is the code for the final view section that will be displaying the dropDownList of roles on the form by using the method DropDownList().

@model Dropdowns.Models.RegistrationModel @{ ViewBag.Title = "Employee Registration"; } @using (Html.BeginForm("register", "register", FormMethod.Post, new { role = "form" })) { @* Name textbox *@ @* Role selection dropdown *@ Model.Roles, "- Please select a Role -", new { @class = "form-control" }) }

Note: That is the view part of code the most important thing is the DropDownList method’s usage who’s the first parameter consists of the currently held/selected value of the user which is passed to the controller, second parameter consisting of the list of select item list objects containing all possible roles. The third parameter is the optional label parameter which will act as the first value on dropDownList and the last parameter being the HTML attribute specifying CSS is any and other information.

Example #4

The final code that will be sent to your browser will look somewhat like the following which is similar to HTML code.

Code:

Output:

EducationPlatforms Model

Let’s consider another simple example, We will have one entity named EducationPlatforms. Here’s how it will look like containing id, name, mode of learning, subject, and duration as its properties. We will create a small model for it.

public class EducationPlatforms { public int Id { get; set; } public string name { get; set; } public Mode modeOfLearning { get; set; } public string subject { get; set; } public int duration { get; set; } } public enum Mode { Online, LiveClasses }

Now, we will code for the dropdownlist of the mode of learning field of our model EducationPlatforms.

@using MyMVCApp.Models @model EducationPlatforms @Html.DropDownList("modeOfLearning", new SelectList(Enum.GetValues(typeof(Mode))), "Select Mode", new { @class = "form-control" }

The HTML equivalent of the above code is as shown below

Explanation: In the above example, we have mentioned the first parameter for the property name for which we are building the dropDownList. For the second parameter instead of the passing list of SelectItemList objects, we have used enum of Modes enum and retrieved its possible values by using the built-in method of Enum class named getValues which gets all the possible values of that enum. The third parameter to this method is the label name which will act as the first member of our dropdown list and finally the fourth parameter is for specifying the HTML properties and attributes like the CSS that needs to be applied for our drop-down list.

Output:

Conclusion

In this way, we can use the DropDownList method for creating a drop-down in our MVC architecture. In this article, ASP .Net MVC is used. We can even collect the options or selectItemList values from the database and then assign them to our drop-down is necessary. This is the most common case while dealing with drop-down in real-time applications.