locked
Text area issue RRS feed

Answers

  • User-939850651 posted

    Hi wmec,

    I use a fixed data table for testing only. You only need to query the relevant database to get data. When a user submits a comment, it means inserting data into the table.

    Here is simple test code:

    string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    fillComment();
                }
            }
    
            private DataTable getComment() {
               DataTable dt = new DataTable();
                using (SqlConnection conn = new SqlConnection(conStr))
                {
                    string query = "select CommentUser,Comment,CommentTime from CommentTable";
                    using (SqlCommand cmd = new SqlCommand(query, conn))
                    {
                        SqlDataAdapter sda = new SqlDataAdapter(cmd);
                        sda.Fill(dt);
                    }
                }
                return dt;
            }
    
            private void fillComment()
            {
                DataTable CommentTable = getComment();
                StringBuilder textArea = new StringBuilder();
                int i = 1;
                foreach (DataRow row in CommentTable.Rows)
                {
                    string content = row.ItemArray[0].ToString() + " : " + row.ItemArray[1].ToString();
                    int contentRow = content.Length / 60;
                    string comment = "<li><textarea id=\"currentComment" + i++ + "\" readonly=\"readonly\" style=\"border:0;width:440px;height:" + (contentRow + 1) * 15 + "px;resize:none\">" + content + "</textarea></li>";
                    textArea.Append(comment);
                    //textArea.Append("</br>");
                }
                Literal literal = new Literal();
                literal.Text = textArea.ToString();
                CommentList.Controls.Add(literal);
            }
    
            protected void submitButton_Click(object sender, EventArgs e)
            {
                //string[] comments = Request.Form.GetValues("MyEA");
                //for (int i = 0; i < comments.Length; i++)
                //{
                //    //comments[i].ToString(); //show or store comments[i] 
                //}
                //dt.Rows.Add("Myself", Comment1.Text.Replace("<p>", "").Replace("</p>", ""), DateTime.UtcNow.ToString());
                using (SqlConnection conn = new SqlConnection(conStr))
                {
                    conn.Open();
                    string query = "insert into CommentTable (CommentUser,Comment,CommentTime) values (@CommentUser,@Comment,@CommentTime)";
                    using (SqlCommand cmd = new SqlCommand(query, conn))
                    {
                        cmd.Parameters.AddWithValue("@CommentUser", "Myself");
                        cmd.Parameters.AddWithValue("@Comment", Comment1.Text.Replace("<p>", "").Replace("</p>", ""));
                        cmd.Parameters.AddWithValue("@CommentTime", DateTime.UtcNow.ToString());
                        cmd.ExecuteNonQuery();
                    }
                }
                fillComment();
            }

    In the database table you define, the column name or index may be different, and you need to modify it according to the situation.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 3, 2021 2:59 AM

All replies

  • User-939850651 posted

    Hi wmec,

    how to (dynamically on the page) allocate several Text area, by checking relevant table is already with several comments updated (or inserted) into it?

    According to your description, I am afraid I can't understand your requirement clearly. Do you want to add comment function to all replies (or comments)? Or do you want to achieve something else?

    As in the case you mentioned, you can get all the comments detail and do some operations on them (insert/update the database), and you can expand the new comment textarea by clicking the button. 

    Therefore I am confused about your request. If possible, please state your requirement more clearly and the problems you are encountering now.

    Best regards,

    Xudong Peng

    Friday, January 22, 2021 3:49 AM
  • User364663285 posted

    Hi,
    There is already several comments saved into relevant table.

    I mean the way to pick up all of them, and to show each in one Textarea, when loading/refreshing the page.

    Friday, January 22, 2021 4:23 AM
  • User-939850651 posted

    Hi wmec,

    I mean the way to pick up all of them, and to show each in one Textarea, when loading/refreshing the page.

    If you just want to display them, you only need to query related data from the database in Page_Load (according to certain query conditions, sorted by time, etc.), and add it to the Textarea control with a certain format (such as wrap, display style,etc).

    When a user submits a new comment, you only need to update it in button click event(Reset the text for Textarea control).

    Best regards,

    Xudong Peng

    Friday, January 22, 2021 10:29 AM
  • User753101303 posted

    Hi,

    You don't have yet chosen an approach for handlign data updates?

    If using Web Forms and want to show a list of controls you are using a control such as https://docs.microsoft.com/en-us/previous-versions/aspnet/ms228214(v=vs.100)

    With https://weblogs.asp.net/dwahlin/asp-net-4-5-web-forms-features-model-binding (which is a late addition and have less exposure) you can configure those controls to tell which method to use to insert, select, update and delete a row. As with MVC you can work with strongly typed data.

    Or you already chosed another approach but have some issue to use your approach all alogn with ckeditor ?

    Friday, January 22, 2021 10:50 AM
  • User364663285 posted

    Hi,
    Thanks to all.


    XuDong,
    There are already several comments saved into the table. 

    How to "dynamically" decide (based on select query; picking up comment from table) how many textarea there should be to show whatever comments from the table into the page?

    Friday, January 22, 2021 1:39 PM
  • User-939850651 posted

    Hi wmec,

    So, according to your description, do you want to set a text field for each comment to display it?

    If this is the case, after you query the database based on certain conditions, you get the relevant comment data (DataTable), and then you could traverse these data and process each row (comment information) of datatable  and manually create controls to display them. Create a new textarea control for each row, and add comment information as text to the textarea.

    Or what else do you want to achieve?

    Best regards,

    Xudong Peng

    Tuesday, January 26, 2021 7:34 AM
  • User364663285 posted

    Hi XuDong,
    It does depend on how many comments are already existing in the table. Suppose it is getting 4 or 5 comments from the table, do you have the example to allocate exact number of TextArea, regarding these comments (from table)?

    Tuesday, January 26, 2021 8:53 AM
  • User-939850651 posted

    Hi wmec,

    protected void Page_Load(object sender, EventArgs e)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("User");
                dt.Columns.Add("Comment");
                dt.Columns.Add("CommentTime");
                dt.Rows.Add("User1","This is comment content.","2020-07-13");
                dt.Rows.Add("User2", "This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.", "2020-10-05");
                dt.Rows.Add("User3", "This is comment content.This is comment content.This is comment content.", "2020-12-24");
                dt.Rows.Add("User4", "This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.", "2021-01-14");
                StringBuilder textArea = new StringBuilder();
                foreach (DataRow row in dt.Rows) {
                    string content = row.ItemArray[0].ToString() +" : "+ row.ItemArray[1].ToString();
                    int contentRow = content.Length / 60; //Calculate the number of rows displayed based on the comment
                    string comment = "<textarea readonly=\"readonly\" style=\"border:0;width:440px;height:" + (contentRow +1)*15 + "px;resize:none\">"+ content + "</textarea>";
                    textArea.Append(comment);
                    textArea.Append("</br>");
                }
                Literal literal = new Literal();
                literal.Text = textArea.ToString();
                CommentArea.Controls.Add(literal);
            }
    <body>
        <form id="form1" runat="server">
            <h3>Here is comment title</h3>
            <div runat="server" id="CommentArea">
                //add textarea here
            </div>
        </form>
    </body>

    Result:

    Best regards,

    Xudong Peng

    Wednesday, January 27, 2021 3:54 AM
  • User364663285 posted

    Hi,

    Thanks a lot. What should be the approach if my comments are like

            <div>
                <ul id="CommentList">
                    <li>评论 1: <textarea id="Comment1" name="MyEA" runat="server"></textarea></li>
                </ul>
            </div>
    
            <input type="button" name="Button1" value="新评论" id="addMore" class="forbutton" style="width: 140px;">
            <script type="text/javascript">
                CKEDITOR.replace('Comment1', { toolbar: 'Mybar', readOnly: false });
    
                var i = 1;
                $(function () {
                    $("#addMore").click(function (e) {
                        e.preventDefault();
    
                        i++;
                        $("#CommentList").append("<li>评论 " + i + ": <textarea id='Comment" + i + "' name='postDesc' placeholder='comment description'></textarea></li>");
                        //CKEditorChange('comment-' + $(this).attr('rel'));i
                        CKEditorChange('Comment' + i);
                        //$(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
                    });
                });
    
                function CKEditorChange(name) {
                    CKEDITOR.replace(name);
                }
            </script>
    

    Wednesday, January 27, 2021 7:05 AM
  • User-939850651 posted

    Hi wmec,

    Your own comments should also be stored in the database, and then displayed on the page after querying.

    If you want to use server controls, use Textbox controls and set TextMode="MultiLine", which will also be rendered as textarea elements. This is a simple example:

    <body>
        <form id="form1" runat="server">
            <div>
                <h3>Here is Comment title</h3>
                <ul id="CommentList" runat="server">
                </ul>
                        Comment 1:  
            <%--<textarea id="Comment1" name="MyEA" runat="server"></textarea>--%>
                <asp:TextBox runat="server" ID="Comment1" TextMode="MultiLine"/><br />
            <input type="button" name="Button1" value="new Comment" id="addMore" class="forbutton" style="width: 140px;" />
            <asp:Button ID="submitButton" runat="server" Text="Submit" OnClick="submitButton_Click" />
            </div>
        </form>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
    <script type="text/javascript">
        CKEDITOR.replace('Comment1', { toolbar: 'Mybar', readOnly: false });
    
        var i = 1;
        $(function () {
            $("#addMore").click(function (e) {
                e.preventDefault();
    
                i++;
                $("#CommentList").append("<li>Comment " + i + ": <textarea id='Comment" + i + "' name='MyEA' placeholder='comment description'></textarea></li>");
                //CKEditorChange('comment-' + $(this).attr('rel'));i
                CKEditorChange('Comment' + i);
                //$(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
            });
        });
    
        function CKEditorChange(name) {
            CKEDITOR.replace(name);
        }
    </script>
    public static DataTable dt;
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    dt = new DataTable();
                    dt.Columns.Add("User");
                    dt.Columns.Add("Comment");
                    dt.Columns.Add("Date");
                    dt.Rows.Add("User1", "This is comment content.", "2020-07-13");
                    dt.Rows.Add("User2", "This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.", "2020-10-05");
                    dt.Rows.Add("User3", "This is comment content.This is comment content.This is comment content.", "2020-12-24");
                    dt.Rows.Add("User4", "This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.This is comment content.", "2021-01-14");
                    fillComment();
                }
            }
    
            private void fillComment()
            {
                StringBuilder textArea = new StringBuilder();
                foreach (DataRow row in dt.Rows)
                {
                    string content = row.ItemArray[0].ToString() + " : " + row.ItemArray[1].ToString();
                    int contentRow = content.Length / 60;
                    string comment = "<li><textarea readonly=\"readonly\" style=\"border:0;width:440px;height:" + (contentRow + 1) * 15 + "px;resize:none\">" + content + "</textarea></li>";
                    textArea.Append(comment);
                    //textArea.Append("</br>");
                }
                Literal literal = new Literal();
                literal.Text = textArea.ToString();
                CommentList.Controls.Add(literal);
            }
    
            protected void submitButton_Click(object sender, EventArgs e)
            {
                //string[] comments = Request.Form.GetValues("MyEA");
                //for (int i = 0; i < comments.Length; i++)
                //{
                //    //comments[i].ToString(); //show or store comments[i] 
                //    string time = DateTime.UtcNow.ToString();
                //    dt.Rows.Add("Myself", comments[i].ToString(), time);
                //}
                dt.Rows.Add("Myself", Comment1.Text.Replace("<p>", "").Replace("</p>", ""), DateTime.UtcNow.ToString());
    
                fillComment();
            }

    The data in it are just the proposed data I used for testing, and you need to get these data from the table.

    User information should be obtained from other storage locations, such as Session or Cookie.

    Result:

    Best regards,

    Xudong Peng

    Thursday, January 28, 2021 3:44 AM
  • User364663285 posted

    Hi Xudong,
    I already have saved several comments into relevant table.

    Further to that, I expect to retrieve all those comments into another new page. How to dynamically create proper number of Textarea (like the following) within web page?

            <div>
                <ul id="CommentList">
                    <li>评论 1: <textarea id="Comment1" name="MyEA" runat="server"></textarea></li>
                </ul>
            </div>
    

    Thursday, January 28, 2021 7:04 AM
  • User-939850651 posted

    Hi wmec,

    Further to that, I expect to retrieve all those comments into another new page. How to dynamically create proper number of Textarea (like the following) within web page?

    As I mentioned before, you only need to traverse the retrieved data, then display these comments in the desired format, and finally feed back to the page.

    You can perform the initial comment loading in Page_Load, and then update the relevant comments through the user's submit button event. Or use Ajax to achieve the same function.

    If I misunderstood anything, could you describe your problem more clearly?

    Best regards,

    Xudong Peng

    Friday, January 29, 2021 4:22 AM
  • User364663285 posted

    Hi,
    Are you sure that it would shown several Textarea (like the following), if there's several comments existing in relevant table, per your current demonstration?

    https://1drv.ms/u/s!Ai8CrEskdewXvDEBEOIk3RRdpQWm?e=8zvvLg

    Friday, January 29, 2021 9:23 AM
  • User-939850651 posted

    Hi wmec,

    Do you want to display these textareas with rich text style?

    If this is the case, you can use script code to display these textarea with rich text style after the page is loaded.

    Something like this:

    <script type="text/javascript">
        CKEDITOR.replace('Comment1', { toolbar: 'Mybar', readOnly: false });
    
        var i = 1;
        $(function () {
            $('textarea[id*="currentComment"]').each(function () {
                var id = $(this).attr('id');
                //console.log(id)
                CKEditorChange(id);
            })
            $("#addMore").click(function (e) {
                e.preventDefault();
    
                i++;
                $("#CommentList").append("<li>Comment " + i + ": <textarea id='Comment" + i + "' name='MyEA' placeholder='comment description'></textarea></li>");
                //CKEditorChange('comment-' + $(this).attr('rel'));i
                CKEditorChange('Comment' + i);
                //$(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
            });
        });
    
        function CKEditorChange(name) {
            CKEDITOR.replace(name);
        }
    </script>
    private void fillComment()
            {
                StringBuilder textArea = new StringBuilder();
                int i = 1;
                foreach (DataRow row in dt.Rows)
                {
                    string content = row.ItemArray[0].ToString() + " : " + row.ItemArray[1].ToString();
                    int contentRow = content.Length / 60;
                    string comment = "<li><textarea id=\"currentComment"+ i++ + "\" readonly=\"readonly\" style=\"border:0;width:440px;height:" + (contentRow + 1) * 15 + "px;resize:none\">" + content + "</textarea></li>";
                    textArea.Append(comment);
                    //textArea.Append("</br>");
                }
                Literal literal = new Literal();
                literal.Text = textArea.ToString();
                CommentList.Controls.Add(literal);
            }

    Best regards,

    Xudong Peng

    Monday, February 1, 2021 8:13 AM
  • User364663285 posted

    Hi,

    Can you adjust your way (in event fillComment) to pick up the comment from one table instead?

    Tuesday, February 2, 2021 7:14 AM
  • User-939850651 posted

    Hi wmec,

    I use a fixed data table for testing only. You only need to query the relevant database to get data. When a user submits a comment, it means inserting data into the table.

    Here is simple test code:

    string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    fillComment();
                }
            }
    
            private DataTable getComment() {
               DataTable dt = new DataTable();
                using (SqlConnection conn = new SqlConnection(conStr))
                {
                    string query = "select CommentUser,Comment,CommentTime from CommentTable";
                    using (SqlCommand cmd = new SqlCommand(query, conn))
                    {
                        SqlDataAdapter sda = new SqlDataAdapter(cmd);
                        sda.Fill(dt);
                    }
                }
                return dt;
            }
    
            private void fillComment()
            {
                DataTable CommentTable = getComment();
                StringBuilder textArea = new StringBuilder();
                int i = 1;
                foreach (DataRow row in CommentTable.Rows)
                {
                    string content = row.ItemArray[0].ToString() + " : " + row.ItemArray[1].ToString();
                    int contentRow = content.Length / 60;
                    string comment = "<li><textarea id=\"currentComment" + i++ + "\" readonly=\"readonly\" style=\"border:0;width:440px;height:" + (contentRow + 1) * 15 + "px;resize:none\">" + content + "</textarea></li>";
                    textArea.Append(comment);
                    //textArea.Append("</br>");
                }
                Literal literal = new Literal();
                literal.Text = textArea.ToString();
                CommentList.Controls.Add(literal);
            }
    
            protected void submitButton_Click(object sender, EventArgs e)
            {
                //string[] comments = Request.Form.GetValues("MyEA");
                //for (int i = 0; i < comments.Length; i++)
                //{
                //    //comments[i].ToString(); //show or store comments[i] 
                //}
                //dt.Rows.Add("Myself", Comment1.Text.Replace("<p>", "").Replace("</p>", ""), DateTime.UtcNow.ToString());
                using (SqlConnection conn = new SqlConnection(conStr))
                {
                    conn.Open();
                    string query = "insert into CommentTable (CommentUser,Comment,CommentTime) values (@CommentUser,@Comment,@CommentTime)";
                    using (SqlCommand cmd = new SqlCommand(query, conn))
                    {
                        cmd.Parameters.AddWithValue("@CommentUser", "Myself");
                        cmd.Parameters.AddWithValue("@Comment", Comment1.Text.Replace("<p>", "").Replace("</p>", ""));
                        cmd.Parameters.AddWithValue("@CommentTime", DateTime.UtcNow.ToString());
                        cmd.ExecuteNonQuery();
                    }
                }
                fillComment();
            }

    In the database table you define, the column name or index may be different, and you need to modify it according to the situation.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 3, 2021 2:59 AM
  • User364663285 posted

    Hi,

    Can you help to error

    [IndexOutOfRangeException: Index was outside the bounds of the array.]
       Chat0._Default.fillComment() +325
       Chat0._Default.Page_Load(Object sender, EventArgs e) +1549
       System.Web.UI.Control.OnLoad(EventArgs e) +106
       System.Web.UI.Control.LoadRecursive() +68
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3785

    of code below

            <div>
                <ul id="CommentList">
                    <li>评论 1: <textarea id="Comment1" name="MyEA" runat="server"></textarea></li>
                </ul>
            </div>
    
            <input type="button" name="Button1" value="新评论" id="addMore" class="forbutton" style="width: 140px;">
            <script type="text/javascript">
                CKEditorChange('Comment1');
                $('#Comment1').attr("name", "MyEA");
    
                var i = 1;
                $(function () {
                    $('textarea[id*="currentComment"]').each(function () {
                        var id = $(this).attr('id');
                        //console.log(id)
                        CKEditorChange(id);
                    })
                    $("#addMore").click(function (e) {
                        e.preventDefault();
    
                        i++;
                        $("#CommentList").append("<li>评论 " + i + ": <textarea id='Comment" + i + "' name='MyEA' placeholder='comment description'></textarea></li>");
                        //CKEditorChange('comment-' + $(this).attr('rel'));i
                        CKEditorChange('Comment' + i);
                        //$(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
                    });
                });
    
                function CKEditorChange(name) {
                    CKEDITOR.replace(name);
                }
            </script>
    ...
            private void fillComment()
            {
                DataTable CommentTable = getComment();
                StringBuilder textArea = new StringBuilder();
                int i = 1;
                foreach (DataRow row in CommentTable.Rows)
                {
                    string content = row.ItemArray[0].ToString() + " : " + row.ItemArray[1].ToString();
                    int contentRow = content.Length / 60;
                    string comment = "<li><textarea id=\"currentComment" + i++ + "\" readonly=\"readonly\" style=\"border:0;width:440px;height:" + (contentRow + 1) * 15 + "px;resize:none\">" + content + "</textarea></li>";
                    textArea.Append(comment);
                    //textArea.Append("</br>");
                }
                Literal literal = new Literal();
                literal.Text = textArea.ToString();
                Comment1.Controls.Add(literal);
            }
    

    Thursday, February 4, 2021 2:45 AM
  • User-939850651 posted

    Hi wmec,

    [IndexOutOfRangeException: Index was outside the bounds of the array.]
       Chat0._Default.fillComment() +325
       Chat0._Default.Page_Load(Object sender, EventArgs e) +1549
       System.Web.UI.Control.OnLoad(EventArgs e) +106
       System.Web.UI.Control.LoadRecursive() +68
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3785

    I think the problem should be here:

    string content = row.ItemArray[0].ToString() + " : " + row.ItemArray[1].ToString();

    As I mentioned before, the table structure you use may be different from the data table I used for testing. You need to modify it according to your own situation. 

    In my test:

    You can also use the field name to get the value of each row. Something like this:

    string content = row.Field<string>("CommentUser").ToString() + " : " + row.Field<string>("Comment").ToString();

    I think you can also learn to use the debugger in VS to help find the cause of the problem.

    Best regards,

    Xudong Peng

    Thursday, February 4, 2021 7:30 AM