How do I allow HTML tags to be submitted in a textbox in asp.net?

asp.net-mvc, c#, decoding, javascript

Solution

before the page is submitted you need to html encode the textbox's value, with window.escape(...)

If you need the un-escaped text on the server side then use `HttpUtility.UrlDecode(...)` method.

very quick sample:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SO.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function makeSafe() {
            document.getElementById('TextBox1').value = window.escape(document.getElementById('TextBox1').value);
        };

        function makeDangerous() {
            document.getElementById('TextBox1').value = window.unescape(document.getElementById('TextBox1').value);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" onsubmit="makeSafe();">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="10" ClientIDMode="Static"></asp:TextBox>
    </div>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>


     <script>
         makeDangerous();
    </script>
</body>
</html>

Make these changes to your code:

<script type="text/javascript">
    $(document).ready(function () {
        makeDangerous();
        $("#freqQuestionsUserUpdateButton").click(function () {
            makeSafe();
            $("#updateFreqQuestionsUser").submit();
        });
    });

    // Adding an ID attribute to the inputs you want to validate is simplest
    // Better would be to use document.getElementsByTagName and filter the array on NAME
    // or use a JQUERY select....

    function makeSafe() {
        document.getElementById('QuestionAnswer').value = window.escape(document.getElementById('QuestionAnswer').value);
    };

    // In this case adding the HTML back to a textbox should be 'safe'
    // You should be very wary though when you use it as actual HTML
    // You MUST take steps to ensure the HTML is safe.
    function makeDangerous() {
        document.getElementById('QuestionAnswer').value = window.unescape(document.getElementById('QuestionAnswer').value);
    }
</script>

Problem

First, I want to let everyone know that I am using an aspx engine not a Razor engine. I have a table within a form. One of my textbox contains html tags like ``` </br>Phone: </br> 814-888-9999 </br> Email: </br> aaa@gmail.com. ``` When I go to build it it it gives me an error that says: A potentially dangerous Request.Form value was detected from the client `(QuestionAnswer="...ics Phone:<br/>814-888-9999<br...")`. I tried the validation request="false" but it did not work. I am sorry I didn't add my html code for you to look at so far. I am pulling some question up where I can edit it, if need be. ``` <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> EditFreqQuestionsUser </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> $(document).ready(function () { $("#freqQuestionsUserUpdateButton").click(function () { $("#updateFreqQuestionsUser").submit(); }); }); </script> <h2>Edit Freq Questions User </h2> <%Administrator.AdminProductionServices.FreqQuestionsUser freqQuestionsUser = ViewBag.freqQuestionsUser != null ? ViewBag.freqQuestionsUser : new Administrator.AdminProductionServices.FreqQuestionsUser(); %> <%List<string> UserRoleList = Session["UserRoles"] != null ? (List<string>)Session["UserRoles"] : new List<string>(); %> <form id="updateFreqQuestionsUser" action="<%=Url.Action("SaveFreqQuestionsUser","Prod")%>" method="post" onsubmit+> <table> <tr> <td colspan="3" class="tableHeader">Freq Questions User Details <input type ="hidden" value="<%=freqQuestionsUser.freqQuestionsUserId%>" name="freqQuestionsUserId"/> </td> </tr> <tr> <td colspan="2" class="label">Question Description:</td> <td class="content"> <input type="text" maxlength="2000" name="QuestionDescription" value=" <%=freqQuestionsUser.questionDescription%>" /> </td> </tr> <tr> <td colspan="2" class="label">QuestionAnswer:</td> <td class="content"> <input type="text" maxlength="2000" name="QuestionAnswer" value="<%=freqQuestionsUser.questionAnswer%>" /> </td> </tr> <tr> <td colspan="3" class="tableFooter"> <br /> <a id="freqQuestionsUserUpdateButton" href="#" class="regularButton">Save</a> <a href="javascript:history.back()" class="regularButton">Cancel</a> </td> </tr> </table> </form> </asp:Content> ```

Original source