Пользовательская ошибка error message location

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> 

Это то, что он выглядит как после validation- ошибка:

То, что я за это структура:

<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); 
}