Расположение сообщения об ошибке пользовательской проверки

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>

Вот как это выглядит после ошибки валидации:

Для чего я иду, это структура:

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

Визуально, это то, что я ищу:

Несколько замечаний:

1. "*" (требуемый код) и всплывающая подсказка отображаются при определенных условиях.
2. Стилизация не будет проблемой - я сосредоточен на структуре здесь.
3. Я использовал разные помощники для входных данных, поэтому код внутри каждого (и имя, т. Е. Имя v. FirstName) отличается и не проблема.
4. * * * * * * * * * * * * * * * * * * * * * * <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);
}