CODEWITHSUNDEEP
asp.netasp.net-mvc
PositiveGuy
PositiveGuy

Reputation: 47743

ASP.NET MVC Helper Extension Method not rendering text as a control

Tried to create this Extension method. Works except that the helper is rendering text, not the control to the View when the page renders:

I included using System.Web.Mvc.Html; at the top of my helper class that contains this extension method so that it would understand helper.RadioButton.

public static string WriteTestControlToScreen(this HtmlHelper helper)
{
    StringBuilder fields = new StringBuilder();
    fields.Append("<fieldset>");
    fields.Append("     <div class='formLabel'><span class='requiredText'>*</span><label>Background Color</label></div>");
    fields.Append("     <div class='formField'>" + helper.RadioButton("rbBackgroundColorWhite", 0, false) + "<label class='fieldInlineLabel' for=''>White</label></div>");
    fields.Append("     <div class='formField'>" + helper.RadioButton("rbBackgroundColorWhite", 0) + "<label class='fieldInlineLabel' for=''>Black</label></div>");
    fields.Append("</fieldset>");

    return fields.ToString();
}

Output in the View then looks like this (notice it's not rendering a radiobutton but treating it as text instead):

*Background Color <%=Html.RadioButton('rbBackgroundColorWhite', 0, false)%>White <%=Html.RadioButton('rbBackgroundColorWhite', 0)%>Black

Upvotes: 1

Views: 1017

Answers (3)

Goofy Coder
Goofy Coder

Reputation: 21

I know this is an older post, but there is an elegant solution that I have used when I want to render Telerik MVC controls within one another. However, it could be used with any HTML helpers. It involves creating an inline helper in the cshtml (for razor) file as shown below:

<!-- This helper avoids nested literals with the sub-panel item -->
@helper RenderPositionalResponsibilities()
{
    Html.Telerik().PanelBar()
        .Name("ContactSubItem")
        .Items(subitem =>
        {
            subitem.Add()
                .Text("Positional Responsibilities")
                .Content(
                    @<text>
                        <div class="container scrollable" style="height: 150px;">
                            @Html.CheckboxFor(model => model.IsTrue)
                        </div>
                     </text>
                )
                .Expanded(true);
        })
        .Render();
}

It can then be called as shown in the Content method below:

@{Html.Telerik().PanelBar()
.Name("pnlUserForm")
.ClientEvents(e => e.OnExpand("pnlUserForm_OnExpand").OnCollapse("pnlUserForm_OnCollapse"))
.Items(i =>
{
    i.Add()
        .Text("User Information")
        .Expanded(true)
        .Content(
            @<text>
                <div>
                    @RenderPositionalResponsibilities()
                </div>
            </text>
         )
}
.Render();
}

This might be a better match for users wanting to create a helper for a very specific purpose. In addition, since you create the helper in the cshtml file (for razor), you get all of the intellisense for the controls.

Upvotes: 1

Robert Harvey
Robert Harvey

Reputation: 180788

The problem with your original code is that you are outputting <%= %> tags at a time when MVC is expecting literal html output. In other words, it's not processing these tags.

Consider putting your HTML in an .ASCX file and doing a RenderPartial.

Upvotes: 1

Robert Harvey
Robert Harvey

Reputation: 180788

I did a little poking around with Reflector, and I noticed that the MVC extension methods for Input fields all use an InputHelper class, which in turn uses a TagBuilder class:

private static string InputHelper(this HtmlHelper htmlHelper, InputType inputType, string name, object value, bool useViewData, bool isChecked, bool setId, bool isExplicitValue, IDictionary<string, object> htmlAttributes)
{
    ModelState state;
    if (string.IsNullOrEmpty(name))
    {
        throw new ArgumentException(MvcResources.Common_NullOrEmpty, "name");
    }
    TagBuilder builder = new TagBuilder("input");
    builder.MergeAttributes<string, object>(htmlAttributes);
    builder.MergeAttribute("type", HtmlHelper.GetInputTypeString(inputType));
    builder.MergeAttribute("name", name, true);
    string str = Convert.ToString(value, CultureInfo.CurrentCulture);
    bool flag = false;
    switch (inputType)
    {
        case InputType.CheckBox:

              //...etc.

What follows are several case statements covering the additional rendering required for the various input types. But you get the point. The folks at MVC are not concatenating strings; they are using the MergeAttribute (and other) methods to do the dirty work for them. My guess is there is some browser compatibility goodness in there as well.

What I am suggesting is that you could use the TagBuilder class to build your HTML, just like the MVC folks do.

Upvotes: 1

Related Questions