Question

我一直在努力改变以下内容以满足我的需求。这是我用简单输入的表格。现在代码的方式只是垂直显示标签，字段和验证消息，但我希望将其设置为水平（使用<table>）。

目前我有这段代码：

var wrapper = new TagBuilder("div");
wrapper.AddCssClass("field-wrapper");

var table = new TagBuilder("table");//This is my test to insert a table

var label = new TagBuilder("div");
label.AddCssClass("field-label");
if (metadata.IsRequired && !metadata.IsReadOnly)
    {
        if (metadata.ModelType != typeof (bool))
        {
            label.InnerHtml += "* ";
            wrapper.AddCssClass("required");
        }
    }

label.InnerHtml += html.LabelFor(expression);
wrapper.InnerHtml += label;

var input = new TagBuilder("div");
input.AddCssClass("field-input");
input.InnerHtml += html.EditorFor(expression);

if (!string.IsNullOrEmpty(metadata.Description))
    {
        input.InnerHtml += html.TooltipFor(expression);//declared elsewhere to show a tooltip
    }

input.InnerHtml += html.ValidationMessageFor(expression);

wrapper.InnerHtml += input;
wrapper.InnerHtml += table;//This is my test to insert a table
return MvcHtmlString.Create(wrapper + "\r\n");

我尝试插入<table>，但这是带有该代码的HTML结构：

<div class="field-wrapper">
    <div class="field-label"> 
        <label for="Name">Name</label>
    </div>
    <div class="field-input">
        * <input class="text-box single-line input-validation-error" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="">
        <!--tooltip would ordinarily show up here-->
        <span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true">
            <span for="Name" generated="true" class="">The Name field is required.</span>
        </span>
    </div>
    <table></table><!--This is my table-->
</div>

这是验证错误后的样子：

enter image description here

我想要的是这种结构：

<div class="field-wrapper">
    <table border="0">
        <tbody>
            <tr>
                <td width="40%">
                    <div class="field-label">
                        <label class="mylabelstyle" for="FirstName" title="Enter first name.">First Name:</label>
                    </div>
                 </td>
                 <td width="60%">
                     <div class="field-input">
                         <input data-val="true" data-val-required="First Name required." id="FirstName" name="FirstName" type="text" value="" />
                         <!--tooltip here as necessary-->
                         <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
                     </div>
                 </td>
              </tr>
          </tbody>
    </table>
</div>

在视觉上，这就是我所追求的：

enter image description here

有几点需要注意：

在某些条件下显示“*”（必填代码）和工具提示。
造型不会成为问题 - 我在这里专注于结构。
我为输入使用了不同的帮助器，因此每个内部的代码（以及名称，即Name v.FirstName）是不同的而不是问题。
<table>位于左侧浮动的<div>内。我在右边有一些静态内容，这不是问题（它出现在第二张图片的验证中），所以这也不重要。

我对TagBuilder并不擅长，而且一切都弄得一团糟。任何帮助是极大的赞赏。谢谢！

Answer 1

你去了：

public static IHtmlString MyEditorFor<TModel, TProperty>(
    this HtmlHelper<TModel> html, 
    Expression<Func<TModel, TProperty>> expression
)
{
    var metadata = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, html.ViewData);

    var wrapper = new TagBuilder("div");
    wrapper.AddCssClass("field-wrapper");
    var table = new TagBuilder("table");
    table.Attributes["border"] = "0";
    var tbody = new TagBuilder("tbody");
    var tr = new TagBuilder("tr");
    var td1 = new TagBuilder("td");
    td1.Attributes["width"] = "40%";
    var label = new TagBuilder("div");
    label.AddCssClass("field-label");
    if (metadata.IsRequired && !metadata.IsReadOnly)
    {
        if (metadata.ModelType != typeof(bool))
        {
            label.InnerHtml += "* ";
            wrapper.AddCssClass("required");
        }
    }
    label.InnerHtml += html.LabelFor(expression);
    td1.InnerHtml = label.ToString();
    var td2 = new TagBuilder("td");
    td2.Attributes["width"] = "60%";
    var input = new TagBuilder("div");
    input.AddCssClass("field-input");
    input.InnerHtml += html.EditorFor(expression);

    if (!string.IsNullOrEmpty(metadata.Description))
    {
        input.InnerHtml += html.TooltipFor(expression);
    }
    input.InnerHtml += html.ValidationMessageFor(expression);
    td2.InnerHtml = input.ToString();
    tr.InnerHtml = td1.ToString() + td2.ToString();
    tbody.InnerHtml = tr.ToString();
    table.InnerHtml = tbody.ToString();
    wrapper.InnerHtml = table.ToString();
    return new HtmlString(wrapper + Environment.NewLine);
}

自定义验证错误消息位置

1 个答案: