Формат ввода форматирования asp.net HTML

Question

У меня есть небольшое исправление, которое я пытаюсь сделать. Я использую хороший шаблон HTML5/CSS и разработал веб-приложение ASP.NET. Я пытаюсь объединить код с HTML/CSS. Таким образом, в ASP.NET Я использую это для формы ввода

@using (Html.BeginForm()) 
         { 
          @Html.ValidationSummary() 
          <div class="form-group"> 
          <p>Vendor Name: @Html.TextBoxFor(m=> Model.VendorName)</p> 
          <p>Vendor Title: @Html.TextBoxFor(m=> Model.VendorTitle)</p> 
          <p>Description: @Html.TextBoxFor(m=> Model.VendorDescription)</p> 
          <p>Start Date: @Html.EditorFor(m=> Model.StartDate)</p> 

          <input type="submit" name="Add Vendor" /> 
         } 

Однако, прежде чем я начал делать вход в ASP.NET я использую это для моей формы дизайна

<div class="form-group"> 
    <label for="focusedinput" class="col-sm-3 control-label">Vendor Name: </label> 
    <div class="col-sm-6"> 
     <input type="text" class="form-control" id="vcvendorname" placeholder="Default Input" /> 
    </div> 

Так что Я пытаюсь сделать, это взять @ Html.TextBoxFor (m => Model.VendorName) и объединить его с моим исходным кодом HTML

На изображении ниже показан хорошо отформатированный HTML и под ним основной TextBoxFor.

Все больши оцененной

Answer 1

Ну, ваш HTML не соответствует ранее разработанный HTML вообще. У вас есть это:

<div> 
    <p>some text <input></p> 
</div> 

В то время как в оригинале так:

<div> 
    <label>some text</label> 
    <div> 
     <input> 
    </div> 
</div> 

Так что я ожидаю, что любой CSS, который предназначен для одного не будет хорошо работать на другом. Вероятно, вам нужно сопоставить структуру. Что-то вроде этого:

<div class="form-group"> 
    @Html.LabelFor(m=> Model.VendorName) 
    <div class="col-sm-6"> 
     @Html.TextBoxFor(m=> Model.VendorName) 
    </div> 

... и так далее.

Даже после этого вам все равно необходимо добавить атрибуты css class в label и сформировать input. Я думаю это что-то вроде этого:

@Html.LabelFor(m=> Model.VendorName, new { @class = "col-sm-3 control-label" }) 

Для input есть несколько вещей, которые вы должны указать, чтобы соответствовать оригиналу:

@Html.TextBoxFor(m=> Model.VendorName, new { @class = "form-control", id = "vcvendorname", placeholder = "Default Input" }) 

Дело в том, чтобы применить уже существующий стиль для вашей разметки, ваша разметка должна соответствовать тому, что было написано.

Answer 2

Чтобы скопировать HTML-код у вас есть, вы хотели бы использовать @Html.LabelFor(x => x.Field) помимо указания класса и заполнителей.

Например

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary() 
    <div class="form-group"> 
     @Html.LabelFor(x => x.FocussedInput, new { @class = "col-sm-3 control-label" }) 
     <div class="col-sm-6"> 
      @Html.TextBoxFor(x => x.FocussedInput, new { @class = "form-control", placeholder = "Default Input" }) 
     </div> 
}