How to get previous state on button click in ASP.NET MVC

I have a view in which I want to show textbox and button to save and edit the database table if in the table id comment is null I want to show textbox to enter the comment and if comment is there in the table then show the comment, but when user clicks the second (edit) button I want that textbox and button should reappear in that place, I put an if condition to check if my table column is null then show textbox and button to enter data into that column and I have second button to get back the textbox and buttons with the comment text.

This is my code:

@if (item.Comments == null)
{
    <div class="form-inline comments">
        <textarea class="form-control commentText" placeholder="Enter Your Comment"></textarea>&nbsp;
        <button type="submit" data-cid="@item.RoomId" class="btn btn-primary save"><i class="fas fa-save h3"></i></button>&nbsp;
        <button type="submit" data-eid="@item.RoomId" class="btn btn-secondary edit"><i class="fas fa-edit h3"></i></button>&nbsp;
    </div>
}
else
{
    <div class="commentText">
        @Html.DisplayFor(modelItem => item.Comments)
    </div>
}

$('.save').click(function () {
        var cmt = $('.commentText').val();
        $.post("@Url.Action("AddComment", "ReceptionHk")", { id: $(this).data("id"), newComment: cmt });
});

$('.edit').click(function () {
    $('.comments').show();
    $('.commentText').hide();
});

My controller method:

public void AddComment(int id, string newComment)
{
    var roomcmt = db.SingleOrDefault<Room>(id);

    if (ModelState.IsValid)
    {
        roomcmt.Comments = newComment;
        var r = db.Update(roomcmt);
    }
}

How to show the textbox and two button again when edit button is clicked

Please help me with this

Solution

Change your code in the following way:

A: Remove the line @if (item.Comments == null) and make the view display the creation section by default.

B: For creating/editing the comments have your code something like this:

<div class="form-inline comments">
      <textarea class="form-control commentText" placeholder="Enter Your Comment"></textarea>&nbsp;
      <button type="submit" data-cid="@item.RoomId" class="btn btn-primary save"><i class="fas fa-save h3"></i></button>&nbsp;
</div>

C: And then add a scope validation on the list as:

@if(item.Comments!=null)
{
  <display your list here>
}

For displaying the comments, instead of statically displaying the comments use a table and do a foreach loop on the comments in the table to create rows with 2 columns in it as Comment,Edit. Ex:

<table>
     @foreach(var comment in item.Comments)
     {
       <tr>
           <td>@comment.Text</td>
           <td><button data-id="@comment.RoomId">Edit</button></td>
       </tr>
     }
</table>

and on the click of the Edit button call a javascript function that will call the retrieval of that comment and populate your editing fields after which you can later use it to update.

Your view will look something like this:

<div class="form-inline comments">
      <textarea class="form-control commentText" placeholder="Enter Your Comment"></textarea>&nbsp;
      <button type="submit" data-cid="@item.RoomId" class="btn btn-primary save"><i class="fas fa-save h3"></i></button>&nbsp;
</div>

@if(item.Comments!=null)
{
    <table>
     @foreach(var comment in item.Comments)
     {
       <tr>
           <td>@comment.Text</td>
           <td><button data-id="@comment.RoomId">Edit</button></td>
       </tr>
     }
    </table>
}

Rest: implement your JS function to retrieve and create the comments.