Create a prefecture dropdown

4 minute read

controller

The settings on the controller side are as follows

controller.cs



        [HttpGet]
        public ActionResult Index()
        {

            int accountId = getAccountIdFromCookie();
            ProfileModel profileList = getProfileList(accountId);
            ProfileViewModel vm = new ProfileViewModel();
            vm.Name = profileList.Name;
            vm.Email = profileList.Email;
            
            if(!(profileList.Prefucture == null))
            {
                string pnumber = profileList.Prefucture;
                var selectoptions = getSelectListItem();
                vm.Prefucture = selectoptions.Where(p => p.Value == pnumber).First().Text;
            }
            vm.Address = profileList.Address;

            return View("index", vm);
        }


        public ActionResult Edit(string name, string email, string prefucture, string address)
        {

            ProfileViewModel vm = new ProfileViewModel();
            vm.Name = name;
            vm.Email = email;
            vm.Prefucture = prefucture;
            vm.Address = address;

            ViewBag.SelectOptions = getSelectListItem();

            return View("edit", vm);
        }

         private List<SelectListItem> getSelectListItem()
        {
            List<SelectListItem> selectoptions = new List<SelectListItem>();
            var group1 = new SelectListGroup() { Name = "Hokkaido and Tohoku" };
            var group2 = new SelectListGroup() { Name = "Kanto" };
            var group3 = new SelectListGroup() { Name = "Koshinetsu / Hokuriku" };
            var group4 = new SelectListGroup() { Name = "Tokai" };
            var group5 = new SelectListGroup() { Name = "Kansai" };
            var group6 = new SelectListGroup() { Name = "Chugoku / Shikoku" };
            var group7 = new SelectListGroup() { Name = "Kyushu-Okinawa" };

            selectoptions.Add(new SelectListItem() { Value = "1", Text = "Hokkaido", Group = group1 });
            selectoptions.Add(new SelectListItem() { Value = "2", Text = "Aomori Prefecture", Group = group1 });
            selectoptions.Add(new SelectListItem() { Value = "3", Text = "Iwate Prefecture", Group = group1 });
            selectoptions.Add(new SelectListItem() { Value = "4", Text = "Miyagi Prefecture", Group = group1 });
            selectoptions.Add(new SelectListItem() { Value = "5", Text = "Akita", Group = group1 });
            selectoptions.Add(new SelectListItem() { Value = "6", Text = "Yamagata Prefecture", Group = group1 });
            selectoptions.Add(new SelectListItem() { Value = "7", Text = "Fukushima Prefecture", Group = group1 });
            selectoptions.Add(new SelectListItem() { Value = "8", Text = "Ibaraki Prefecture", Group = group2 });
            selectoptions.Add(new SelectListItem() { Value = "9", Text = "Tochigi Prefecture", Group = group2 });
            selectoptions.Add(new SelectListItem() { Value = "10", Text = "Gunma Prefecture", Group = group2 });
            selectoptions.Add(new SelectListItem() { Value = "11", Text = "Saitama", Group = group2 });
            selectoptions.Add(new SelectListItem() { Value = "12", Text = "Chiba", Group = group2 });
            selectoptions.Add(new SelectListItem() { Value = "13", Text = "Tokyo", Group = group2 });
            selectoptions.Add(new SelectListItem() { Value = "14", Text = "Kanagawa Prefecture", Group = group2 });
            selectoptions.Add(new SelectListItem() { Value = "15", Text = "Niigata Prefecture", Group = group3 });
            selectoptions.Add(new SelectListItem() { Value = "16", Text = "Toyama Prefecture", Group = group3 });
            selectoptions.Add(new SelectListItem() { Value = "17", Text = "Ishikawa Prefecture", Group = group3 });
            selectoptions.Add(new SelectListItem() { Value = "18", Text = "Fukui prefecture", Group = group3 });
            selectoptions.Add(new SelectListItem() { Value = "19", Text = "Yamanashi Prefecture", Group = group3 });
            selectoptions.Add(new SelectListItem() { Value = "20", Text = "Nagano Prefecture", Group = group3 });
            selectoptions.Add(new SelectListItem() { Value = "21", Text = "Gifu Prefecture", Group = group4 });
            selectoptions.Add(new SelectListItem() { Value = "22", Text = "Shizuoka Prefecture", Group = group4 });
            selectoptions.Add(new SelectListItem() { Value = "23", Text = "Aichi prefecture", Group = group4 });
            selectoptions.Add(new SelectListItem() { Value = "24", Text = "Mie Prefecture", Group = group4 });
            selectoptions.Add(new SelectListItem() { Value = "25", Text = "Shiga Prefecture", Group = group5 });
            selectoptions.Add(new SelectListItem() { Value = "26", Text = "Kyoto", Group = group5 });
            selectoptions.Add(new SelectListItem() { Value = "27", Text = "Osaka", Group = group5 });
            selectoptions.Add(new SelectListItem() { Value = "28", Text = "Hyogo prefecture", Group = group5 });
            selectoptions.Add(new SelectListItem() { Value = "29", Text = "Nara Prefecture", Group = group5 });
            selectoptions.Add(new SelectListItem() { Value = "30", Text = "Wakayama Prefecture", Group = group5 });
            selectoptions.Add(new SelectListItem() { Value = "31", Text = "Tottori prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "32", Text = "Shimane Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "33", Text = "Okayama Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "34", Text = "Hiroshima Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "35", Text = "Yamaguchi Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "36", Text = "Tokushima Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "37", Text = "Kagawa Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "38", Text = "Ehime Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "39", Text = "Kochi Prefecture", Group = group6 });
            selectoptions.Add(new SelectListItem() { Value = "40", Text = "Fukuoka Prefecture", Group = group7 });
            selectoptions.Add(new SelectListItem() { Value = "41", Text = "Saga Prefecture", Group = group7 });
            selectoptions.Add(new SelectListItem() { Value = "42", Text = "Nagasaki Prefecture", Group = group7 });
            selectoptions.Add(new SelectListItem() { Value = "43", Text = "Kumamoto Prefecture", Group = group7 });
            selectoptions.Add(new SelectListItem() { Value = "44", Text = "Oita Prefecture", Group = group7 });
            selectoptions.Add(new SelectListItem() { Value = "45", Text = "Miyazaki prefecture", Group = group7 });
            selectoptions.Add(new SelectListItem() { Value = "46", Text = "Kagoshima prefecture", Group = group7 });
            selectoptions.Add(new SelectListItem() { Value = "47", Text = "Okinawa Prefecture", Group = group7 });

            return selectoptions;
        }

View

The settings on the view side are as follows

Edit.cshtml


@model TestApp8.Models.ProfileViewModel
@{
    ViewBag.Title = "Profile";


}<div class="login-form">
     <form method="post" action="~/profile/edit">
         <h1>@ViewBag.Title</h1>
         <div class="form-item">
             @Html.TextBoxFor(model => model.Name, new { type = "name", @value = Model.Name })
         </div>
         <div class="form-item">
             @Html.TextBoxFor(model => model.Password, new { type = "password", @value = Model.Password })
         </div>
         <div class="form-item">
             @Html.DropDownListFor(model => model.Prefucture,
                (IEnumerable<SelectListItem>)ViewBag.SelectOptions,
                 "Prefectures",
                    new { @class = "title_list" }
                ) <br />
         </div>
         <div class="form-item">
             @Html.TextBoxFor(model => model.Address, new { type = "text", @value = Model.Address })
         </div>
         <div class="button-panel">
             <button type="submit" class="button" title="Sign In" value="Sign In">Update</button>
         </div>
         <label style="color:#ff0000">@Html.ValidationSummary()</label>
     </form>
</div>

Tags:

Updated: