asp.net-mvc 嵌套的 TagBuilder -as TagBuilderTree-

Nested TagBuilder -as TagBuilderTree-

提问by Nuri YILMAZ

TagBuilder is a nice implementation for build HTML elements. But -some- HTML elements can have another elements (I called like children). I could not find any class from Mvc classes.

TagBuilder 是构建 HTML 元素的一个很好的实现。但是 -some- HTML 元素可以有另一个元素（我称之为孩子）。我在 Mvc 类中找不到任何类。

Question; Should I implement few classes (TagBuilderTree, and TagBuilderNode) which support nested tags or did I miss something?

题; 我应该实现几个支持嵌套标签的类（TagBuilderTree 和 TagBuilderNode）还是我错过了什么？

回答by SLaks

You can build the child elements in separate TagBuilders and put their generated HTML in the parent TagBuilder.

您可以在单独的 TagBuilder 中构建子元素，并将其生成的 HTML 放在父 TagBuilder 中。

Here's an example: A <select>with some <option>s (example de-fatted for terseness)

这是一个例子：A<select>带有一些<option>s（为了简洁而脱脂的例子）

TagBuilder select = new TagBuilder("select");  

foreach (var language in languages) // never ye mind about languages
{
    TagBuilder option = new TagBuilder("option");
    option.MergeAttribute("value", language.ID.ToString());

    if (language.IsCurrent)
    {
        option.MergeAttribute("selected", "selected");
    }

    option.InnerHtml = language.Description;
    // And now, the money-code:
    select.InnerHtml += option.ToString();
}

回答by MattSlay

OK, I decided to do a little test in my own code base.

好的，我决定在我自己的代码库中做一个小测试。

I compared these two methods to create the same exact final HTML:

我比较了这两种方法来创建完全相同的最终 HTML：

1. Manually generating the html using a StringBuilder
2. Using multiple TagBuilders and nesting the content

1. 使用 StringBuilder 手动生成 html
2. 使用多个 TagBuilders 并嵌套内容

Manually generating the html using a StringBuilder:

使用 StringBuilder 手动生成 html：

    var sb = new StringBuilder();
    sb.AppendLine("<div class='control-group'>");
    sb.AppendFormat(" <label class='control-label' for='{0}_{1}'>{2}</label>", propObj.ModelType, propObj.ModelProperty, propObj.LabelCaption);
    sb.AppendLine("  <div class='controls'>");
    sb.AppendFormat("    <input id='{0}_{1}' name='{0}[{1}]' value='{2}' />", propObj.ModelType, propObj.ModelProperty, propObj.PropertyValue);
    sb.AppendLine("  </div>");
    sb.AppendLine("</div>");

    return new HtmlString(sb.ToString());

Using multiple TagBuilders and merging the content:

使用多个 TagBuilders 并合并内容：

    TagBuilder controlGroup = new TagBuilder("div");
    controlGroup.AddCssClass("control-group");

    TagBuilder label = new TagBuilder("label");
    label.AddCssClass("control-label");
    label.InnerHtml = propObj.LabelCaption;

    TagBuilder controls = new TagBuilder("div"); 

    TagBuilder input = new TagBuilder("input");
    input.Attributes["id"] = propObj.ModelType + "_" + propObj.ModelProperty;
    input.Attributes["name"] = propObj.ModelType + "[" + propObj.ModelProperty + "]";
    input.Attributes["value"] = propObj.PropertyValue;

    controls.InnerHtml += input;

    controlGroup.InnerHtml += label;
    controlGroup.InnerHtml += controls;

    return new HtmlString(controlGroup.ToString());

To me, #1 is easier to read and much more concise, but I can appreciat the structure of #2 also.

对我来说，#1 更容易阅读，更简洁，但我也可以欣赏 #2 的结构。

回答by Salman Hasrat Khan

The problem that I have with TagBuilder to create tags is that it looks very un-maintainable. On the other hand, StringBuilder's AppendFormat not only makes the code maintainable, but also run with good efficiency.

我用 TagBuilder 创建标签的问题是它看起来非常不可维护。另一方面，StringBuilder 的 AppendFormat 不仅使代码可维护，而且运行效率高。

I've made a slight improvement to MattSlay 's #1 method. I used only one call to StringBuilder's AppendFormat method and used the C# string literal to define the format. As a result the format ends up looking exactly like the desired result and runs with efficiency.

我对 MattSlay 的 #1 方法做了一些改进。我只调用了一次 StringBuilder 的 AppendFormat 方法，并使用 C# 字符串文字来定义格式。因此，格式最终看起来与所需的结果完全一样，并且运行高效。

var sb = new StringBuilder();
    sb.AppendFormat(
     @"<div class='control-group'>
          <label class='control-label' for='{0}_{1}'>{2}</label>
          <div class='controls'>
             <input id='{0}_{1}' name='{0}[{1}]' value='{3}' />
          </div>
      </div>",
      propObj.ModelType,
      propObj.ModelProperty,
      propObj.LabelCaption,
      propObj.PropertyValue);

    return new HtmlString(sb.ToString());

Hope this helps!

希望这可以帮助！