ユーザーがテキストエリアに説明を入力できるasp.net mvcビューがあります。
私が直面している2つの問題があります。
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>
<% } %>
ASP.NET MVCのTextArea
ヘルパーを使用してHtml
をレンダリングし、サイズを変更できるようにすることは、2つの異なる懸念事項です。 Html
ヘルパーを使用すると、次のようにクラスをtextarea
に追加できます
<%:Html.TextAreaFor(x => x.SomeProperty, new { @class = "resizer" }) %>
次に、このクラスをjQueryにフックして、Webページにレンダリングされたときにサイズ変更可能にします。 textarea
をサイズ変更可能にする方法については、 サイズ変更可能なテキストエリアの実装? を参照してください。
Razorを使用する場合は、以下のコードを使用してください
@Html.TextAreaFor(model => model.Comments, 10, 40, null);
さらに良いことに、テキストエリアの行数を自動計算したい場合は、これを使用できます
@Html.TextAreaFor(m => m.Comments, Model.Comments.Count + 1, 40, null)