Question

我在Asp.net MVC Web应用程序中有以下视图： -

p class="b"> <i class="icon-th"></i>Network Info :</p>

<div>
<span class="f">IP Address</span> 

    @Html.TextBoxFor(model => model.NetworkInfo.IPADDRESS)
@Html.ValidationMessageFor(model => model.NetworkInfo.IPADDRESS)                                              
 | 
   <input type="CheckBox" name="IsIPUnique" value="true" @(Html.Raw(Model.IsIPUnique ? "checked=\"checked\"" : ""))/> IP Unique. 

</div>

<div >
<span class="f">MAC Address</span> 

  @Html.TextBoxFor(model => model.NetworkInfo.MACADDRESS)
@Html.ValidationMessageFor(model => model.NetworkInfo.MACADDRESS) | 
    <input type="CheckBox" name="IsMACUnique" value="true" @(Html.Raw(Model.IsMACUnique ? "checked=\"checked\"" : ""))/> MAC Unique. 

</div>


<div >
  <span class="f">  ILOIP</span>

    @Html.EditorFor(model =>model.Server.ILOIP)
    @Html.ValidationMessageFor(model =>model.Server.ILOIP)
</div>


</p>
<p = class="b"><i class="icon-th"></i>Server Status :</p>

<div>
<span class="f">Server Status </span>

    @Html.DropDownListFor(model =>model.Server.StatusID, ((IEnumerable<TMS.Models.TechnologyStatu>)ViewBag.TechStatus).Select(option => new SelectListItem {
        Text = (option == null ? "None" : option.Name), 
        Value = option.TechnologyStatusID.ToString(),
        Selected = (Model != null) && (Model.Server != null) && (option.TechnologyStatusID == Model.Server.StatusID)
    }), "Choose...")
    @Html.ValidationMessageFor(model =>model.Server.StatusID)
</div>

<div>
    <span class="f">Server Back Up Status</span>

   @Html.DropDownListFor(model =>model.Server.BackUpStatusID, ((IEnumerable<TMS.Models.TechnologyBackUpStatu>)ViewBag.TechBackUpStatus).Select(option => new SelectListItem {
        Text = (option == null ? "None" : option.Name), 
        Value = option.TechnologyBackUpStatusID.ToString(),
        Selected = (Model != null) && (Model.Server != null) && (option.TechnologyBackUpStatusID == Model.Server.BackUpStatusID)
    }), "Choose...")
    @Html.ValidationMessageFor(model =>model.Server.BackUpStatusID)
</div>

我尝试将每个节标题放在单独的<p>中，但输出不是非常易于使用。所以我可以按照哪种方法来分隔每个段落，这样用户可以更好地理解每个段落字段。如在当前输出中所有字段将在彼此之下而每个部分之间没有空格？

Answer 1

这不是关于MVC或Razor的问题，而是关于HTML和CSS样式的问题。为此你有很多选择：

您目前在div元素中包含所有字段。您可以根据自己的喜好设置div元素的样式。如果你想添加垂直填充，你可以使用像padding-top: 20px;这样的东西，或者看起来像你希望它看起来的任何东西。
您说您尝试了p元素。这不是真正的“段落”数据，但适用与div元素相同的概念。你可以根据自己的喜好设计它。
您可以将字段包装在fieldset元素中。请记住，这需要legend元素作为其第一个子元素，该元素可以包含该字段分组的标题。（这可能会替换您当前使用的span元素。）MVC项目的默认样式很可能已经考虑了CSS中的fieldset。

您也可以考虑在设置样式时使用@Html.LabelFor()，以提供字段级标签。但是很难说你是否需要它来达到你想要达到的效果。通常情况下，默认表单的fieldset会带有legend，然后会有一系列label和input s。

选项可以继续下去。关键是你现在正在使用HTML和CSS，因此你需要显示客户端代码，或者可能是屏幕截图或你正在尝试的实际例子，你期望它看起来如何，以及它如何不按预期工作。也就是说，当你尝试修饰风格之后。

分离表单部分的最佳方法

1 个答案: