How can I make Html.DropDownList encode its values?

Question

In my viewData I have an IList mls. I want to use this to show in a dropdown. Like so:

<%= Html.DropDownList("ml3Code", 
        new SelectList(Model.Mls, "Code", "Description", Model.Ml3.Code ?? ""),
            Model.T9n.TranslateById("Labels.All"),
            new { @class = "searchInput" })%>

This works fine, until there's a myObject.Code == VOC<420 g/l. I would have expected that an HTML helper would encode its values, but it doesn't. How should I approach this problem? The only thing I can come up with is first making a dupe list of the objects with encoded values and then feeding it to the selectlist. This would be really bothersome.

P.S. I hope Phill H. and his team will have a long and thorough look at the encoding for asp.net-mvc 2.0...

Answer 1

Well, you can roll your own Html helper, but if you're like me you won't want to do that.

To me, I see two options here:

1. Write your select element in plain view without the helper. I've never felt the helpers provide you much save for highlighting an element when an error occurs.

2. Patch the select box on the client when the page loads, as in:

function encodeHtml(str) { var encodedHtml = escape(str); encodedHtml = encodedHtml.replace(/\//g,"%2F"); encodedHtml = encodedHtml.replace(/\?/g,"%3F"); encodedHtml = encodedHtml.replace(/=/g,"%3D"); encodedHtml = encodedHtml.replace(/&/g,"%26"); encodedHtml = encodedHtml.replace(/@/g,"%40"); return encodedHtml; }

window.onload = function()
{
  var ml3Code = document.getElementById("ml3Code");

  for(var i = 0; i < ml3Code.options.length; ++i)
  {
  ml3Code.options[i].value = encodeHtml(ml3Code.options[i].value);
  }
};

It's a hack, I know. I strongly prefer the first choice.

Answer 2

I'm puzzled. The question "Do ASP.NET MVC helper methods like Html.DropDownList() encode the output HTML?" was asked on SO before, and the answer was "Yes" - and the source-code from the MVC framework was cited to back this assertion up.

Answer 3

This is encoded. But dont check with firebug - It shows values decoded.

Check in ViewSource of the Browser and things are encoded.

Controller

    public List<CategoryInfo> GetCategoryList()
    {
        List<CategoryInfo> categories = new List<CategoryInfo>();
        categories.Add(new CategoryInfo { Name = "Food<äü", Key = "VOC<420 g/l", ID = 2, Uid = new Guid("C0FD4706-4D06-4A0F-BC69-1FD0FA743B07") });

    }


    public ActionResult Category(ProductViewModel model )
    {

        IEnumerable<SelectListItem> categoryList  =
                                   from category in GetCategoryList()
                                   select new SelectListItem
                                   {
                                       Text = category.Name,
                                       Value = category.Key
                                   };
        model.CategoryList = categoryList;



      return View(model);
    }

View

  <%= Html.DropDownList("Category" , Model.CategoryList) %>

Model

public class ProductViewModel
{
    public IEnumerable<SelectListItem> CategoryList { get; set; }
    public List<CategoryInfo> Categories { get; set; }


}

HTML

      <select id="Category" name="Category"><option value="VOC&lt;420 g/l">Food&lt;&#228;&#252;</option>
</select>