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 — user3559349
– user3559349, Commented Nov 13, 2015 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
– BrianLegg, Commented Nov 13, 2015 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 and here and here — user3559349
– user3559349, Commented Nov 13, 2015 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
– BrianLegg, Commented Nov 13, 2015 at 21:39

user3559349 · Accepted Answer · 2015-11-13 21:25:53Z

1

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" />

answered Nov 13, 2015 at 21:25

user3559349

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create MVC user control using html helper

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related