web-dev-qa-db-ja.com

asp.net mvcのHtml.TextAreaFor

ユーザーがテキストエリアに説明を入力できる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>
    <% } %>
17
Ajai

ASP.NET MVCのTextAreaヘルパーを使用してHtmlをレンダリングし、サイズを変更できるようにすることは、2つの異なる懸念事項です。 Htmlヘルパーを使用すると、次のようにクラスをtextareaに追加できます

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

次に、このクラスをjQueryにフックして、Webページにレンダリングされたときにサイズ変更可能にします。 textareaをサイズ変更可能にする方法については、 サイズ変更可能なテキストエリアの実装? を参照してください。

24

Razorを使用する場合は、以下のコードを使用してください

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

さらに良いことに、テキストエリアの行数を自動計算したい場合は、これを使用できます

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