divan/GanjooRazor/Areas/User/Pages/MyComments.cshtml

@page
@model GanjooRazor.Areas.User.Pages.MyCommentsModel
@using DNTPersianUtils.Core
@{
    Layout = "_UserPanelLayout";
    ViewData["Title"] = "حاشیه‌های من";
    await GanjooRazor.Utils.GanjoorSessionChecker.ApplyPermissionsToViewData(Request, Response, ViewData);
    string color = "gray";
}
<h1>@ViewData["Title"]</h1>
@if (Model.LastError != "")
{
    <h2>@Model.LastError</h2>
}
else
{

    <script>
        function deleteThisComment(commentId) {
            if (!confirm('آیا از حذف این حاشیه اطمینان دارید؟'))
                return;

            var url = '?handler=MyComment';

            $.ajax({
                type: "DELETE",
                url: url,
                data: {
                    id: commentId
                },
                error: function (e) {
                    if (e.responseText == null)
                        alert(e);
                    else
                        alert(e.responseText);
                },
                success: function () {
                    var commentBlockId = '#comment-' + commentId;
                    $(commentBlockId).remove();
                },
            });

        }

        function editThisComment(commentId) {
            var commentTextBlockId = '#comment-text-' + commentId;
            tinymce.get('editCommentText').setContent($(commentTextBlockId).html());
            $("#editCommentId").val(commentId);
            document.getElementById('id02').style.display = 'block';
        }

        function editCommentFinal() {
            $("#editcommentform").unbind('submit').bind('submit', function (e) {

                e.preventDefault(); // avoid to execute the actual submit of the form.

                var url = '?handler=MyComment';

                var commentId = $("#editCommentId").val();


                $.ajax({
                    type: "PUT",
                    url: url,
                    data: {
                        id: commentId,
                        comment: $("textarea#editCommentText").val()
                    },
                    error: function (e) {
                    if (e.responseText == null)
                        alert(e);
                    else
                        alert(e.responseText);
                },
                    success: function () {
                        document.getElementById('id02').style.display = 'none';

                        var commentTextBlockId = '#comment-text-' + commentId;

                        $(commentTextBlockId).html($("textarea#editCommentText").val());
                    },

                });
            });
        }
    </script>
    <p style="text-align:center">
        @foreach (var paginationLink in Model.PaginationLinks)
        {
            if (!string.IsNullOrEmpty(paginationLink.Url))
            {
                <a href="@paginationLink.Url">@paginationLink.Name</a>
            }
            else
            {
                @paginationLink.Name
            }
        }
    </p>

    @if (Model.Comments.Count == 0)
    {
        <p>
            حاشیه‌ای یافت نشد.
        </p>
    }

    @foreach (var comment in Model.Comments)
    {
        if (color == "gray")
            color = "lightsteelblue";
        else
            color = "gray";

        <div style="background-color:@color" id="comment-@comment.Id">
            <blockquote>
                <div id="comment-text-@comment.Id">
                    @Html.Raw(comment.HtmlComment)
                </div>
                <p>
                    @Model.UserInfo.NickName <small>در @comment.CommentDate.ToFriendlyPersianDateTextify()</small> دربارهٔ <a href="@comment.Poem.UrlSlug#comment-@comment.Id">@comment.Poem.Title</a>
                </p>
            </blockquote>
            <p>
                <a role="button" onclick="deleteThisComment(@comment.Id)" class="actionlink" title="حذف حاشیه"><i class="noindent-info-button delete-icon"></i></a>
                <a role="button" onclick="editThisComment(@comment.Id)" class="actionlink" title="ویرایش حاشیه"><i class="noindent-info-button edit-poem-button"></i></a>
            </p>
        </div>


        <hr />
    }

    <p style="text-align:center">
        @foreach (var paginationLink in Model.PaginationLinks)
        {
            if (!string.IsNullOrEmpty(paginationLink.Url))
            {
                <a href="@paginationLink.Url">@paginationLink.Name</a>
            }
            else
            {
                @paginationLink.Name
            }
        }
    </p>

    <div id="id02" class="modal">
        <span onclick="document.getElementById('id02').style.display='none'"
          class="close" title="بستن">&times;</span>
        <form class="modal-content animate" method="post" id="editcommentform" action="?handler=EditComment">
            <table style="max-width:100%; width:100%; margin:0">
                <tr>
                    <td>
                        <textarea name="editCommentText" id="editCommentText" class="inputTextarea editor  width-100per" tabindex="4" rows="10"></textarea>
                        <input type="hidden" name="editCommentId" id="editCommentId" value="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button name="editcomment" id="editcomment" class="submitCommentButton width-100per" onclick="return editCommentFinal();">ویرایش حاشیه</button>
                    </td>
                </tr>
            </table>

        </form>
    </div>
}