How to create MVC user control using html helper

Question

I have a control that will be used over and over so I am trying to create a user control for it. I've been following along in the following article but something seems to be missing from his explanation. I've written the static class like this:

    public static class SingleSelectionControl
{
    public static MvcHtmlString SingleSelection(this HtmlHelper htmlHelper, string cssClass, string modelField) //case-field & caseName
    {
        StringBuilder builder = new StringBuilder();

        builder.Append("<div class='wizard-field'>");
        builder.Append("<textarea id='" + cssClass + "' class='wizard-textbox-field' ng-model='model." + modelField + "Value'></textarea>");
        builder.Append("<textarea id='" + cssClass + "-page' class='wizard-hidden' ng-model='model." + modelField + "Page'></textarea>");
        builder.Append("<ul class='wizard-horizontal-button-list'>");
        builder.Append("<li>");
        builder.Append("<input type='button' class='add button' onclick='getHighlightedText('#" + cssClass + "')' />");
        builder.Append("<input type='button' class='search button' onclick='setPage($('#" + cssClass + "-page').val()); setSearchText('#" + cssClass + "')' />");
        builder.Append("</li>");
        builder.Append("</ul>");
        builder.Append("</div>");

        return MvcHtmlString.Create(builder.ToString());
    }
}

And I am attempting to call SingleSelection from my view using the following code:

<div class="formA" id="_FormA">
    <div id="@Model.Order" style="display: none;">@Model.TemplateName</div>

    @using (Html.BeginForm())
    {
        <fieldset>
            <legend>Initial Filing</legend>

            <div class="wizard-label">
                <span>Case Name:</span>
            </div>
            @Html.SingleSelection("case-field", "caseName");

However, as I expected, @Html.SingleSelection is not recognized.

This post is similar but also doesn't explain how the view and the static method are connected.

How do I "register" this method so that I can call it from my views via @Html.? Thanks!

Have you include a `@using` statement in the view? Or better, add the namespace to the `web.config` file — , Nov 13 '15 at 21:20
A using statement to the namespace was the missing piece I didn't know about. I added it and besides a syntax error it worked perfectly. Please add your comment as an answer. — BrianLegg, Nov 13 '15 at 21:22
Answer added, but you your not really doing this correctly and you will never get correct 2-way model binding by generating the html that way. Make use of the built-in HtmlHelper methods to generae form elements. A few examples [here](http://stackoverflow.com/questions/26162218/editortemplate-for-dropdownlist/26417466#26417466) and [here](http://stackoverflow.com/questions/29710876/helper-for-a-labelfor-which-wraps-an-html-tag/29711163#29711163) and [here](http://stackoverflow.com/questions/26955073/converting-asp-net-mvc-razor-helper-function-into-a-method-of-a-helper-class/26955246#26955246) — , Nov 13 '15 at 21:32
I'm using angularjs for my model binding and it's happy with the code like this. I'll take a look at your posts though, as I'm interested to see how it's supposed to be done. Thanks — BrianLegg, Nov 13 '15 at 21:39

score 1 · Accepted Answer · answered Nov 13 '15 at 21:25

Either include a @using yourNamespace in the view, or better add it to the web.config file so its available in all views

<pages>
    <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        ....
        <add namespace="yourAssembly" />

How to create MVC user control using html helper

1 Answers1