1

ブートストラップ レスポンシブ CSS を使用する MVC アプリがあります。アプリには、次のようにゼロから多数の行を表示するビューがあります。

@model List<SearchItem>

<section>
    @foreach (SeachItem searchitem in @Model)
    {
        @Html.Partial("Searchitem", searchitem)
    }
</section>

SearchItem には多くのフィールドが表示されます。(おそらくすべてのフィールドのビューを作成する必要がありますが、それは別の問題です)。そのようです：

foreach (string descShort in descriptions)
{
     <div class="row-fluid">
          <div class="span2">@header</div>
          <div class="span10">@descShort</div>
     </div>
}

これらの「説明」フィールドが非常に長い場合があるため、最初の 20 文字のみを表示することにしました。ただし、必要に応じてフィールド全体を表示するオプションをユーザーに提供したいと考えています。descLong と descShort の 2 つのフィールドがあり、現在は descShort (短縮されたフィールド) のみを表示しています。しかし、マウスをクリックすると、descShort フィールドが非表示になり、代わりに descLong が表示されます。

そこで、次のようなことを計画しています。

http://www.mkyong.com/jquery/jquery-show-and-hide-example/

しかし、理論的には、例のように1つ（「p」）だけでなく、非表示/表示可能にする必要がある数十万のフィールドを持つことができるため、そのアプローチにはいくつかの問題があります。

それで、これに対する私の最善のアプローチは何ですか？

すべての「説明」を独自のビューに入れ、descShort と descLong をそのビューに渡す必要がありますか? その場合、2 つの文字列をそのビューに渡すにはどうすればよいですか。次に、jQuery の例をそのビューに配置して、表示/非表示フィールド「<p>」を呼び出すと、何千ものフィールドが呼び出されたとしても機能します。ページ全体がレンダリングされたら「<p>」？

または、それを行うより良い方法はありますか？

4

1 に答える 1

3

私は「もっと良い方法はありますか」という選択肢を選んでいます。私の提案は、CSSを使用して表示されるテキストを制限し、CSSクラスの単純な切り替えを使用してフルバージョンとショートバージョンを切り替えることです。

これが私の例です、あなたはそれがJSフィドルで働いているのを見ることができます：

HTML

<div class="description">
    Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. Imagine some really long description here. It is really long. 
</div>

CSS

.description {
    height: 2.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.full {
    height: auto;
}

jQuery

$('.description').click( function () {
   $(this).toggleClass('full'); 
});

この例を拡張して、ユーザーがアクションを実行して詳細を表示できることを示すインジケーターを表示できます。または、ホバーなどで実行できます。これは単なる概念です。

于 2013-03-22T08:53:41.183 に答える