Hi I am new to MVC and even asp..
I want to create a form in MVC. With the help of some examples I am able to create TextBoxes, but I now I don’t understand how to create Select List./
I tried searching many examples for implementing Select List in MVC, but I am not able to understand.
I have a Form which is half coded in HTML and half in MVC.
Here is my Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MedAvail.Applications.MedProvision.Web.Models
{
public class AddressViewModel
{
public string Street1 { get; set; }
public string Street2 { get; set; }
public string City { get; set; }
public string Province { get; set; }
public string Country { get; set; }
public string PostalCode { get; set; }
public string PhoneNumber { get; set; }
}
}
<form id="locationInfo">
<h1>Location Information</h1>
<table width="80%" id="locInfo">
<colgroup>
<col width="20%" />
<col />
</colgroup>
<tr>
<th>@Html.Label("Country")</th>
<td>
<select required="">
<option>Select Country</option>
<option>Canada</option>
<option>United States</option>
</select>
<span class="required">*</span>
</td>
</tr>
<tr>
<th>@Html.LabelFor(x=>x.State)</th>
<td>
<select required="">
<option>Select State</option>
<option>State 1</option>
<option>State 2</option>
<option>State 3</option>
...............
</select><span class="required">*</span></td>
</tr>
<tr>
<th>@Html.LabelFor(x=>x.PostalCode)</th>
<td>@Html.TextBoxFor(x=>x.PostalCode)<span class="required">*</span></td>
</tr>
<tr>
<th>@Html.LabelFor(x=>x.City)</th>
<td>@Html.TextBoxFor(x=>x.City)<span class="required">*</span></td>
</tr>
<tr>
<th>@Html.LabelFor(x=>x.StreetAddress1)</th>
<td>@Html.TextBoxFor(x=>x.StreetAddress1)<span class="required">*</span></td>
</tr>
<tr>
<th>@Html.LabelFor(x=>x.StreetAddress2)</th>
<td>@Html.TextBoxFor(x=>x.StreetAddress2)</td>
</tr>
<tr>
<th>@Html.LabelFor(x=>x.PhoneNumber)</th>
<td>@Html.TextBoxFor(x=>x.PhoneNumber)</td>
</tr>
</table>
<div role="button" class="marginTop50 marginBottom">
<input type="button" id="step3Back" value="Back" class="active" />
<input type="button" id="step3confirmNext" value="Next" class="active marginLeft50" />
</div>
</form>
Please guide me on how to create the Select List for this kind of form.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
public static List<SelectListItem> States = new List<SelectListItem>()
{
new SelectListItem() {Text="Alabama", Value="AL"},
new SelectListItem() { Text="Alaska", Value="AK"},
new SelectListItem() { Text="Arizona", Value="AZ"},
new SelectListItem() { Text="Arkansas", Value="AR"},
new SelectListItem() { Text="California", Value="CA"},
new SelectListItem() { Text="Colorado", Value="CO"},
new SelectListItem() { Text="Connecticut", Value="CT"},
new SelectListItem() { Text="District of Columbia", Value="DC"},
new SelectListItem() { Text="Delaware", Value="DE"},
new SelectListItem() { Text="Florida", Value="FL"},
new SelectListItem() { Text="Georgia", Value="GA"},
new SelectListItem() { Text="Hawaii", Value="HI"},
new SelectListItem() { Text="Idaho", Value="ID"},
new SelectListItem() { Text="Illinois", Value="IL"},
new SelectListItem() { Text="Indiana", Value="IN"},
new SelectListItem() { Text="Iowa", Value="IA"},
new SelectListItem() { Text="Kansas", Value="KS"},
new SelectListItem() { Text="Kentucky", Value="KY"},
new SelectListItem() { Text="Louisiana", Value="LA"},
new SelectListItem() { Text="Maine", Value="ME"},
new SelectListItem() { Text="Maryland", Value="MD"},
new SelectListItem() { Text="Massachusetts", Value="MA"},
new SelectListItem() { Text="Michigan", Value="MI"},
new SelectListItem() { Text="Minnesota", Value="MN"},
new SelectListItem() { Text="Mississippi", Value="MS"},
new SelectListItem() { Text="Missouri", Value="MO"},
new SelectListItem() { Text="Montana", Value="MT"},
new SelectListItem() { Text="Nebraska", Value="NE"},
new SelectListItem() { Text="Nevada", Value="NV"},
new SelectListItem() { Text="New Hampshire", Value="NH"},
new SelectListItem() { Text="New Jersey", Value="NJ"},
new SelectListItem() { Text="New Mexico", Value="NM"},
new SelectListItem() { Text="New York", Value="NY"},
new SelectListItem() { Text="North Carolina", Value="NC"},
new SelectListItem() { Text="North Dakota", Value="ND"},
new SelectListItem() { Text="Ohio", Value="OH"},
new SelectListItem() { Text="Oklahoma", Value="OK"},
new SelectListItem() { Text="Oregon", Value="OR"},
new SelectListItem() { Text="Pennsylvania", Value="PA"},
new SelectListItem() { Text="Rhode Island", Value="RI"},
new SelectListItem() { Text="South Carolina", Value="SC"},
new SelectListItem() { Text="South Dakota", Value="SD"},
new SelectListItem() { Text="Tennessee", Value="TN"},
new SelectListItem() { Text="Texas", Value="TX"},
new SelectListItem() { Text="Utah", Value="UT"},
new SelectListItem() { Text="Vermont", Value="VT"},
new SelectListItem() { Text="Virginia", Value="VA"},
new SelectListItem() { Text="Washington", Value="WA"},
new SelectListItem() { Text="West Virginia", Value="WV"},
new SelectListItem() { Text="Wisconsin", Value="WI"},
new SelectListItem() { Text="Wyoming", Value="WY"}
};
How we do it is put this method into a class and then call the class from the view
@Html.DropDownListFor(x => x.State, Class.States)
Method 2
Thank You All! I am able to to load Select List as per MVC now My Working Code is below:
HTML+MVC Code in View:-
<tr>
<th>@Html.Label("Country")</th>
<td>@Html.DropDownListFor(x =>x.Province,SelectListItemHelper.GetCountryList())<span class="required">*</span></td>
</tr>
<tr>
<th>@Html.LabelFor(x=>x.Province)</th>
<td>@Html.DropDownListFor(x =>x.Province,SelectListItemHelper.GetProvincesList())<span class="required">*</span></td>
</tr>
Created a Controller under “UTIL” folder:
Code:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MedAvail.Applications.MedProvision.Web.Util
{
public class SelectListItemHelper
{
public static IEnumerable<SelectListItem> GetProvincesList()
{
IList<SelectListItem> items = new List<SelectListItem>
{
new SelectListItem{Text = "California", Value = "B"},
new SelectListItem{Text = "Alaska", Value = "B"},
new SelectListItem{Text = "Illinois", Value = "B"},
new SelectListItem{Text = "Texas", Value = "B"},
new SelectListItem{Text = "Washington", Value = "B"}
};
return items;
}
public static IEnumerable<SelectListItem> GetCountryList()
{
IList<SelectListItem> items = new List<SelectListItem>
{
new SelectListItem{Text = "United States", Value = "B"},
new SelectListItem{Text = "Canada", Value = "B"},
new SelectListItem{Text = "United Kingdom", Value = "B"},
new SelectListItem{Text = "Texas", Value = "B"},
new SelectListItem{Text = "Washington", Value = "B"}
};
return items;
}
}
}
And its working COOL now 🙂
Thank you!!
Method 3
Thank you for this
Here’s what I did:
1.Created an Extensions.cs file in a Utils folder.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Web.ProjectName.Utils
{
public class Extensions
{
public static IEnumerable<SelectListItem> GetStatesList()
{
IList<SelectListItem> states = new List<SelectListItem>
{
new SelectListItem() {Text="Alabama", Value="AL"},
new SelectListItem() { Text="Alaska", Value="AK"},
new SelectListItem() { Text="Arizona", Value="AZ"},
new SelectListItem() { Text="Arkansas", Value="AR"},
new SelectListItem() { Text="California", Value="CA"},
new SelectListItem() { Text="Colorado", Value="CO"},
new SelectListItem() { Text="Connecticut", Value="CT"},
new SelectListItem() { Text="District of Columbia", Value="DC"},
new SelectListItem() { Text="Delaware", Value="DE"},
new SelectListItem() { Text="Florida", Value="FL"},
new SelectListItem() { Text="Georgia", Value="GA"},
new SelectListItem() { Text="Hawaii", Value="HI"},
new SelectListItem() { Text="Idaho", Value="ID"},
new SelectListItem() { Text="Illinois", Value="IL"},
new SelectListItem() { Text="Indiana", Value="IN"},
new SelectListItem() { Text="Iowa", Value="IA"},
new SelectListItem() { Text="Kansas", Value="KS"},
new SelectListItem() { Text="Kentucky", Value="KY"},
new SelectListItem() { Text="Louisiana", Value="LA"},
new SelectListItem() { Text="Maine", Value="ME"},
new SelectListItem() { Text="Maryland", Value="MD"},
new SelectListItem() { Text="Massachusetts", Value="MA"},
new SelectListItem() { Text="Michigan", Value="MI"},
new SelectListItem() { Text="Minnesota", Value="MN"},
new SelectListItem() { Text="Mississippi", Value="MS"},
new SelectListItem() { Text="Missouri", Value="MO"},
new SelectListItem() { Text="Montana", Value="MT"},
new SelectListItem() { Text="Nebraska", Value="NE"},
new SelectListItem() { Text="Nevada", Value="NV"},
new SelectListItem() { Text="New Hampshire", Value="NH"},
new SelectListItem() { Text="New Jersey", Value="NJ"},
new SelectListItem() { Text="New Mexico", Value="NM"},
new SelectListItem() { Text="New York", Value="NY"},
new SelectListItem() { Text="North Carolina", Value="NC"},
new SelectListItem() { Text="North Dakota", Value="ND"},
new SelectListItem() { Text="Ohio", Value="OH"},
new SelectListItem() { Text="Oklahoma", Value="OK"},
new SelectListItem() { Text="Oregon", Value="OR"},
new SelectListItem() { Text="Pennsylvania", Value="PA"},
new SelectListItem() { Text="Rhode Island", Value="RI"},
new SelectListItem() { Text="South Carolina", Value="SC"},
new SelectListItem() { Text="South Dakota", Value="SD"},
new SelectListItem() { Text="Tennessee", Value="TN"},
new SelectListItem() { Text="Texas", Value="TX"},
new SelectListItem() { Text="Utah", Value="UT"},
new SelectListItem() { Text="Vermont", Value="VT"},
new SelectListItem() { Text="Virginia", Value="VA"},
new SelectListItem() { Text="Washington", Value="WA"},
new SelectListItem() { Text="West Virginia", Value="WV"},
new SelectListItem() { Text="Wisconsin", Value="WI"},
new SelectListItem() { Text="Wyoming", Value="WY"}
};
return states;
}
}
}
2.In my model, where state will be abbreviated (e.g. “AL”, “NY”, etc.):
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace Web.ProjectName.Models
{
public class ContactForm
{
...
[Required]
[Display(Name = "State")]
[RegularExpression("[A-Z]{2}")]
public string State { get; set; }
...
}
}
2.In my view I referenced it:
@model Web.ProjectName.Models.ContactForm
...
@Html.LabelFor(x => x.State, new { @class = "form-label" })
@Html.DropDownListFor(x => x.State, Web.ProjectName.Utils.Extensions.GetStatesList(), new { @class = "form-control" })
...
Method 4
Designing You Model:
Public class ModelName
{
...// Properties
public IEnumerable<SelectListItem> ListName { get; set; }
}
Prepare and bind List to Model in Controller :
public ActionResult Index(ModelName model)
{
var items = // Your List of data
model.ListName = items.Select(x=> new SelectListItem() {
Text = x.prop,
Value = x.prop2
});
}
In You View :
@Html.DropDownListFor(m => Model.prop2,Model.ListName)
Method 5
So many ways to do this… for #NetCore use Lib..
using System;
using System.Collections.Generic;
using System.Linq; // only required when .AsEnumerable() is used
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Mvc.Rendering;
Model…
namespace MyProject.Models
{
public class MyModel
{
[Required]
[Display(Name = "State")]
public string StatePick { get; set; }
public string state { get; set; }
[StringLength(35, ErrorMessage = "State cannot be longer than 35 characters.")]
public SelectList StateList { get; set; }
}
}
Controller…
namespace MyProject.Controllers
{
/// <summary>
/// create SelectListItem from strings
/// </summary>
/// <param name="isValue">defaultValue is SelectListItem.Value is true, SelectListItem.Text if false</param>
/// <returns></returns>
private SelectListItem newItem(string value, string text, string defaultValue = "", bool isValue = false)
{
SelectListItem ss = new SelectListItem();
ss.Text = text;
ss.Value = value;
// select default by Value or Text
if (isValue && ss.Value == defaultValue || !isValue && ss.Text == defaultValue)
{
ss.Selected = true;
}
return ss;
}
/// <summary>
/// this pulls the state name from _context and sets it as the default for the selectList
/// </summary>
/// <param name="myState">sets default value for list of states</param>
/// <returns></returns>
private SelectList getStateList(string myState = "")
{
List<SelectListItem> states = new List<SelectListItem>();
SelectListItem chosen = new SelectListItem();
// set default selected state to OHIO
string defaultValue = "OH";
if (!string.IsNullOrEmpty(myState))
{
defaultValue = myState;
}
try
{
states.Add(newItem("AL", "Alabama", defaultValue, true));
states.Add(newItem("AK", "Alaska", defaultValue, true));
states.Add(newItem("AZ", "Arizona", defaultValue, true));
states.Add(newItem("AR", "Arkansas", defaultValue, true));
states.Add(newItem("CA", "California", defaultValue, true));
states.Add(newItem("CO", "Colorado", defaultValue, true));
states.Add(newItem("CT", "Connecticut", defaultValue, true));
states.Add(newItem("DE", "Delaware", defaultValue, true));
states.Add(newItem("DC", "District of Columbia", defaultValue, true));
states.Add(newItem("FL", "Florida", defaultValue, true));
states.Add(newItem("GA", "Georgia", defaultValue, true));
states.Add(newItem("HI", "Hawaii", defaultValue, true));
states.Add(newItem("ID", "Idaho", defaultValue, true));
states.Add(newItem("IL", "Illinois", defaultValue, true));
states.Add(newItem("IN", "Indiana", defaultValue, true));
states.Add(newItem("IA", "Iowa", defaultValue, true));
states.Add(newItem("KS", "Kansas", defaultValue, true));
states.Add(newItem("KY", "Kentucky", defaultValue, true));
states.Add(newItem("LA", "Louisiana", defaultValue, true));
states.Add(newItem("ME", "Maine", defaultValue, true));
states.Add(newItem("MD", "Maryland", defaultValue, true));
states.Add(newItem("MA", "Massachusetts", defaultValue, true));
states.Add(newItem("MI", "Michigan", defaultValue, true));
states.Add(newItem("MN", "Minnesota", defaultValue, true));
states.Add(newItem("MS", "Mississippi", defaultValue, true));
states.Add(newItem("MO", "Missouri", defaultValue, true));
states.Add(newItem("MT", "Montana", defaultValue, true));
states.Add(newItem("NE", "Nebraska", defaultValue, true));
states.Add(newItem("NV", "Nevada", defaultValue, true));
states.Add(newItem("NH", "New Hampshire", defaultValue, true));
states.Add(newItem("NJ", "New Jersey", defaultValue, true));
states.Add(newItem("NM", "New Mexico", defaultValue, true));
states.Add(newItem("NY", "New York", defaultValue, true));
states.Add(newItem("NC", "North Carolina", defaultValue, true));
states.Add(newItem("ND", "North Dakota", defaultValue, true));
states.Add(newItem("OH", "Ohio", defaultValue, true));
states.Add(newItem("OK", "Oklahoma", defaultValue, true));
states.Add(newItem("OR", "Oregon", defaultValue, true));
states.Add(newItem("PA", "Pennsylvania", defaultValue, true));
states.Add(newItem("RI", "Rhode Island", defaultValue, true));
states.Add(newItem("SC", "South Carolina", defaultValue, true));
states.Add(newItem("SD", "South Dakota", defaultValue, true));
states.Add(newItem("TN", "Tennessee", defaultValue, true));
states.Add(newItem("TX", "Texas", defaultValue, true));
states.Add(newItem("UT", "Utah", defaultValue, true));
states.Add(newItem("VT", "Vermont", defaultValue, true));
states.Add(newItem("VA", "Virginia", defaultValue, true));
states.Add(newItem("WA", "Washington", defaultValue, true));
states.Add(newItem("WV", "West Virginia", defaultValue, true));
states.Add(newItem("WI", "Wisconsin", defaultValue, true));
states.Add(newItem("WY", "Wyoming", defaultValue, true));
foreach (SelectListItem state in states)
{
if (state.Selected)
{
chosen = state;
break;
}
}
}
catch (Exception err)
{
string ss = "ERR! " + err.Source + " " + err.GetType().ToString() + "rn" + err.Message.Replace("rn", " ");
ss = this.sendError("Online getStateList Request", ss, _errPassword);
// return error
}
// .AsEnumerable() is not required in the pass.. it is an extension of Linq
SelectList myList = new SelectList(states.AsEnumerable(), "Value", "Text", chosen);
object val = myList.SelectedValue;
return myList;
}
public ActionResult pickState(MyModel pData)
{
if (pData.StateList == null)
{
if (String.IsNullOrEmpty(pData.StatePick)) // state abbrev, value collected onchange
{
pData.StateList = getStateList();
}
else
{
pData.StateList = getStateList(pData.StatePick);
}
// assign values to state list items
try
{
SelectListItem si = (SelectListItem)pData.StateList.SelectedValue;
pData.state = si.Value;
pData.StatePick = si.Value;
}
catch { }
}
return View(pData);
}
}
pickState.cshtml…
@model MyProject.Models.MyModel
@{
ViewBag.Title = "United States of America";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@ViewBag.Title - Where are you...</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<div class="editor-label">
@Html.DisplayNameFor(model => model.state)
</div>
<div class="display-field">
@Html.DropDownListFor(m => m.StatePick, Model.StateList, new { OnChange = "state.value = this.value;" })
@Html.EditorFor(model => model.state)
@Html.ValidationMessageFor(model => model.StateList)
</div>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Method 6
I too liked Jordan’s answer and implemented it myself. I only needed to abbreviations so in case someone else needs the same:
public static IEnumerable<SelectListItem> GetStatesList()
{
IList<SelectListItem> states = new List<SelectListItem>
{
new SelectListItem() {Text="AL", Value="AL"},
new SelectListItem() { Text="AK", Value="AK"},
new SelectListItem() { Text="AZ", Value="AZ"},
new SelectListItem() { Text="AR", Value="AR"},
new SelectListItem() { Text="CA", Value="CA"},
new SelectListItem() { Text="CO", Value="CO"},
new SelectListItem() { Text="CT", Value="CT"},
new SelectListItem() { Text="DC", Value="DC"},
new SelectListItem() { Text="DE", Value="DE"},
new SelectListItem() { Text="FL", Value="FL"},
new SelectListItem() { Text="GA", Value="GA"},
new SelectListItem() { Text="HI", Value="HI"},
new SelectListItem() { Text="ID", Value="ID"},
new SelectListItem() { Text="IL", Value="IL"},
new SelectListItem() { Text="IN", Value="IN"},
new SelectListItem() { Text="IA", Value="IA"},
new SelectListItem() { Text="KS", Value="KS"},
new SelectListItem() { Text="KY", Value="KY"},
new SelectListItem() { Text="LA", Value="LA"},
new SelectListItem() { Text="ME", Value="ME"},
new SelectListItem() { Text="MD", Value="MD"},
new SelectListItem() { Text="MA", Value="MA"},
new SelectListItem() { Text="MI", Value="MI"},
new SelectListItem() { Text="MN", Value="MN"},
new SelectListItem() { Text="MS", Value="MS"},
new SelectListItem() { Text="MO", Value="MO"},
new SelectListItem() { Text="MT", Value="MT"},
new SelectListItem() { Text="NE", Value="NE"},
new SelectListItem() { Text="NV", Value="NV"},
new SelectListItem() { Text="NH", Value="NH"},
new SelectListItem() { Text="NJ", Value="NJ"},
new SelectListItem() { Text="NM", Value="NM"},
new SelectListItem() { Text="NY", Value="NY"},
new SelectListItem() { Text="NC", Value="NC"},
new SelectListItem() { Text="ND", Value="ND"},
new SelectListItem() { Text="OH", Value="OH"},
new SelectListItem() { Text="OK", Value="OK"},
new SelectListItem() { Text="OR", Value="OR"},
new SelectListItem() { Text="PA", Value="PA"},
new SelectListItem() { Text="PR", Value="PR"},
new SelectListItem() { Text="RI", Value="RI"},
new SelectListItem() { Text="SC", Value="SC"},
new SelectListItem() { Text="SD", Value="SD"},
new SelectListItem() { Text="TN", Value="TN"},
new SelectListItem() { Text="TX", Value="TX"},
new SelectListItem() { Text="UT", Value="UT"},
new SelectListItem() { Text="VT", Value="VT"},
new SelectListItem() { Text="VA", Value="VA"},
new SelectListItem() { Text="WA", Value="WA"},
new SelectListItem() { Text="WV", Value="WV"},
new SelectListItem() { Text="WI", Value="WI"},
new SelectListItem() { Text="WY", Value="WY"}
};
return states;
}
Method 7
Best way to make drop down list:
grid.Column("PriceType",canSort:true,header: "PriceType",format: @<span>
<span id="<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbfbcada29cbea5afa998b5bca9938ca5b8a9a1e29fa4a3bcbca5a2ab8fadbeb88588">[email protected]</a>">@item.PriceTypeDescription</span>
@Html.DropDownList("PriceType"+(int)item.ShoppingCartID,new SelectList(MvcApplication1.Services.ExigoApiContext.CreateODataContext().PriceTypes.Select(s => new { s.PriceTypeID, s.PriceTypeDescription }).AsEnumerable(),"PriceTypeID", "PriceTypeDescription",Convert.ToInt32(item.PriceTypeId)), new { @class = "PriceType",@style="width:120px;display:none",@selectedvalue="selected"})
</span>),
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0