Serving Industries Worldwide
Innovative Ways - Satisfied Clientele
- Home
- different-ways-of-binding-razor-dropdownlist-in-asp-net-mvc-5
Different ways of Binding Razor DropDownList in ASP.NET MVC 5
Ishan Sarvaiya 28 Jul 2021Table of Content
- 1. DropDownList
- 2. What is Razor View in MVC?
- 3. How do I bind a DropDownList in MVC Razor?
- 4. Conclusion
DropDownList
A dropdown menu is a method to show a huge list of options since only one choice is displayed initially until someone activates the dropdown box.
Figure 1: DropDownListWhat is Razor View in MVC?
Razor View is a markup syntax that lets us embed server-based code into web apps using C#. It is not a programming language, just a server-side markup language.
Razor has no specific relations to ASP.NET MVC because it is a general-purpose template engine. We can use it anywhere for HTML like output generation. It is just used in MVC to produce an HTML-like view from web apps.
We can have a template file that is a mixture of some literal with some code snippets. We combine that template with some data or specific model where the data is meant to appear and then we execute the template to generate our output.
It is similar to ASPX files. ASPX files otherwise called templates have literal with a bit of C# code and these together help to display specific frame or content to the user.
| | @foreach [var item in Model] { @Html.ActionLink["Edit", "Edit", new { id = item.ID }] | @Html.ActionLink["Details", "Details", new { id = item.ID }] | @Html.ActionLink["Delete", "Delete", new { id = item.ID }] @item.Name @String.Format["{0,g}", item.JoiningDate] }Read More: Razor Pages Vs Mvc In Asp.net
How do I bind a DropDownList in MVC Razor?
To populate the DropDownList in MVC using Razor, we can use multiple ways like ViewBag, ViewData, Tempdata, jQuery, Model, Database, AJAX, and Hardcoding in View.
DropdownList using Hardcoded data in view
DropdownList using Viewbag
public ActionResult Index[] { #region ViewBag List < SelectListItem > mySkills = new List < SelectListItem > [] { new SelectListItem { Text = "ASP.NET MVC", Value = "1" }, new SelectListItem { Text = "ASP.NET WEB API", Value = "2" }, new SelectListItem { Text = "ENTITY FRAMEWORK", Value = "3" }, new SelectListItem { Text = "DOCUSIGN", Value = "4" }, new SelectListItem { Text = "ORCHARD CMS", Value = "5" }, new SelectListItem { Text = "JQUERY", Value = "6" }, new SelectListItem { Text = "ZENDESK", Value = "7" }, new SelectListItem { Text = "LINQ", Value = "8" }, new SelectListItem { Text = "C#", Value = "9" }, new SelectListItem { Text = "GOOGLE ANALYTICS", Value = "10" }, }; ViewBag.MySkills = mySkills; #endregion return View[]; } Populating With ViewBag Data @Html.DropDownList["MySkills", [IEnumerable ]ViewBag.MySkills]DropdownListusing ViewData
public ActionResult Index[] { #region ViewData List < SelectListItem > mySkills = new List < SelectListItem > [] { new SelectListItem { Text = "ASP.NET MVC", Value = "1" }, new SelectListItem { Text = "ASP.NET WEB API", Value = "2" }, new SelectListItem { Text = "ENTITY FRAMEWORK", Value = "3" }, new SelectListItem { Text = "DOCUSIGN", Value = "4" }, new SelectListItem { Text = "ORCHARD CMS", Value = "5" }, new SelectListItem { Text = "JQUERY", Value = "6" }, new SelectListItem { Text = "ZENDESK", Value = "7" }, new SelectListItem { Text = "LINQ", Value = "8" }, new SelectListItem { Text = "C#", Value = "9" }, new SelectListItem { Text = "GOOGLE ANALYTICS", Value = "10" }, }; ViewData["MySkills"] = mySkills; #endregion } Populating With ViewData Data @Html.DropDownList["MySkills", [IEnumerable ]ViewData["MySkills"]]DropdownList using TempData
#region TempData List < SelectListItem > mySkills = new List < SelectListItem > [] { new SelectListItem { Text = "ASP.NET MVC", Value = "1" }, new SelectListItem { Text = "ASP.NET WEB API", Value = "2" }, new SelectListItem { Text = "ENTITY FRAMEWORK", Value = "3" }, new SelectListItem { Text = "DOCUSIGN", Value = "4" }, new SelectListItem { Text = "ORCHARD CMS", Value = "5" }, new SelectListItem { Text = "JQUERY", Value = "6" }, new SelectListItem { Text = "ZENDESK", Value = "7" }, new SelectListItem { Text = "LINQ", Value = "8" }, new SelectListItem { Text = "C#", Value = "9" }, new SelectListItem { Text = "GOOGLE ANALYTICS", Value = "10" }, }; TempData["MySkills"] = mySkills; #endregion Populating With TempData Data @Html.DropDownList["MySkills", [IEnumerable ]TempData["MySkills"]]Searching for Reliable .Net Development Company ?
Your Search ends here.
DropdownList using Enum
public enum MySkills { ASPNETMVC, ASPNETWEPAPI, CSHARP, DOCUSIGN, JQUERY } public struct ConvertEnum { public int Value { get; set; } public String Text { get; set; } } var myskill = new List < ConvertEnum > []; foreach[MySkills lang in Enum.GetValues[typeof[MySkills]]] myskill.Add[new ConvertEnum { Value = [int] lang, Text = lang.ToString[] }]; ViewBag.MySkillEnum = myskill; Populating From Enum @Html.DropDownList["MySkills", new SelectList[ViewBag.MySkillEnum, "Value", "Text"]]DropdownList using Database with Entity Framework
DropdownList using Jquery Ajax with JSON Data
public JsonResult ReturnJSONDataToAJax[] //It will be fired from Jquery ajax call { CSharpCornerEntities cshparpEntity = new CSharpCornerEntities[]; var jsonData = cshparpEntity.MySkills.ToList[]; return Json[jsonData, JsonRequestBehavior.AllowGet]; } Populating With Json Data @Html.DropDownList["FromJson", new SelectList[Enumerable.Empty []]]DropdownList using Model
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace VariousWayBindingDropDownListInMVC5.Models { public class MySkills { public int ID { get; set; } public string Name { get; set; } public IEnumerable < SelectListItem > Skills { get; set; } } } var model = new VariousWayBindingDropDownListInMVC5.Models.MySkills[]; using[CSharpCornerEntities cshparpEntity = new CSharpCornerEntities[]] { var dbData = cshparpEntity.MySkills.ToList[]; model.Skills = GetSelectListItems[dbData]; } private IEnumerable < SelectListItem > GetSelectListItems[IEnumerable < MySkill > elements] { var selectList = new List < SelectListItem > []; foreach[var element in elements] { selectList.Add[new SelectListItem { Value = element.ID.ToString[], Text = element.Name }]; } return selectList; } @model VariousWayBindingDropDownListInMVC5.Models.MySkills Populating With Model Data @Html.DropDownList["FromModel", Model.Skills]DropdownList using Global Static Data in View
@ { List < SelectListItem > listItems = new List < SelectListItem > []; listItems.Add[new SelectListItem { Text = "ASP.NET MVC", Value = "1" }]; listItems.Add[new SelectListItem { Text = "ASP.NET WEB API", Value = "2", Selected = true }]; listItems.Add[new SelectListItem { Text = "DOCUSIGN", Value = "3" }]; listItems.Add[new SelectListItem { Text = "C#", Value = "4" }]; } < tr > < td > Populating With Global static Data < /td> < td > @Html.DropDownList["StaticData", listItems] < /td> < /tr>Conclusion
In this article, we discussed DropDownList and Razor View basics. We also discussed different ways to implement the DropDownList using Razor. Many of them get stuck with binding dropdown elements using MVC. As it is an important concept, this blog will help them resolve their concerns of dropdown list binding.
Author Bio
Author Name: Ishan Sarvaiya
Ishan Sarvaiya is a .NET fanatic who takes a wide view of the whole process with his impeccable specialization. With a fine demonstration of the concepts, he keenly shares marvellous insights on various platforms.
category
- Project Management[28]
- Business verticals[1]
- Aviation[2]
- Retail[2]
- Healthcare Development[6]
- Finance Development [3]
- Transportation & Logistics[5]
- Legal development[2]
- Education Development [5]
- Hospitality Development [1]
- Fleet development[1]
- Entertainment Development [2]
- Environment Development[1]
- Construction Development [1]
- Content Management System[7]
- Digital India[4]
- eCommerce solutions[27]
- eGovernance[6]
- Enterprise Solutions[11]
- BDaaS[2]
- CRM[5]
- ERP[5]
- SaaS[5]
- Supply chain management[2]
- Indian Government Initiatives[4]
- Mobile Application Development[24]
- Android app development[4]
- Hybrid Mobile App Development[6]
- App Store Optimitation[2]
- Mobile App Development Ideas[2]
- Security[20]
- Software Outsourcing[8]
- Software Quality[5]
- Software Technologies[50]
- .NET Framework[78]
- Amazon API : MWS[2]
- Blockchain Development[31]
- Charting tools[2]
- Digital Currency[3]
- JavaScript frameworks[5]
- NopCommerce[2]
- Telerik AppBuilder[2]
- VSTO Addin development[1]
- Xamarin[16]
- IoT - Internet of Things[2]
- nodejs Development[15]
- VueJs[2]
- Angular Development[48]
- ASP.NET Development[94]
- Javascript[3]
- Ionic[2]
- WPF Development[10]
- C# development[8]
- MVC development[22]
- Java Development[4]
- Technology News[8]
- Top ten[28]
- Software Development[126]
- Digital Marketing[14]
- User Experience[8]
- Cloud[12]
- Web Development[120]
- Technology Trends[18]
- Database Management [2]
- React JS[8]
recent post
- Is .NET framework dead and what is its future? [ more ]
- Top 5 incredible features of entertainment & media software [ more ]
- Whats new in NgRx Version 12 of Angular? [ more ]