locked
Issue to Text editing area RRS feed

Answers

  • User-1330468790 posted

    Hi wmec,

     

    What you should do is to assign the "new" text area with a name property so that you could use this name to fetch the value from Request.Form in code behind.

    One thing that you need to be aware of : the request validation for potential dangerous in ASP.NET.

    In order to get rich text  from server side, you have to turn off the request validation for both pages and http runtime.

     

    You could refer to below demo codes.

    aspx Page: 

    <%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true" CodeBehind="DynamicallyAddingText.aspx.cs" Inherits="WebformsProject.DynamicallyAddingText" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="CommentArea" runat="server">
                    <ul id="fieldList"></ul>
                </div>
                <button type="button" id="addMore" rel="1" name="button">Another Comment</button>
                <asp:Button ID="submitButton" runat="server" Text="Submit" OnClick="submitButton_Click" />
                <div id="showDataDiv" runat="server">
                    Result:<br/>
                    <asp:Label ID="DisplayInputLabel" runat="server"></asp:Label>
                </div>
            </div>
    
            <script>
                var i = 1;
                $(function () {
                    $("#addMore").click(function (e) {
                        e.preventDefault();
                        
                        $("#fieldList").append("<li>Comment" + i +": <textarea id='comment-" + i + "' name='postDesc' placeholder='comment description'></textarea></li>");
                        CKEditorChange('comment-' + $(this).attr('rel'));
                        $(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
                        i++;
                    });
                });
    
                function CKEditorChange(name) {
    
                    CKEDITOR.replace(name);
                }
            </script>
        </form>
    </body>
    </html>

    web.config:

    <configuration>
        <system.web>
            <httpRuntime requestValidationMode="2.0" />
            <pages validateRequest="false">
        </system.web>
    </configuration>

    Code behind:

     protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void submitButton_Click(object sender, EventArgs e)
            {
                string[] comments = Request.Form.GetValues("postDesc");
                DisplayInputLabel.Text = string.Join("",comments);
            }

    Demo:

      

    Related documentation

    Disabling request validation for your application:

    https://docs.microsoft.com/en-us/aspnet/whitepapers/request-validation#disabling-request-validation-for-your-application

    Disabling Request Validation in ASP.NET Web Forms (ASP.NET 4 or later): 

    https://docs.microsoft.com/en-us/previous-versions/aspnet/hh882339(v=vs.110)#disabling-request-validation-in-aspnet-web-forms-aspnet4-or-later

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 13, 2021 4:04 AM

All replies

  • User-1330468790 posted

    Hi wmec,

     

    I already checked the source code and found that you were using CKEditor 4, correct?

     

    Regarding your question, "Is there any advice to dynamically add relevant Text editing area below".

    What I can suggest is:

    • Add it from the frontend side with js: You could use a button "addMore" and when you click it, you will append input/textarea at the desired place and call the function 'CKEDITOR.replace(name);' to generate an rich text area. Please refer to this for detailed codes https://stackoverflow.com/a/50728963/12871232

    The reason why I do not recommend adding the textarea from code behind is that the controls would not keep the states and the js might not be able to execute due to the postback

      

    Hope this helps.

    Best regards,

    Sean

    Monday, January 11, 2021 10:52 AM
  • User364663285 posted

    Hi,
    Thanks. How about that it would still need Code behind code to further save details of "new" Text area into other places?

    Tuesday, January 12, 2021 10:14 AM
  • User-1330468790 posted

    Hi wmec,

     

    What you should do is to assign the "new" text area with a name property so that you could use this name to fetch the value from Request.Form in code behind.

    One thing that you need to be aware of : the request validation for potential dangerous in ASP.NET.

    In order to get rich text  from server side, you have to turn off the request validation for both pages and http runtime.

     

    You could refer to below demo codes.

    aspx Page: 

    <%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true" CodeBehind="DynamicallyAddingText.aspx.cs" Inherits="WebformsProject.DynamicallyAddingText" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="CommentArea" runat="server">
                    <ul id="fieldList"></ul>
                </div>
                <button type="button" id="addMore" rel="1" name="button">Another Comment</button>
                <asp:Button ID="submitButton" runat="server" Text="Submit" OnClick="submitButton_Click" />
                <div id="showDataDiv" runat="server">
                    Result:<br/>
                    <asp:Label ID="DisplayInputLabel" runat="server"></asp:Label>
                </div>
            </div>
    
            <script>
                var i = 1;
                $(function () {
                    $("#addMore").click(function (e) {
                        e.preventDefault();
                        
                        $("#fieldList").append("<li>Comment" + i +": <textarea id='comment-" + i + "' name='postDesc' placeholder='comment description'></textarea></li>");
                        CKEditorChange('comment-' + $(this).attr('rel'));
                        $(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
                        i++;
                    });
                });
    
                function CKEditorChange(name) {
    
                    CKEDITOR.replace(name);
                }
            </script>
        </form>
    </body>
    </html>

    web.config:

    <configuration>
        <system.web>
            <httpRuntime requestValidationMode="2.0" />
            <pages validateRequest="false">
        </system.web>
    </configuration>

    Code behind:

     protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void submitButton_Click(object sender, EventArgs e)
            {
                string[] comments = Request.Form.GetValues("postDesc");
                DisplayInputLabel.Text = string.Join("",comments);
            }

    Demo:

      

    Related documentation

    Disabling request validation for your application:

    https://docs.microsoft.com/en-us/aspnet/whitepapers/request-validation#disabling-request-validation-for-your-application

    Disabling Request Validation in ASP.NET Web Forms (ASP.NET 4 or later): 

    https://docs.microsoft.com/en-us/previous-versions/aspnet/hh882339(v=vs.110)#disabling-request-validation-in-aspnet-web-forms-aspnet4-or-later

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 13, 2021 4:04 AM
  • User364663285 posted

    Hi,
    Thanks a lot.
    I added the button but relevant event is not fired properly below. Can you help?

    http://www.MyFavouriteEShop.com/Chat0/Default.aspx?user_id=6

    How to fire relevant event from this new button?

    Thursday, January 14, 2021 3:32 AM
  • User-1330468790 posted

    Hi wmec,

      

    There are two errors when you test/integrate the codes with your project.

    1. The "id" of the button is not "addMore" so that you cannot use jQuery to select it and assign it with the click event handler.
    2. You should add an unordered list <ul> in your page with "id = 'fieldList' " in element attributes.

    Apart from that, though I use "e.preventDefault()" to prevent a post back, it would be better to change the button type from "input-submit" to "input-button".

    From:

    <input type="submit" name="Button1" value="Another Comment" id="Button1" class="forbutton" style="width:140px;"> 

    To:

    <input type="button" name="Button1" value="Another Comment" id="addMore" class="forbutton" style="width:140px;"> 

      

    Best regards,

    Sean

    Thursday, January 14, 2021 6:40 AM
  • User364663285 posted

    Hi,
    Sorry to that, it is not OK after I've put the following

    <asp:Button ID="addMore" type="button" runat="server" Width="140px" Text="Another Comment" CssClass="forbutton" />



    Thursday, January 14, 2021 8:35 AM
  • User-1330468790 posted

    Hi wmec,

     

    If you debug in browser pressing F12 (dev tools), you will find that the <asp:button> will be rendered as <input type="submit">.

    The <asp:button> is a server control which is designed for webforms framework, especially for the postback feature

     

    You could use html control <input> in the project.

    Currently I can only see your rendered page using browser. It would be better to show us your codes. Including:

    • aspx page with controls
    • code behind
    • other resources (js, css for appearance of the web page), which could be cdn links or just resource name + version

      

    Hope helps.

    Best regards,

    Sean

    Friday, January 15, 2021 2:37 AM