آموزش ایجاد فرم ارسال نظر به صورت تودرتو در MVC 5

در این پست قصد داریم تا یکی از مهم ترین بخش های سایت یعنی فرم ارسال نظر به صورت تودرتو در MVC 5 را توضیح دهیم.

برای ارسال نظر و پاسخ دادن به نظر و همچنین پاسخ دادن به پاسخ نظر و ... باید مراحل زیر را طی کنید. این مراحل برای کسانی که با Asp.Net و یا PHP  کار می کنند تقریبا یکسان است.

برای این کار باید یک جدول نظر ایجاد کنیم

یک جدول به نام comment با فیلدهای زیر در نظر بگیرید:

CommentId

آی دی جدول که به صورت یک کلید اصلی تعریف می کنیم

نوع فیلد رو از نوع int تعریف می کنیم

ParentId

کلید خارجی جدول که بصورت نال تعریف شده

نکته مهم

ما در این جدول با استفاده از این فیلد یک ارتباط داخلی یک به چند با کلید اصلی بر قرار می کنیم تا بتواینم با استفاده ازاین فیلد به نظرات پاسخ تودرتو بدیم.

نوع فیلد رو از نوع int تعریف می کنیم

PostId

آی دی پست یا مطلبی که نظر برا آن ثبت خواهد شد

Name

فیلد نام کاربر نظر دهنده

نوع فیلد رو از نوع (50)nvarchar تعریف می کنیم

Email

فیلد ایمیل کاربر نظر دهنده

نوع فیلد رو از نوع (60)nvarchar تعریف می کنیم

Comment

فیلد نظر کاربر

نوع فیلد رو از نوع (nvarchar(max تعریف می کنیم

CommentIsActive

با استفاده این فیلد در حال نمایش بودن یا نبودن نظر را مشخص می کنیم

نوع فیلد رو bit تعریف می کنیم  یعنی اگر صفر باشد نظر در حال نمایش نیست اگر یک باشد نظر در حال نمایش است.

نکته:

از این فیلد معمولا در قسمت مدیریت جهت تایید نمایش یا عدم نمایش نظر استفاده می شود.

InsertDateTime

 تاریخ و ساعت ثبت نظر را ثبت می کنیم.

نوع فیلد رو از نوع datetime تعریف می کنیم

بعد از تعریف جدول نوبت به ثبت نظر می رسد.

برای ثبت نظر یک فرم ایجاد کنید. بعد از ایجاد فرم همانند ثبت یک نظر معمولی نظر را ثبت کنید.

نکته:

در صورتی که نظر در حال ثبت یک نظر معمولی است یعنی پاسخ نظر دیگر نیست باید فیلد ParentId نال ثبت شود. ولی اگر این نظر پاسخ یک نظر باشد باید ParentId با مقدار CommentId مقدار دهی شود. در اینجا مشخص می شود که این پاسخ مربوط به کدام نظر است. با این روش می توانید برای یک نظر چندین پاسخ ثبت کنید یا برای پاسخ هم می توانید یک یا چند پاسخ یا همان نظر ثبت کنید.

نحوه پیدا کردن آی دی نظر در حال پاسخ دادن به نظر:

مثلا در حال پاسخ دادن به یک نظر هستیم حالا باید آی دی نظر را پیدا کنیم برای این کار از یک دستور جی کئوری استفاده می کنیم. یعنی زمانی که روی لینک پاسخ کلیک می شود دستور جی کئوری زیر کار می کند.

<script type="text/javascript">
    $(document).ready(function () {
        $("[id*=btnReply]").each(function () {
            $(this).click(function () {
                var commentid = $(this).attr("id").match(/[\d]+$/);
                $("#ParentId").val(commentid);
            });
        });
    });
</script>

نکته:

مثلا آی دی لینک پاسخ به صورت btnReply_10 باشد در اینجا عدد 10 یک مثال است و باید به جای عدد 10 آی دی نظر قرار گیرد.

در کد جی کئوری بالا عددی که بعد از  _btnReply قرار دارد را دریافت می کنیم سپس در یک input که به صورت مخفی (hidden) تعریف کردیم در فرم ارسال نظر قرار می دهیم و هنگام ثبت نظر در سمت سرور بررسی می کنیم که اگر این input خالی نباشد مقدار آن را برای ParentId ثبت می کنیم.

نحوه نمایش نظرات

برای این کار باید شما ابتدا یک select بنویسید و نظراتی که ParentId آنها null هست را پیدا کنید و سپس نظر را نمایش داده و برای نمایش جواب ها یک select دیگر بنویسید.

کد زیر با MVC 5 نوشته شده است.

@model IEnumerable<ProjectMVC5.Models.Comment>

<div class="response-area">
    <h2>تعداد نظرات : @ViewBag.count</h2>
    @DisplayComment(Model.Where(x => x.ParentId == null))
    @helper DisplayComment(IEnumerable<ProjectMVC5.Models.Comment> comments)
{
    <ul class="media-list">
        @foreach (var comment in comments)
        {
            <li class="media">

                <img class="pull-right media-object" src="@Url.Content("~/Images/uploads/users/no_avatar.gif")" alt="no_avatar">

                <div class="media-body">
                    <ul class="sinlge-post-meta">
                        <li style="list-style: none;">
                            <i class="fa fa-user"></i>
                            <span>&nbsp;</span>
                            @comment.Name
                        </li>
                        <li style="list-style: none;">
                            <i class="fa fa-clock-o">&nbsp;ساعت ارسال&nbsp;</i>
                            @comment.InsertDateTime.ToShortTimeString()
                        </li>
                        <li style="list-style: none;">
                            <i class="fa fa-calendar">&nbsp;تاریخ ارسال&nbsp;</i>
                            @comment.InsertDateTime.ToString("yyyy/MM/dd")
                        </li>
                    </ul>
                    <p style="text-indent: 5px;">
                        @comment.comment
                    </p>
                    <a href="#" id="btnReply_@comment.CommentId">پاسخ</a>
                </div>

                @{
            var childComment = Model.Where(x => x.ParentId == comment.CommentId).ToList();
            if (childComment.Count > 0)
            {
                <ul>
                    <li class="second-media">
                        @DisplayComment(childComment)
                    </li>
                </ul>
            }
                }
            </li>
        }
    </ul>
}
</div>

در کد بالا از یک helper استفاده کردیم و ابتدا نظرات و پاسخ های هریک را در زیر هم نمایش دادیم و هنگام نمایش یک لینک برای پاسخ دادن به نظرت قرار دادیم و آی دی آن را به صورت _btnReply و سپس نام آی دی آن نظر را مشخص کردیم که در بالا نحوه به دست آوردن آی دی نظر با استفاده از جی کئوری توضیح دادیم.