为Details视图添加评论区：ASP.NET Core视图代码咨询

Hey there! Let's get that comment section working smoothly. First off, I notice a critical issue in your current code: your submit button is placed outside the <form> tag. That means clicking it won't actually trigger the form submission—let's fix that first, then cover the backend pieces you'll need to make this fully functional.

Step 1: Correct the Frontend Form Structure #

Move the submit button inside the form element, and add a hidden field to pass the Ticket ID (so we know which ticket this comment belongs to). Here's the revised code:

<div class="form-group">
    <form asp-controller="Ticket" asp-action="Comment" method="post">
        <!-- Hidden field to link the comment to the correct ticket -->
        <input type="hidden" asp-for="TicketId" />
        
        <label asp-for="Comment.Content" class="control-label">Add a Comment</label>
        <textarea asp-for="Comment.Content" class="form-control" placeholder="Add comment!" rows="4"></textarea>
        <span asp-validation-for="Comment.Content" class="text-danger"></span>
        
        <!-- Submit button now properly nested inside the form -->
        <input type="submit" value="Add comment" class="btn btn-default mt-2" />
    </form>
</div>

Step 2: Update Your ViewModel #

Make sure your view's ViewModel (let's assume it's TicketDetailsViewModel) includes the necessary properties to hold the comment and ticket context:

public class TicketDetailsViewModel
{
    // Existing ticket properties (e.g., TicketId, Title, Description)
    public int TicketId { get; set; }
    
    // The comment object for user input
    public CommentViewModel Comment { get; set; } = new CommentViewModel();
}

public class CommentViewModel
{
    [Required(ErrorMessage = "Please enter a comment.")]
    [StringLength(500, ErrorMessage = "Comment can't exceed 500 characters.")]
    public string Content { get; set; }
}

Step 3: Implement the Backend Action in TicketController #

Add a Comment action to handle the POST request, save the comment to your database, and redirect back to the Ticket Details view:

private readonly YourDbContext _context;

// Inject DbContext via constructor
public TicketController(YourDbContext context)
{
    _context = context;
}

[HttpPost]
public async Task<IActionResult> Comment(TicketDetailsViewModel model)
{
    if (ModelState.IsValid)
    {
        // Map ViewModel data to your Comment entity
        var newComment = new Comment
        {
            Content = model.Comment.Content,
            TicketId = model.TicketId,
            CreatedDate = DateTime.Now,
            // Add UserId here if you're tracking comment authors (via User.Identity.Name)
        };
        
        _context.Comments.Add(newComment);
        await _context.SaveChangesAsync();
        
        // Redirect back to the same ticket's Details view
        return RedirectToAction(nameof(Details), new { id = model.TicketId });
    }
    
    // If validation fails, reload the Details view with existing ticket data
    model.Ticket = await _context.Tickets.FindAsync(model.TicketId);
    return View(nameof(Details), model);
}

Quick Tips: #

• If you're using authentication, add newComment.UserId = User.Identity.Name; to track who posted the comment.
• The rows="4" attribute on the textarea makes it more user-friendly for longer comments.
• Make sure your Comment entity in the database has a foreign key relationship to the Ticket entity.

内容的提问来源于stack exchange，提问作者Deeadline