asp.net mvc中的Html.TextAreaFor

Posted 2023-05-07

【中文标题】asp.net mvc中的Html.TextAreaFor

【英文标题】：Html.TextAreaFor in asp.net mvc

【发布时间】：2011-08-19 02:06:20

【问题描述】：

我有一个 asp.net mvc 视图，允许用户在文本区域中输入一些描述。

我面临两个问题。

当我扩展文本区域时，它正在扩展而不移动其他 html 元素，或者我无法创建 Html.TextBoxFor () 多行文本框。任何人都可以提出解决方案吗？如果使用 Textarea 如何使其扩展（变大）使其不与其他元素重叠或如何将 Html.TextBoxFor() 用于多行？

这就是我的代码的样子

<% using (Html.BeginForm())
         %>
     <%: Html.ValidationSummary(true)%>

    <fieldset>

        <div class="editor-label1">
            <%: Html.LabelFor(Model => Model.PackageID)%>
        </div>
        <div class ="editor-field1">
             <%: Html.HiddenFor(Model => Model.PackageID)%>
              <%: Html.DisplayFor(Model => Model.PackageID)%>
             <%: Html.ValidationMessageFor(Model => Model.PackageID)%>
        </div>

         <div class="editor-label1">
            <%: Html.LabelFor(Model => Model.PackageName)%>
        </div>
        <div class ="editor-field1">
            <%: Html.TextBoxFor(Model => Model.PackageName)%>
            <%: Html.ValidationMessageFor(Model => Model.PackageName)%>
        </div>

        <div class="editor-label1">
            <%: Html.LabelFor(Model => Model.PackageDesc)%>
        </div>
        <div class ="editor-field1" style= "padding-bottom: 50px; margin-bottom: 150px">
            <%: Html.TextBoxFor(Model => Model.PackageDesc, new  TextMode = TextBoxMode.MultiLine, cols = "55", rows = "10" )%>

            <%: Html.ValidationMessageFor(Model => Model.PackageDesc)%>
        </div>

         <div class="editor-label1">
            <%: Html.LabelFor(Model => Model.PackageTitle)%>
        </div>
        <div class ="editor-field1">
            <%: Html.TextBoxFor(Model => Model.PackageTitle)%>
            <%: Html.ValidationMessageFor(Model => Model.PackageTitle)%>
        </div>
        <div class ="editor-label">
            <%: Html.Label("Project ID") %>
        </div>
        <div class="editor-field">
            <%:Html.DropDownList("ProjectID", (IEnumerable<SelectListItem>)ViewData["projects"])%>
        </div>
         <div>
                <input type="submit" value="Save Edit" />
         </div>
    </fieldset>
    <%  %>

【参考方案1】：

使用 Razor 时使用下面的代码

   @Html.TextAreaFor(model => model.Comments, 10, 40, null);

【参考方案2】：

使用 ASP.NET MVC 的 Html 帮助器渲染 TextArea 并使其可调整大小是两个不同的问题。使用Html 助手时，您可以向textarea 添加一个类

<%:Html.TextAreaFor(x => x.SomeProperty, new  @class = "resizer" ) %>

然后，您可以将这个类与 jQuery 挂钩，以使其在网页上呈现时可调整大小。请参阅Implementing a resizable textarea? 了解有关使您的textarea 可调整大小的信息。

【参考方案3】：

更好的是，如果你想自动计算 textarea 中的行数，你可以使用这个

@Html.TextAreaFor(m => m.Comments, Model.Comments.Count + 1, 40, null)