html - 拉伸(stretch) TextAreaFor 并处理未确定长度的列表

Question

我正在开发我的第一个 ASP.NET MVC 3 应用程序，我有一个使用 table 的页面显示两列输入元素。它看起来像这样:

<table>
  <tr>
    <th> Description </th>
    <th> List </th>
  </tr>
  <tr>
    <td> @Html.TextAreaFor(model => model.Description, new { @class = "vert-stretch-edit" })   
   </td>
    <td rowspan="9"> @Html.EditorFor(model => model.Ingredients) </td>
  </tr>
  <tr>
    <th> Name</th>
  </tr>
  <tr>
    <td> @Html.EditorFor(model => model.Name) </td>
  </tr>
</table>

行数比我在这里显示的要多，但这里的想法是成分跨越第二列中的 9 行，第一列有一堆由标题和条目元素组成的行。

除了我无法生成 TextAreaFor 之外，这已经足够好了元素占据了 <td> 的整个高度包含它。由于成分列表中显示的元素数量，表格将行稍微拉长了一点，这并不理想，但在我看来也不可怕。

我尝试设置 vert-stretch-edit像这样:

.vert-stretch-edit
{
   width: 100%;
   height: 100%;
}

但这并不能垂直解决任何问题。我也试过这个:

.vert-stretch-edit
{
   width: 100%;
   height: 200px;
}

但这不太理想，因为我真的不知道 200 像素是正确的高度，特别是因为成分列表的长度有些变化。这一切都让人觉得很尴尬和错误。最终我想要完成的是有一个两列显示，其中我的复选框成分列表只要它需要，我的数据输入元素占据他们需要的任何高度与冰淇淋所占空间的平衡说明 TextAreaFor元素。我有点喜欢 <table>想法，因为它(通常)以一种很好的方式布置事物。我发现自己在挣扎 <div>让它们模仿表格，所以我避免使用这种类型的布局。我怀疑这可能只是我使用 <div> 的有限经验就是这样。你会如何改进这个？我当然愿意使用 <div> s 而不是 <table>如果那是实现此目标的唯一方法，尽管尝试让他们做我想做的事让我感到沮丧。

Answer 1

我已经开始使用 autoresize.jquery.js jQuery 插件，它非常适合我的需要。 你可以在这里得到它 (见下文)

本质上，您通过执行以下操作来引用要应用 autoResize 的 TextArea:

$(myselector).autoResize();

所以，例如，我可以在我的 View 中有一个 TextArea，如下所示:

@Html.TextAreaFor(model => model.Notes, new { @id='mynotes' })

然后这样做:

<script javascript>
$(document).ready(function() {
  $('#mynotes').autoResize();
});

和 TextArea 将在用户键入时自动展开。我还没有详尽地测试它，但它似乎符合我页面的要求。

---

显然，James Padolsey 的插件链接现已失效。您可能想尝试 this plug-in作为备选。显然是根据原作改编的。