Question

I am using ASP.NET MVC 3 (Release Candidate 2) with razor templates.

I am trying to add a jquery datepicker in a razor template. The code generated from the extension is getting written to the page as html entities, so it just shows up on the page as as text and not a datepicker.

Here is the datepicker extension.

namespace System.Web.Mvc.Html
{
    public static class DatePickerExtension
    {
        public static string DatePicker(this HtmlHelper htmlHelper, string name, string value)
        {

            return "<script type=\"text/javascript\">" +
                 "$(function() {" +
                 "$(\"#" + name + "\").datepicker();" +
                 "});" +
                 "</script>" +
                 "<input type=\"text\" size=\"10\" value=\"" + value + "\" id=\"" + name + "\" name=\"" + name + "\"/>";
        }
    }
}

And in the template file:

<div class="editor-field">
        @Html.DatePicker("Date", Model.InterviewDate)
</div>

When the page renders, the datepicker source is written to the page as:

<script type="text/javascript">$(function() {$("#Date").datepicker();});</script><input type="text" size="10" value="" id="Date" name="Date"/>

Answer 1

I would recommend returning an IHtmlString otherwise you would always have to remember to use Html.Raw or HtmlString in your views and you shouldn’t have to do that when it’s possible to return raw html from your method

public static IHtmlString DatePicker(this HtmlHelper htmlHelper, string name, string value) {

    return new HtmlString("<script type=\"text/javascript\">" +
         "$(function() {" +
         "$(\"#" + name + "\").datepicker();" +
         "});" +
         "</script>" +
         "<input type=\"text\" size=\"10\" value=\"" + value + "\" id=\"" + name + "\" name=\"" + name + "\"/>");
}