1

input[type='text']タイプのプロパティを持つフィールドにバインドする方法Subsidiary ユーザーがパーティを登録するとき、フィールドの 1 つはパーティであった子会社です

DropDown、Select、または Radio を配置する代わりに、input[type='text']フィールドを配置し、ユーザーが子会社の名前を入力し始めると、jQueryUI のオートコンプリートにより、子会社のリストがフィルター処理されたことが示されます

コード

これらのタスクを達成するために、私は以下を持っています：

ビューモデル

public class PartyViewModel
{       
    [UIHint("SubsidiarySelect")]
    public Subsidiary Subsidiary { get; set; }
}

HTML

EditorTemplates によって生成された HTMLSubsidiarySelect

<input id="Subsidiary_Title" name="Subsidiary.Title" type="text" value="">
<input id="Subsidiary" name="Subsidiary" type="hidden" value="00000000-0000-0000-0000-000000000000">

#Subsidiary_Title> 選択した子会社を表示するために使用されます
#Subsidiary> 選択したコードを保存します 子会社のガイド

コントローラ

私のコントロールは特別なものではありません。クラスのプロパティがいっぱいにSubsidiaryなるPartyViewModelことを望みます。

[HttpPost]
public ActionResult Nova(PartyViewModel model)
{
    if (ModelState.IsValid)
    {
        //.....
    }
}

質問

を作成してSubsidiaryBinder: IModelBinder、投稿が作成されたときに、Subsidiaryプロパティにデータベースの値を入力することを考えました (ID も同様です)。

  1. これが解決策である場合、クラス PartyViewModel でのみ実行するバインダーを作成する方法
  2. 投稿時にSubsidiaryプロパティ クラスの値をデータベースから自動的に取得するにはどうすればよいですか?PartyViewModel

ここで他の回答を要約すると、箇条書きとリスト項目内のテキストの間のスペースをより細かく制御したい場合は、<li>次のオプションがあります。

(1) 背景画像を使用する:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

利点:

  • 箇条書きには任意の画像を使用できます
  • CSSbackground-positionを使用して、ピクセル、em、または % を使用して、テキストに対して必要な場所に画像を配置できます。

短所:

  • 余分な (小さいながらも) 画像ファイルをページに追加し、ページの重量を増やします
  • ユーザーがブラウザでテキスト サイズを大きくしても、箇条書きは元のサイズのままです。また、テキストサイズが大きくなるにつれて、位置がさらにずれてしまう可能性があります
  • 幅のパーセンテージのみを使用して「レスポンシブ」レイアウトを開発している場合、画面幅の範囲で目的の場所に箇条書きを正確に配置するのは難しい場合があります。

<li>2.タグにパディングを使用する

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

利点:

  • 画像なし = ダウンロードするファイルが 1 つ少ない
  • のパディングを調整することで、箇条書きとテキストの間に水平方向の余白を好きな<li>だけ追加できます。
  • ユーザーがテキストのサイズを大きくした場合、間隔と箇条書きのサイズは比例して拡大縮小する必要があります

短所:

  • ブラウザのデフォルトよりも箇条書きをテキストに近づけることはできません
  • CSS の組み込みの箇条書きタイプの形状とサイズに限定されます
  • 箇条書きはテキストと同じ色でなければなりません
  • 弾丸の垂直位置を制御できない

(3)余分な<span>要素でテキストをラップする

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

利点:

  • 画像なし = ダウンロードするファイルが 1 つ少ない
  • オプション (2) よりも箇条書きの位置をより細かく制御できます。箇条書きをテキストに近づけることができます (ただし、最善を尽くしても、に追加padding-topして垂直位置を変更することはできないようです<span>。他の誰かが持っている可能性があります)。ただし、これに対する回避策...）
  • 箇条書きはテキストとは異なる色にすることができます
  • ユーザーがテキストのサイズを大きくすると、箇条書きはそれに比例して拡大縮小する必要があります (パディングとマージンを px ではなく ems で設定した場合)。

短所:

  • 追加の意味不明な要素が必要です (これにより、SO では実際よりも多くの友人を失う可能性があります ;) しかし、自分のコードをできるだけ無駄のない効率的なものにしたい人にとっては迷惑であり、プレゼンテーションとコンテンツの分離に違反します。その HTML / CSS が提供することになっている)
  • 弾丸のサイズと形状を制御できない

CSS4 に新しいリスト スタイルの機能が追加されることを期待しています。これにより、画像や追加のマークアップに頼らずに、よりスマートな箇条書きを作成できます :)

4

1 に答える 1

0

PartyViewModelglobal.asax で Application_Startの Binder を設定できます。

サンプル

あなたのバインダー

public class PartyViewModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        // ... do something,
        // for example, retieve values from database 
        return base.BindModel(controllerContext, bindingContext);
    }
}

global.asax に登録する

ModelBinders.Binders.Add(typeof(PartyViewModel), new PartyViewModelBinder());
于 2012-02-01T16:44:31.117 に答える