Showing comments without reloading page

Question

The code below get me a comment , puts it in the database and then waits for a page reload to show the comment. How can i make the submited comment to be shown right after it has been posted along with the new ones ? This is the code that does the stuff : Layout:

<table>
                    <tr>
                        <td colspan="2">All Comments</td>
                        <td>
                            &nbsp
                        </td>
                    </tr>
                    <tr> <td colspan="2"> </td></tr>
                    <tr>
                        <td>
                            <asp:Repeater ID="Repeater1" runat="server" ItemType="SiteStiri.Models.Comments" SelectMethod="GetComments" >
                                <ItemTemplate>
                                    <table>
                                        <tr>
                                            <td colspan="2">
                                                <asp:Label id="lblDate" runat="server" Text='<%# Item.ReleaseDate  %>'></asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                <asp:Label ID="lblComment" runat="server" Text='<%# Item.Comment %>'>

                                                </asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                <SeparatorTemplate>
                    <hr />
                </SeparatorTemplate>
                <AlternatingItemTemplate>
                    <table>
                                        <tr>
                                            <td colspan="2">
                                                <asp:Label id="Label1" runat="server" Text='<%# Item.ReleaseDate  %>'></asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                <asp:Label ID="Label2" runat="server" Text='<%# Item.Comment %>'>

                                                </asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                </AlternatingItemTemplate>
                </asp:Repeater>
              </td>
            </tr>
            </table>

            </td>
            </tr>
            <td>
                <table>
                    <tr>
                        <td colspan="2" >Add Your Comment</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Label ID="lblStatus" runat="server" Visible="False"></asp:Label>
                        </td>
                        <td>
                            &nbsp
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <asp:TextBox ID="txtcomment" runat="server" TextMode="MultiLine">

                            </asp:TextBox>
                        </td>
                        <td>
                            &nbsp
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
                        </td>
                        <td>
                            &nbsp
                        </td>
                    </tr>
                    </table>
                </table>
            </td>
        </tr>
    </table>

Code Behind:

 public void fnSubmitComment()
        {
            AddComment cmt = new AddComment();
            String x = Request.QueryString["newsID"].ToString();
            int y = Convert.ToInt32(x);
            bool addSucces = cmt.Addcomment( y , txtcomment.Text);

            if (addSucces)
            {
                lblStatus.Text = "Your Comment has been Added Successfully.";
            }
            else
            {
                lblStatus.Text = "Your Comment has not been Added.";
            }
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            fnSubmitComment();
        }

        public IQueryable<Comments> GetComments()
        {
            var _db = new SiteStiri.Models.CommentsContext();
            IQueryable<Comments> query = _db.Comments;
            String x = Request.QueryString["newsID"].ToString();
            int y = Convert.ToInt32(x);
            query = query.Where(p => p.NewsID == y);

            return query;
        }

I heard i can do that with ajax ? (My knowledge about ajax is 0 currently) Any tips on how i can do this ?

@Fabio mind telling me how to use it. I wrapped my repeater in an UpdatePanel and after fnSubmitComment() i do UpdatePanel1.Update() but it doesn't seem to show me the new comments — Lucian Tarna
– Lucian Tarna, Commented Nov 7, 2014 at 11:54

Fabio · Accepted Answer · 2014-11-07 12:05:49Z

You must wrapper you repeater in an updatepanel, set UpdateMode="Conditional" and add a trigger on btnSubmit so when click the button the update the repeater with the normal page life cycle

Remember to bind the repeater after that you add the commet in the codebehind and must be present in your page a ScriptManager control

more or less thus

<asp:ScriptManager runat="server" />
  <table>
            <tr>
                <td colspan="2">All Comments</td>
                <td>&nbsp
                </td>
            </tr>
            <tr>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td>
                    <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Repeater ID="Repeater1" runat="server" ItemType="SiteStiri.Models.Comments" SelectMethod="GetComments">
                                <ItemTemplate>
                                    <table>
                                        <tr>
                                            <td colspan="2">
                                                <asp:Label ID="lblDate" runat="server" Text='<%# Item.ReleaseDate  %>'></asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                <asp:Label ID="lblComment" runat="server" Text='<%# Item.Comment %>'>

                                                </asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                                <SeparatorTemplate>
                                    <hr />
                                </SeparatorTemplate>
                                <AlternatingItemTemplate>
                                    <table>
                                        <tr>
                                            <td colspan="2">
                                                <asp:Label ID="Label1" runat="server" Text='<%# Item.ReleaseDate  %>'></asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                <asp:Label ID="Label2" runat="server" Text='<%# Item.Comment %>'>

                                                </asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </AlternatingItemTemplate>
                            </asp:Repeater>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnSubmit" />
                        </Triggers>
                    </asp:UpdatePanel>

                </td>
            </tr>

            <tr>

                <td>
                    <table>
                        <tr>
                            <td colspan="2">Add Your Comment</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Label ID="lblStatus" runat="server" Visible="False"></asp:Label>
                            </td>
                            <td>&nbsp
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2">
                                <asp:TextBox ID="txtcomment" runat="server" TextMode="MultiLine">

                                </asp:TextBox>
                            </td>
                            <td>&nbsp
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
                            </td>
                            <td>&nbsp
                            </td>
                        </tr>
                    </table>

                </td>
            </tr>
        </table>

Worth mentioning that you must have an instance of <asp:ScriptManager runat="server"> somewhere on the page
yes perfect. I was doing this , i didn't know i had also to bind the data to Repeater1 but it makes sense . Thank you mr fabio!

Collectives™ on Stack Overflow

Showing comments without reloading page

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related