c# - 在 MVC 应用程序中显示/隐藏文本

Question

我有一个使用引导响应 CSS 的 MVC 应用程序。在应用程序中，我有一个显示零到多行的 View ，如下所示:

@model List<SearchItem>

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

在SearchItem中呈现了很多字段。 (我可能应该为每个字段建立一个 View ，但这是另一个问题)。就像这样:

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

有时这些“描述”字段非常长，然后我选择只显示前 20 个字符。但我希望用户可以选择查看整个字段(如果她愿意)。我有两个字段:descLong 和 descShort，现在我只显示 descShort(缩短的字段)。但是通过单击鼠标，我想隐藏 descShort 字段并显示 descLong 字段。

所以我打算做这样的事情:

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

但是我在使用这种方法时遇到了一些问题，因为理论上我可以拥有数十万个应该可隐藏/可显示的字段，而不仅仅是示例中的一个(“p”)。

那么，我最好的方法是什么？

我应该将每个“描述”放在自己的 View 中并将 descShort 和 descLong 传递给该 View 吗？如果是这样，我如何将两个字符串传递到该 View ，然后我可以将 jQuery 示例放入该 View 中并调用显示/隐藏字段“

”，即使我可能有数千个名为的字段，它也会工作“

”一旦整个页面呈现？

或者有更好的方法吗？

Answer 1

我选择“有更好的方法”选项。我的建议是使用 CSS 来限制显示的文本，并使用 CSS 类的简单切换在完整版本和简短版本之间切换:

这是我的例子，你可以see it working on JS Fiddle :

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'); 
});

您可以扩展此示例以显示一个可见的指示器，表明用户可以采取操作来查看更多内容 - 或者您可以在悬停等上执行此操作 - 这只是概念。