HTML.Textarea Valeurs dans MVC, Razor Vue

Il est difficile pour moi d'expliquer clairement le problème que j'ai. Je suis en train d'essayer de comprendre comment conserver les valeurs dans les champs de formulaire créé dans une boucle après la validation échoue. J'en ai une plus compliqué du monde réel formulaire qui a un tas d'éléments créés dans la boucle et de validation. J'ai réduit à un simple exemple ci-dessous.

Si la validation échoue, je voudrais que les textareas nommé "Commentaire" qui ont été créés dans la boucle pour conserver les valeurs qui sont indiquées dans le Pré-Soumettre l'image ci-dessous.

Quand je debug la soumission du formulaire, les valeurs de chacun des champs sont correctement connectés à la IList variable nommée Commentaire trouvé dans le Modèle. C'est ce que je veux donc je peux parcourir et localisez sur la base de l'indice.

Après la soumission, chaque textarea produite par la boucle affiche séparées par des virgules représentation de la IList variable Commentaire dans le Modèle. Il semble que le champ dans la vue et dans le modèle de connexion parce qu'ils partagent un nom. Ils se connectent correctement sur le chemin, mais pas sur le moyen de sortir. Je voudrais l'afficher pour afficher seulement la valeur associée avec le Commentaire[i] au lieu de la totalité de la liste, de sorte que les valeurs restent constantes entre les soumissions de formulaire.

Des captures d'écran et des exemples de Code ci-Dessous


Première Charge:

HTML.Textarea Valeurs dans MVC, Razor Vue

Pré-Soumettre Les Changements De Forme:

HTML.Textarea Valeurs dans MVC, Razor Vue

Forme comme on le voit après la première soumettre:

HTML.Textarea Valeurs dans MVC, Razor Vue

Forme comme on le voit après la deuxième soumettre:

HTML.Textarea Valeurs dans MVC, Razor Vue

Modèle Code

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
    }
}


Afficher Le Code

@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" />
}


Contrôleur De Code

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;
        }
    }
}

OriginalL'auteur RacerNerd | 2013-05-15