0

我在我的 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>中，但输出不是很友好。所以我可以采用哪种方法来分隔每个段落，以便用户可以更好地理解每个部分字段。在当前输出中，所有字段都将位于彼此之下，而每个部分之间没有空格？

4

1 回答 1

2

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

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

您可能还需要考虑使用@Html.LabelFor()while 设置样式来提供字段级标签。但是很难说你是否需要它来达到你想要达到的效果。通常，默认表单将具有 afieldset和 a legend，然后是一系列labels 和inputs。

选项可以继续下去。关键是此时您正在使用 HTML 和 CSS，因此您需要显示客户端代码，并且可能是屏幕截图或您正在尝试的实际示例，以及您期望它的外观，以及它如何不按预期工作。也就是说，当然，在您尝试修改样式之后。

于 2013-08-14T13:27:43.133 回答