afficher les commentaires et le post sur la même page pour ajouter de nouveaux commentaires

Question

Je construis une application web en ASP.NET MVC. J'ai une page de commentaires où les commentaires sont affichés dans une liste avec le plus récent au plus ancien et ont également un formulaire en bas où un utilisateur peut poster de nouveaux commentaires. Les entrées de formulaire doivent également être mises en surbrillance en plus d'avoir la page affichant les derniers commentaires.

Quel est le meilleur moyen de le faire, où les données affichées et un formulaire de publication sont sur la même page?

Est-il possible de le faire sans ajax?

--Code extract--

class CommentsViewModel 
{ 
    public IList<Comment> comments { get; set; } 
    public Comment comment { get; set; } 
    public SelectList commentCategories { get; set; } 
} 


class Comment 
{ 
    [Required] 
    public string commentData { get; set; } 

    [Required] 
    public int? commentCategory { get; set; } 
} 


class Comments : Controller 
{ 

    public ActionResult Index() 
    { 
     Site db = new Site(); 
     CommentsViewModel commenstVm = new 
     { 
      comments = db.GetComments(), 
      comment = new Comment(), 
      commentCategories = db.GetCommentCategories() 
     }; 

     return View(commentsVm); 
    } 


    [HttpPost] 
    public ActionResult AddNewComment(CommentsViewModel commentVm) 
    { 
     Site db = new Site(); 
     if (!ModelState.IsValid) 
     { 
      return View("Index", commentVm); 
     } 
     db.AddComment(commentVm.comment); 

     return RedirectToAction("Index"); 
    } 
} 

Answer 1

Voici un View de base et le Controller que vous pouvez utiliser comme point de départ.

Modèle et ViewModel:

public class CommentsViewModel 
{ 
    public IList<Comment> comments { get; set; } 

    public CommentsViewModel() 
    { 
     comments = new List<Comment>(); 
    } 
} 

public class Comment 
{ 
    [Required] 
    public string commentData { get; set; } 
    /** Omitted other properties for simplicity */ 
} 

Vue:

@using (@Html.BeginForm("Index", "Comments")) 
{ 
    @Html.TextBoxFor(t => t.comment.commentData) 
    @Html.ValidationMessageFor(t=> t.comment.commentData, "", new {@class = "red"}) 
    <button name="button" value="addcomment">Add Comment</button> 
} 

@foreach (var t in Model.comments) 
{ 
    <div>@t.commentData</div> 
} 

Controller:

public class CommentsController : Controller 
{ 
    /** I'm using static to persist data for testing only. */ 
    private static CommentsViewModel _viewModel; 

    public ActionResult Index() 
    { 
     _viewModel = new CommentsViewModel(); 
     return View(_viewModel); 
    } 

    [HttpPost] 
    public ActionResult Index(Comment comment) 
    { 
     if (ModelState.IsValid) 
     { 
      _viewModel.comments.Add(
       new Comment() {commentData = comment.commentData}); 
      return View("Index", _viewModel); 
     } 

     return RedirectToAction("Index"); 
    } 
}