web-dev-qa-db-ja.com

MVC RazorViewのHTML.Textarea値

私が抱えている問題を明確に述べるのは難しいです。検証が失敗した後、ループで作成されたフォームフィールドに値を保持する方法を理解しようとしています。ループと検証で作成された要素の束を含む、より複雑な実世界のフォームがあります。私はそれを以下に含まれる簡単な例に減らしました。

検証が失敗した場合、ループ内に作成された「コメント」という名前のテキスト領域に、以下の送信前の画像に示されている値を保持させたいと思います。

フォーム送信をデバッグすると、各フィールドの値が、モデルにあるCommentという名前のIList変数に正常に接続されます。これは、ループに基づいて、インデックスに基づいて検索できるようにするためのものです。

送信後、ループによって生成された各テキスト領域には、モデル内のIList変数Commentのコンマ区切り表現が表示されます。ビューとモデルのフィールドは、名前を共有しているため接続しているようです。彼らは途中で正しく接続しますが、途中ではありません。リスト全体ではなく、Comment [i]に関連付けられた値のみを表示して、フォームの送信間で値が一定に保たれるようにしたいと思います。

以下のスクリーンショットとサンプルコード
初回ロード：
First load of form without changes

フォームの変更を事前に送信：
Form with changes to the first input before submitting

最初の送信後に表示されるフォーム：
Form as seen after the first submission

2回目の送信後に表示されるフォーム：
enter image description here

モデルコード

using System.Collections.Generic;
namespace UI.Models.Forms
{
    public class TempListModel : ContentModel
    {
        public TempListModel()
        {
            Comment = new List<string>();
        }
        public IList<string> Comment { get; set; }  //Comments for each URL in the list
    }
}


コードを表示

@model UI.Models.Forms.TempListModel  
@using (Html.BeginForm("temptest", "Test", new { id = 1 }, FormMethod.Post, new { id = "listForm", name = "listForm" }))
{
    <ul>
        @for (int i = 0; i < Model.Comment.Count(); i++)
        {
            <li>
                <div class="llformlabel">
                    Notes:
                    <div>@Model.Comment[i]</div>
                    @Html.TextArea("Comment", Model.Comment[i], 4, 63, new { @id = "Comment_" + i, @title = "Comment" })</div>
            </li>
        }
    </ul>
    <input type="submit" value="Save Changes" />
}


コントローラーコード

using System.Collections.Generic;
using System.Web.Mvc;
using UI.Models.Forms;
namespace UI.Controllers
{
    public class TestController : Controller
    {
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult TempTest(TempListModel model)
        {
            //This function executes after the user submits the form.
            //If server side validation fails then the user should be shown the form as it was when they submitted.
            //model.Comment = GetComments();  //In my real world example this comes from a database.
            if (true) //!ModelState.IsValid) //In my real world code this is a validation step that may fail
            {
                return View(model);
            }
        }
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult TempTest(int? id)
        {
            //In the real world example there is a lot going on in this function.
            //It is used to load data from databases and set up the model to be displayed.
            var model = new TempListModel(); 
            model.Comment = GetComments();
            return View("TempTest", "TempLayout", model);
        }
        private static IList<string> GetComments()
        {
            //Simple sample function used for demo purposes.
            IList<string> comments = new List<string>();
            comments.Add("Comment 1");
            comments.Add("Comment 2");
            comments.Add("Comment 3");
            return comments;
        }
    }
}
c#htmlasp.net-mvcrazormodel-binding
7
RacerNerd

検証に失敗した場合は、モデルを返すだけです。

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult TempTest(TempListModel model)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("TempTest");
        }
        return View(model);
    }

編集代わりにビューでこれを試してください

@for (int i = 0; i < Model.Comment.Count(); i++)
{
    <li>
        @Html.TextAreaFor(m => m.Comment[i], 4, 63, new { @title = "Comment" })
    </li>
}

そして、ヘルパーに要素に名前を付けさせてください。 Comment[i]のようなname属性になります。

8
Jasen

ASP.NET MVCのデフォルトのModelBinderは、TempListModelプロパティに一致するリクエスト内のHTML名を検索して、サーバーにモデルを再構築します。ただし、各HTML要素のコメントIDを上書きしています。

@Html.TextArea("Comment", Model.Comment[i], 4, 63, new { @id = "Comment_" + i, @title = "Comment" })

このカスタムIDを配置する必要がある場合は、新しい ModelBinder を作成する必要があります。あなたはこのように物事を簡単に保つことができます：

  @Html.TextAreaFor(m => m.Comment[i], 4, 63, new { @title = "Comment" })

それがあなたを助けることを願っています！

2
Fals