need help creating a comment section in MVC app

Need to add a comment section to my code for a detais pane.

Hi All,

I am creating as a test project an application to manage and help with IT tickets. I have a details pane which displays a post form allowing me to view details and update any if necessary. All is working well except that I need to create a comment section to add details on work that has been already completed in the details pane.

@model TicketingSystem.ViewModels.TicketFormViewModel
@{
    ViewBag.Title = "Details";
}

<h2>@Model.Title</h2>

@using (Html.BeginForm("Save", "Tickets"))
{

    <div class="form-group">
        @Html.LabelFor(t => t.Subject)
        @Html.TextBoxFor(t => t.Subject, new { @class = "form-control" })
        @Html.ValidationMessageFor(t => t.Subject)


    </div>

    <div class="form-group">
        @Html.LabelFor(t => t.SenderName)
        @Html.TextBoxFor(t => t.SenderName, new { @class = "form-control" })
        @Html.ValidationMessageFor(t => t.SenderName)
    </div>

    <div class="form-group">
        @Html.LabelFor(t => t.SenderEmail)
        @Html.TextBoxFor(t => t.SenderEmail, new { @class = "form-control" })
        @Html.ValidationMessageFor(t => t.SenderEmail)
    </div>


    <div class="form-group">
        @Html.LabelFor(t => t.Message)
        <br />
        @Html.TextAreaFor(t => t.Message)
    </div>

    <div class="form-group">
        @Html.LabelFor(t => t.StateId)
        @Html.DropDownListFor(t => t.StateId, new SelectList(Model.State, "Id", "Name"), "", new { @class = "form-control" })
        @Html.ValidationMessageFor(t => t.StateId)
    </div>


    @Html.HiddenFor(t=>t.Id , new { @class = "form-control"})

    @Html.AntiForgeryToken()


    <button type="submit" class="btn btn-primary">Save</button>
}

I was hoping to get a small chat box-like feature that will have a small text box with a "post" button under which would allow me to submit to my comments model. I am really not sure how to even start implementing something like that. Any pointers would be majorly appreciated as I am fairly new to the MVC and web apps as a whole.

Solution

I would create a Comments model (if you're using EF) that would have an association to this TicketView model (whatever pk your ticket model has). Then within your view, I'd create a _Comments partial which has a TextArea and a Submit button. In fact, I've done this very thing and it works. The submit button in the _Comments partial would post the comment and return back to the view with the comment in it.

My Model is set up like this. I have a one-to-many relationship between requests and responses. Responses have groups. Within each group of responses I have one or more GroupComment(s).

For example, in my parent view (which has a ViewModel of responses, groups and group comments)...

   <section class="comments">
        <label class="commentsLabel">Comments:</label>
        <span> 
           @Html.Partial("_CommentsPartial", comment)               
        </span>                                                          
    </section>

Then my comments partial looks like this (What this does is show the comments if any exist. If no comments exist yet, I have an Add button so the user can add a comment:

@model IEnumerable<GroupComment>
@{
   var comment = Model;    
   foreach (var c in comment)
   {
       if (c.COMMENT_ID > 0)
       {
      <div>
       <img src="~/Content/note.jpg" /><span 
        class="comment">@Html.ActionLink("Edit", "Edit", "Comments", new { id = 
      c.COMMENT_ID }, null)</span> @c.COMMENTS
     </div>
        } else {
        <div>
            @Html.ActionLink("Add \u00BB", "Create", "Comments", new { NCR_REQUEST_ID = c.NCR_REQUEST_ID, NCR_GROUPS_ID = c.NCR_GROUPS_ID }, new { @class = "btn btn-primary btn-sm" })
        </div>
    }
}

}