ارسال نظر تو در تو به صورت Ajax در Asp.Net

پنجشنبه 22 مرداد 1394

در این مقاله قصد داریم یک سیستم نظر دهی به صورت تو در تو و با استفاده از Update Panel را در Asp.Net WebForms پیاده سازی کنیم .

 ارسال نظر تو در تو  به صورت Ajax در  Asp.Net

ابتدا یک بانک اطلاعاتی با نام CommentsAsp_DB ایجلاد میکنیم

سپس سک جدول با نام Comments به شکل زیر ایجاد میکنیم

اسکریپت ساخت جدول :

USE [CommentsAsp_DB]
GO

/****** Object:  Table [dbo].[Comments]    Script Date: 08/12/2015 15:42:08 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Comments](
	[CommentID] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nvarchar](250) NOT NULL,
	[Text] [nvarchar](500) NOT NULL,
	[Date] [datetime] NOT NULL,
	[ParentID] [int] NULL,
 CONSTRAINT [PK_Comments] PRIMARY KEY CLUSTERED 
(
	[CommentID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

ALTER TABLE [dbo].[Comments]  WITH CHECK ADD  CONSTRAINT [FK_Comments_Comments1] FOREIGN KEY([ParentID])
REFERENCES [dbo].[Comments] ([CommentID])
GO

ALTER TABLE [dbo].[Comments] CHECK CONSTRAINT [FK_Comments_Comments1]
GO


 

 

سپس یک پروژه با نام NestedComments_Asp ایجاد میکنیم و در آن یک WebForm با نام Default ایجاد میکنیم

در صفحه یک UpdatePanel و یک ScriptManager قرار میدهیم

سپس یک SqlDataSource در صفحه قرار میدهیم در قسمت Where به شکل زیر عمل میکنیم

با استفاده از مراحل بالا فقط رکوردهایی برگردانده میشوند که والد هستند

سپس یک Repeater قرر میدهیم برای نمایش نظر ها

داخل repeater جاری یک Repeater دیگر به همراه SqlDataSource قرار میدهیم

                    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="Repeater1_ItemCommand">
                        <ItemTemplate>
                            <div class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img alt="64x64" data-src="holder.js/64x64" class="media-object" style="width: 64px; height: 64px;" src="/Content/anonymous_user_profile.jpg" data-holder-rendered="true">
                                    </a>
                                </div>
                                <div class="media-body" style="padding: 5px; width: 100%">
                                    <h4 class="media-heading"><%#Eval("Name") %>
                                        <label class="badge pull-left"><%#Eval("Date","{0: dddd, dd MMMM yyyy - HH:mm}") %></label>
                                    </h4>
                                    <div>
                                        <%#Eval("Text") %>
                                    </div>
                                    <asp:Button ID="Button1" CssClass="btn btn-xs btn-primary pull-left" runat="server" Text="پاسخ" CommandArgument='<%#Eval("CommentID")%>'/>

                                    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:CommentsAsp_DBConnectionString3 %>" SelectCommand='<%#"Select * From Comments Where ParentID="+Eval("CommentID") %>' runat="server"></asp:SqlDataSource>
                                    <asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2">
                                        <ItemTemplate>
                                            <div class="media">
                                                <div class="media-left">
                                                    <a href="#">
                                                        <img alt="64x64" data-src="holder.js/64x64" class="media-object" style="width: 64px; height: 64px;" src="/Content/anonymous_user_profile.jpg" data-holder-rendered="true">
                                                    </a>
                                                  
                                                </div>
                                                <div class="media-body" style="padding: 5px">
                                                    <h4 class="media-heading"><%#Eval("Name") %></h4>
                                                    <%#Eval("Text") %>
                                                </div>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </div>
                            </div>
                           
                  <hr />
                        </ItemTemplate>
                    </asp:Repeater>

 

کد Select برای DataSource به شکل زیر است

SelectCommand='<%#"Select * From Comments Where ParentID="+Eval("CommentID") %>'

برای نمایش زیر مجموعه های رکورد جاری

در کنار هر نظر یک کلید پاسخ وجود دارد

 <asp:Button ID="Button1" CssClass="btn btn-xs btn-primary pull-left" runat="server" Text="پاسخ" CommandArgument='<%#Eval("CommentID")%>'/>

 

خاصیت CommandArgument را با ID خط جاری مقدار دهی کردیم

سپس در رویداد Item_Command از Repeater دستورات زیر را مینویسیم

        protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            int CommentID = Convert.ToInt32(e.CommandArgument.ToString());
            string Query = "Select * From Comments Where CommentID=@ID";
            SqlConnection connect = new SqlConnection(Connection);
            SqlCommand command = new SqlCommand(Query, connect);
            command.Parameters.AddWithValue("@ID", CommentID);
            connect.Open();
            SqlDataReader dr = command.ExecuteReader();
            if (dr.Read())
            {
                ParentID.Value = dr["CommentID"].ToString();
                lblName.Text="پاسخ به : "+dr["Name"].ToString();

            }
            connect.Close();
        }

در قسمت ثبت نظر یک HiddenField قرار دارد برای نگهداری ID والد که در صورت خالی بودن یعنی این نظر زیرمجموعه نیست

                 <div style="overflow: hidden;clear: both">
                        <div class="form-horizontal">
                            <div class="form-group" style="overflow: hidden" >
                     <div class="col-sm-2 col-md-2"></div>
                                <div class="col-sm-10 col-md-10">
                                    <asp:Label ID="lblName" runat="server" Text=""></asp:Label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">نام :</label>
                                <div class="col-sm-10">

                                    <asp:TextBox ID="txtName" placeholder="نام را وارد کنید" CssClass="form-control" runat="server"></asp:TextBox>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">متن نظر</label>
                                <div class="col-sm-10">
                                    <asp:TextBox ID="txtText" TextMode="MultiLine" placeholder="نظر را وارد کنید" CssClass="form-control" runat="server"></asp:TextBox>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <asp:Button ID="Button2" OnClick="Button2_Click" runat="server" CssClass="btn btn-success" Text="ثبت نظر" />
                                    <asp:HiddenField ID="ParentID" runat="server" />
                                </div>
                            </div>
                        </div>
                    </div>

در کلید ثبت نظر به شکل زیر عمل میکنیم

            SqlConnection connect=new SqlConnection(Connection);
            string Query = "Insert Into Comments (Name,Text,Date,ParentID) Values (@Name,@Text,@Date,@ParentID)";
            SqlCommand command=new SqlCommand(Query,connect);
            command.Parameters.AddWithValue("@Name",txtName.Text);
            command.Parameters.AddWithValue("@Text",txtText.Text);
            command.Parameters.AddWithValue("@Date", DateTime.Now);
            if (ParentID.Value != "")
            {
                command.Parameters.AddWithValue("@ParentID",ParentID.Value);
            }
            else
            {
                command.Parameters.AddWithValue("@ParentID", DBNull.Value);
            }
            connect.Open();
            command.ExecuteNonQuery();
            connect.Close();
            txtName.Text = "";
            txtText.Text = "";
            ParentID.Value = null;
            Repeater1.DataBind();
            lblName.Text ="";

 

خروجی کار به شکل زیر است

 

نمونه نیز ضمیمه شده

فایل های ضمیمه

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید