2

私は最初のMVCWebアプリケーションを作成しています（そして、数百を読んだこのフォーラムに私の最初の質問を投稿しています）。私の質問は、このような長いコード（画像の下）を使用せずにフォーム（画像はhttp://www.flickr.com/photos/82728157@N04/8194924118/in/photostream/lightbox/）を作成する方法です。モデルとコントローラーはMVCのおかげで非常に簡潔ですが、ビューでcssとdivを活用する方法を本当に理解しているとは思いません。私のフォーマット要件は次のとおりです：1）同じ行のラベルとフィールド2）各フィールドの下の検証メッセージは、メッセージが表示されてもフィールド間の間隔を広げません3）ラベルの最後の文字と入力の端の間の距離ボックスは一定です。

<div style="width: 315px; height: 300px; margin: auto auto; text-align:center">
@using (Html.BeginForm()) { 
    <div>
        <fieldset>
          <div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.LabelFor(m => m.ClientId)
          </div>
          <div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.TextBoxFor(m => m.ClientId, new { @class = "logon-field" })
         </div>
          <div style="clear:both; height:15px">
                    @Html.ValidationMessageFor(m => m.ClientId,null, new {@class="logon-validation"})
          </div>
          <div style="clear:both"></div>

          <div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.LabelFor(m => m.UserName)
          </div>
          <div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.TextBoxFor(m => m.UserName, new { @class = "logon-field" })
         </div>
          <div style="clear:both; height:15px">
                    @Html.ValidationMessageFor(m => m.UserName,null, new {@class="logon-validation"})
          </div>
          <div style="clear:both"></div>
          <div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.LabelFor(m => m.Password)
          </div>
          <div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.TextBoxFor(m => m.Password, new { @class = "logon-field" })
         </div>
          <div style="clear:both; height:15px">
                    @Html.ValidationMessageFor(m => m.Password,null, new {@class="logon-validation"})
          </div>
          <div style="clear:both"></div>

         <p>
             <input type="submit" style="width: 150px; font-size:large" value="Login"  />
         </p>
4

3 に答える 3

0

HTMLを自動的に生成するアプリケーションを使用しているようです。あなたがそれを自分で書くなら、それはあなたにとってはるかに簡単でしょう。

この場合、私はテーブルを使用することを好みますが、divブロックも間違っていません。とにかく、あなたのコードは不必要に複雑だと思います。

CSSがどのように機能するかを示す単なる例です。style="..."属性をすべて削除し、以下のコードclass="logon-label"をコピー<style>...</style>すると、まったく同じようにレンダリングされます。ここに別の例があります。

<style>
.logon-label {
  float:left; 
  width: 110px; 
  margin: 10px 0px 0px 0px;
}
</style>
...
<div class="logon-label">
  @Html.LabelFor(m => m.ClientId)
</div>
...

CSSの詳細については、ここをクリックしてください。

于 2012-11-18T00:44:35.570 に答える
0

HTMLCSS 定義をインラインでなどと混同するのは、JS簡単な方法ではありません。既存の のいくつかについて読むことをお勧めしますCSS frameworks。私は個人的に好きTwitter Bootstrap CSS Frameworkです。使い方も分かりやすくて使いやすいです。

ブートストラップ リンク: http:///twitter.github.com/bootstrap/。

例 ( を使用した単純な形式Twitter Bootstrap CSS Framework) here .

于 2012-11-18T00:06:37.927 に答える