ارسال دیدگاه در Asp.Net به صورت Ajax

ارسال دیدگاه در Asp.Net به صورت Ajax

امروز آموزش ارسال نظر را در Asp.Net برای شما آموزش می دهیم. قبلا این مبحث را برای Php و Asp.net Mvc آموزش داده بودیم.

برای مشاهده لینک وارد شود

ما برای این پروژه از روش ارسال داده Ajax و Json استفاده کردیم. همچنین از کتابخانه های JQeury ، JQuery Template و Newtonsoft.Json برای پیاده سازی پروژه استفاده می کنیم. برای ایجاد Ajax ما از یک صفحه ی واسط برای ارسال و دریاقت داده استفاده می کنیم ( صفحه ی ajax.aspx ). همچنین ما برای پیاده سازی پایگاه داده از EntityFramework استفاده کردیم. این کار باعث سهولت در پیاده سازی پایگاه داده و مدل های برنامه می شود.

2

مدل نظرات به شکل زیر پیاده سازی شده است:

App_Code/Models/CommentModel.cs

// برای جلوگیری از خطای چرخه
    [JsonObject(IsReference = true)] 
    public class CommentModel:BaseType
    {
        public CommentModel()
        {
            this.Children=new HashSet();
        }

        public string AuthorName { get; set; }

        public string AuthorEmail { get; set; }

        public string AuthorUrl { get; set; }
        public string Content { get; set; }
        public bool IsApproved { get; set; }

        public virtual CommentModel Parent { get; set; }
        public virtual ICollection Children { get; set; }

        public string GetAvatar
        {
            get
            {
                var rand = new Random();
                int randAvatar = rand.Next(1,2);
                return VirtualPathUtility.ToAbsolute(String.Format("~/Images/Avatar/avatar_0{0}.jpg", randAvatar));
            }
        }
    }

استفاده از JsonObject به این منظور است که هنگام تبدیل مدل به Json در ICollection<CommentModel> Children باعث وجود یک چرخه می شود (چون لیستی از خود کلاس است) و این باعث کشف خطا خواهد شد. برای این منظور ما از قبل وجود آن را بیان می کنیم. ویژگی CommentModel Parent برای برقراری یک ارتباط چند به یک با خود کلاس مربوطه است (هر نظری مجموعه ای از پاسخ ها را دارد (Children) و هر پاسخ زیرمجموعه یک نظر (Parent ) است). GetAvatar دارای کد نمونه است برای ارسال آدرس آواتار شخص ارسال کننده نظر. محتوای این تابع قابل تغییر است. کلاس BaseType کلاس دربر دارنده ی کلید اصلی و سایر خواص است (این کلاس در مسیر (App_Code/BaseType.cs) موجود می باشد).
برای مشاهده نظرات و ارسال نظرات جدید، در ajax.aspx از کوئری rq استفاده شده است. با بررسی این کوئری تصمیم گرفته می شود که داده ها برای نمایش ارسال شود (rq=commentdata) یا داده جدید به پایگاه داده اضافه شود(rq=send). هنگام ارسال داده به سوی کاربر شناسه داده مورد نظر با کوئری id دریافت و سپس اطلاعات از پایگاه داده بیرون کشیده شده و برای نمایش آن ابتدا تبدیل به Json شده (توسط JsonConvert ) و سپس ارسال می شود.

(ajax.aspx (rq=commentdata

var id = Request.QueryString["id"];
                        if (id != null)
                        {
                            var comments = db.Comments.Find(Guid.Parse(id.ToString()));
                            if (comments != null)
                            {
                                comments.Children = comments.Children.OrderBy(c => c.CreatedTime.Value).ToList();

                                string jsonString = JsonConvert.SerializeObject(comments, settings);

                                string p = @"\d{4}\/\d{2}\/\d{2}.\d{2}:\d{2}:\d{2}.[AM|PM]*";
                                MatchEvaluator matchEvaluator = new MatchEvaluator(
                                    ConvertDateStringToJsonDate);
                                Regex reg = new Regex(p);
                                jsonString = reg.Replace(jsonString, matchEvaluator);

                                Response.Write(jsonString);
                            }
                        }

برای ذخیره داده ، کوئری های cc برای متن نظر، name برای نام شخص و parent شناسه والد نظر (این نظر زیر مجموعه داده با شناسه parent میباشد) را دریافت و براساس parent تصمیم می گیریم که این نظر در زیر یک نظر دیگر به عنوان پاسخ نمایش داده می شود یا خود به یک نظر جدا و در ریشه نمایش داده می شود. بعد داده ذخیره و در صورت والد، به آن اعمال می شود. پس از ذخیره داده ها برای نمایش به کاربر ارسال می شود. عبارت با قاعده p برای تشخیص زمان و تابع ConvertDateStringToJsonDate برای جایگذاری زمان با محتوای تابع WaveTime در کلاس DateTimeHelper استفاده شده است. این تابع برای نمایش زمان به صورت همین الان، چند لحظه قبل، ۱ دقیقه قبل و … استفاده کردیم. این کلاس در مسیر App_Code/DateTimeHelper.cs موجود است و همچنین در پست ارسال نظرات در Asp.net mvc در صفحه قرار داده شده است.

3

(ajax.aspx (rq=send

string CommentDisplay = @"
<div class=""wave-comment comment-{0}""> <div class=""avatar""> <img src=""> </div> <span class=""sender-name"">{2}</span> <span class=""sender-date"">{3}</span> <span class=""comment-content"">{4}</span> <a href="" class="">پاسخ</a> </div>";

var parentId = Request.QueryString["parent"];
var content = Request.QueryString["cc"];
var authorName = Request.QueryString["name"];

if (parentId != Guid.Empty.ToString())
{
    CommentDisplay = "<li><ul class=\"comment-wave child\"><li>" + CommentDisplay + "</li></ul></li>";
}
else
{
    CommentDisplay = "<li>" + CommentDisplay + "</li>";
}
content = content.Replace("\n", "
");

string error = "", errorMessage = "";
try
{
    var comment = new CommentModel
    {
        Content = content,
        AuthorName = authorName,
    };
    if (parentId != Guid.Empty.ToString())
    {
        var parentItem = db.Comments.Find(Guid.Parse(parentId.ToString()));
        if (parentItem != null)
        {
            comment.Parent = parentItem;
        }
        parentItem.Children.Add(comment);
    }
    db.SaveChanges();
    CommentDisplay = String.Format(CommentDisplay,
        comment.Id,
        comment.GetAvatar,
        comment.AuthorName,
        comment.CreatedTime.Value.WaveTime(),
        comment.Content);
}
catch (Exception ex)
{
    error = "fail";
    errorMessage = ex.Message + ex.Source;
    CommentDisplay = "";
}


Response.Write(JsonConvert.SerializeObject(new
{
    Body = CommentDisplay,
    Error = error,
    ErrorMessage = errorMessage
}, settings));

اکنون نوبت به کد سمت کاربر و نمایش داده ها می رسد. برای دریافت نظرات شناسه آن به سرور ارسال می شود:

$(function () {
            var rootId = "<%= Id %>";
            $.getJSON("/Ajax.aspx", { rq: "commentdata", id: rootId }, function (data) {
                var t = $("#tmplComments").tmpl(data);
                $(".comment-wave.parent").append(t);
                $(t).find(".comment-content").each(function (index, item) {
                    $(this).html($(this).text());
                });
            });

        })

rootId همان نظری است که داده های آن در یافت خواهد شد. درخواست از ajax.aspx با کوئری های rq و id انجام و داده ها دریافت می شود. برای نمایش داده ها از JQuery Template استفاده می کنیم. در این روش با ایجاد یک تمپلیت، یک مدل به آن ارسال شده و در آن جایگذاری می شود. سپس می توان آن را در هرکجا که خواستیم نمایش دهیم. تمپلیت ما این گونه خواهد بود:

<script type="text/html" id="tmplComments"> <li> <div class="wave-comment comment-${Id}"> <div class="avatar"> <img src="${GetAvatar}"> </div> <span class="sender-name">${AuthorName}</span> <span class="sender-date">${CreatedDate}</span> <span class="comment-content">${Content}</span> <a href="#" class="replay">پاسخ</a> </div> </li> {{if Children.length>0}} <ul class="comment-wave child"> {{tmpl(Children) "#tmplComments"}} </ul> {{/if}} </script>

و کد html ما نیز به صورت زیر خواهد بود:

<div> <div class="comments"> <ul class="comment-wave parent"></ul> <div class="comment-area"> <div class="comment-send"> <a href="#">'); return false;" >ارسال</a> </div> &lt;input type="text" class="sender-name-input" placeholder="لطفا نام خود را وارد نمایید." /&gt; &lt;textarea class="comment-input send" placeholder="لطفا دیدگاه خود را بنویسید!"&gt;&lt;/textarea> </div> </div> </div>

Guid.Empty نشانه دهنده عدم وجود والد خواهد بود.

کد JQuery در مسیر js/comment.js موجود می باشد. این کد با کمی تفاوت در پروژه mvc گفته شده است.
کد css هم در مسیر css/comment.css موجو می باشد. این کد با کمی تفاوت در پروژه mvc گفته شده است.

برای مشاهده کامل پروژه، ما آن را در اختیار شما قرار می دهیم. می توانید آن را در ابتدای صفحه دریافت نمایید.
همچنین اگر راه دیگری برای پیاده سازی آن را می دانید، در سایت قرار دهید تا دیگران نیز از آن استفاده کنند.

منتظر نظرات سازنده شما هستیم.
پایان

+5
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی رضا

کارشناس نرم افزار. با هفت سال سابقه برنامه نویسی. در خدمت شما دوستان عزیز...

۲ دیدگاه ها

  1. سلام وقت بخیر
    ببخشید این آموزش ارسال دیدگاه در Asp.Net به صورت Ajax بصورت ویدیو هست یا متن؟

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


8 + = شانزده

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>