2011-05-05 26 views
12

我有一个asp.net mvc视图,允许用户在textarea中输入一些描述。Html.TextAreaFor在asp.net mvc

我面临两个问题。

当我展开textarea时,它正在展开而不移动其他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> 
    <% } %> 

回答

17

使用ASP.NET MVC的Html帮手渲染TextArea并使其可调整大小的是两个不同的担忧。当使用Html助手,你可以添加一个类textarea

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

然后你可以连接这个类与jQuery,使其可调整大小的,当它在网页上呈现。有关如何使textarea可调整大小的信息,请参阅Implementing a resizable textarea?

19

使用剃须刀使用时

下面的代码
@Html.TextAreaFor(model => model.Comments, 10, 40, null); 
0

更妙的是,如果你想在textarea的行的自动计算数量,你可以使用这个

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