What is this post about?

If you use Umbraco and you create forms using MVC and razor, perhaps a contact form, you might want to populate a dropdownlist with data controlled by the Umbraco backoffice. This post shows you how to do that.

You can now watch the video of me implementing this

1. Create an Umbraco Data type

In the Developer tab of Umbraco, click on the dots next to Data Types and create a new data type. Enter a name and choose dropdown list as the property editor.

Add the values you want to appear in the dropdown list. Then click on Save.

After you have pressed save, make a note of the id at the end of the url.

2. Add this helper class to your project

using System;
using System.Collections.Generic;
using System.Xml.XPath;
using System.Web.Mvc;
using System.Web.Configuration;
namespace CodeShare.Library.Helpers {     public class PreValueHelper     {         public List<SelectListItem> GetPreValuesFromDataTypeId(int dataTypeId)         {             List<SelectListItem> preValueSelectorList = new List<SelectListItem>();
            XPathNodeIterator iterator = umbraco.library.GetPreValues(dataTypeId);             iterator.MoveNext();             XPathNodeIterator preValues = iterator.Current.SelectChildren("preValue", "");
            while (preValues.MoveNext())             {                 string preValueIdAsString = preValues.Current.GetAttribute("id", "");                 int preValueId = 0;                 int.TryParse(preValueIdAsString, out preValueId);                 string preValue = preValues.Current.Value;                 preValueSelectorList.Add(new SelectListItem { Value = preValue, Text = preValue }); //you could use the preValueId for the value here if you want the value to be a number             }
            return preValueSelectorList;         }     } }

3. Include some extra methods for retrieving your data type id from app settings.

You could save the id of the data type in your web.config app settings. These methods will help you with that

using System;
using System.Collections.Generic;
using System.Xml.XPath;
using System.Web.Mvc;
using System.Web.Configuration;
namespace CodeShare.Library.Helpers {     public class PreValueHelper     {         private const string APP_SETTING_ERROR_MESSAGE = "Invalid or missing appSetting, ";
        public List<SelectListItem> GetPreValuesFromDataTypeId(int dataTypeId)         {             List<SelectListItem> preValueSelectorList = new List<SelectListItem>();
            XPathNodeIterator iterator = umbraco.library.GetPreValues(dataTypeId);             iterator.MoveNext();             XPathNodeIterator preValues = iterator.Current.SelectChildren("preValue", "");
            while (preValues.MoveNext())             {                 string preValueIdAsString = preValues.Current.GetAttribute("id", "");                 int preValueId = 0;                 int.TryParse(preValueIdAsString, out preValueId);                 string preValue = preValues.Current.Value;                 preValueSelectorList.Add(new SelectListItem { Value = preValue, Text = preValue });             }
            return preValueSelectorList;         }         public List<SelectListItem> GetPreValuesFromAppSettingName(string appSettingName)         {             int dataTypeId = GetIntFromAppSetting(appSettingName);             List<SelectListItem> preValues = GetPreValuesFromDataTypeId(dataTypeId);             return preValues;         }
        private int GetIntFromAppSetting(string appSettingName)         {             int intValue = 0;             string setting = GetStringFromAppSetting(appSettingName);             if (!int.TryParse(setting, out intValue))             {                 throw new Exception(APP_SETTING_ERROR_MESSAGE + appSettingName);             }             return intValue;         }
        private string GetStringFromAppSetting(string appSettingName)         {             string setting = WebConfigurationManager.AppSettings[appSettingName] as string;             if (String.IsNullOrEmpty(setting))             {                 throw new Exception(APP_SETTING_ERROR_MESSAGE + appSettingName);             }             return setting;         }
    } }

4. Add a property in your model, using the type List<SelectListItem>

In this example, my model has a list of titles.

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace CodeShare.Library.Models
{
    public class ContactModel
    {

        [Display(Name = "Title:")]
        public string Title { get; set; }

        public List<SelectListItem> Titles { get; set; }
    }
}

5. Use the helper in the controller to load the values from the data type.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Mvc;
using CodeShare.Library.Models;

namespace CodeShare.Web.Controllers {     public class ContactController : SurfaceController     {
        private PreValueHelper preValueHelper => new PreValueHelper();
        private string GetViewPath(string name)         {             return $"~/Views/Partials/Apply/{name}.cshtml";         }
        [HttpGet]         public ActionResult RenderContactForm()         {             ContactModel model = new ContactModel();             SetModelData(model);             return PartialView(GetViewPath("_ApplicantDetails"), model);         }
        [HttpPost]         public ActionResult RenderContactForm(ContactModel model)         {             SetModelData(model);             return PartialView(GetViewPath("_ContactForm"), model);         }
        [HttpPost]         public ActionResult SubmitContactForm(ContactModel model)         {             if(ModelState.IsValid)             {                 //Do something                 return RedirectToCurrentUmbracoPage();             }             return CurrentUmbracoPage();         }
        private void SetModelData(ContactModel model)         {             model.Titles = preValueHelper.GetPreValuesFromAppSettingName("TitlesDataTypeId");         }     } }

6. Render the dropdown list in your razor partial view in the form

@using CodeShare.Library.Models
@model ContactForm
@using (Html.BeginUmbracoForm("SubmitContactForm", "Apply")) {     @Html.AntiForgeryToken()
    @Html.LabelFor(m => m.Title)     @Html.DropDownListFor(m => m.Title, Model.Titles, "Please Select...")     @Html.ValidationMessageFor(m => m.Title)
    <button>Submit</button> }

That's it, all done

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

Buy me a coffee

About the author

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Related Posts

How to animate tree icons in Umbraco v8

This post shows you how you can change the colour and animate tree icons in Umbraco based on a prope…

Read Post

How to solve the error assets file project.assets.json not found in Visual Studio

This post tells you how to solve the error assets file project.assets.json not found in Visual Studi…

Read Post

Code to help you debug an umbraco issue on a remote site

This post gives you some razor code to help you see the values of the IPublishedContent item's prope…

Read Post

How to fix the 403 error on preview in Umbraco after upgrading

This post shows you how to fix the 403 error on preview after you have upgraded it.

Read Post