【问题标题】:What is the reasoning for the structure of elements and classes in mvc3 generated viewsmvc3生成视图中元素和类的结构是什么原因
【发布时间】:2011-12-02 13:00:01
【问题描述】:

所以我们正在讨论 MVC3 中默认生成视图的优点。它像这样包装模型字段;

    <div class="editor-label">
        @Html.LabelFor(model => model.SenderMessage)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.SenderMessage)
        @Html.ValidationMessageFor(model => model.SenderMessage)
    </div>

一位同事说编辑标签 div 不应该在那里。标签元素具有足够的语义含义。他希望看到它是这样的:

  <p>
        @Html.LabelFor(model => model.SenderMessage)
        @Html.EditorFor(model => model.SenderMessage)
        @Html.ValidationMessageFor(model => model.SenderMessage)
  </p>

如果由我来决定,我可能会倾向于这样的事情。 (是的,我知道我可以用 t4 自定义它。)

<div class="model-field">
   <div class="editor-label">
       @Html.LabelFor(model => model.SenderMessage)
   </div>
   <div class="editor-field">
       @Html.EditorFor(model => model.SenderMessage)
       @Html.ValidationMessageFor(model => model.SenderMessage)
   </div>  
</div>  

为什么第一种方式比后两种方式好?

【问题讨论】:

    标签: html css semantics


    【解决方案1】:

    MVC3 等框架试图成为所有人的一切。因此,他们生成的代码往往最终会有些过度设计。

    这几乎适用于所有框架、CMS 和网站设计器应用程序;如果您查看为网络上绝大多数网站生成的代码,您会看到过度结构化的 HTML,因为它是由代码生成器创建的,而不是手写的。

    在许多情况下,可以更改模板或引擎以生成更清晰的代码,但生成器默认创建它们所做的代码通常有充分的理由。

    例如,考虑一个对标签和字段执行一些巧妙的 jQuery 效果的网站。使用包装 &lt;div&gt; 元素可能更容易实现某些效果。

    框架设计者采取了谨慎的方法并对其进行了过度结构化,因为这为他们的最终用户(即开发人员)提供了最大的灵活性,可以以不同的方式使用它。从纯粹主义者的角度来看,更简洁的 HTML 可能会更好,但附加标记的影响很小,而且增加的灵活性是明显的胜利。

    【讨论】:

      【解决方案2】:

      我喜欢

      <fieldset>
          <div class="model-field">
              <label />
              <input />
          </div>
          <div class="model-field">
              <label />
              <input />
          </div>
          <div class="model-field">
              <label />
              <input />
          </div>
      </fieldset>
      

      仅仅因为 DIV 似乎是最符合语义的方法。

      虽然有些人认为表单项应该在&lt;ul&gt;&lt;dl&gt; 列表中呈现,但我不确定我是否同意。尤其是在 CSS 被禁用的情况下。

      我也不太热衷于使用&lt;p&gt;

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-10-30
        • 2021-03-13
        • 2019-02-13
        • 2015-01-07
        • 1970-01-01
        • 2021-05-08
        相关资源
        最近更新 更多