CODEWITHSUNDEEP
javascriptasp.net
oJM86o
oJM86o

Reputation: 2118

Assign converted html to a serverside control

I'm using markdown and I've got some input such as **test** which makes the word test appear in bold test and I've converted it with html like so"

                var converter1 = Markdown.getSanitizingConverter();
                var editor1 = new Markdown.Editor(converter1);
                editor1.run();

                var d = document.getElementById("wmd_input");
                var html = converter1.makeHtml(d.value);
                alert(html);

And this alerts <b>test</b> the issue is I need to take this value, namely <b>test</b> and access this via server side code (asp.net). I tried assigning it to a variable like so:

                document.getElementById("Label1").value = html;

But it doesn't seem to work, when I go to the code behind it shows Label1 as being empty. Is this possible?

Edit

I tried to change it to a hidden field same issue:

<script type="text/javascript">
                (function () {
                    var converter1 = Markdown.getSanitizingConverter();
                    var editor1 = new Markdown.Editor(converter1);
                    editor1.run();

                    var d = document.getElementById("wmd_input");
                    var html = converter1.makeHtml(d.value);
                    alert(html);

                    document.getElementById('<%= h1.ClientID %>').value = html;
                    var h = document.getElementById('<%= h1.ClientID %>');
                    alert(h.value);
                })();
            </script>

The issue I have is I have an asp.net server side button that when clicked I try to do this:

Label1.Text = h1.Value;

That is to store the value from the hidden field to a label but this doesnt work. When I put a break point in it shows h1 is empty ""....So I'm not sure what event or how to do this so that when I make changes to my textarea wmd_input that i should be able to see these changes in my server side code...

Here's my entire asp.net form:

<html>
    <head>
        <title>PageDown Demo Page</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <script type="text/javascript" src="js/Markdown.Converter.js"></script>
        <script type="text/javascript" src="js/Markdown.Sanitizer.js"></script>
        <script type="text/javascript" src="js/Markdown.Editor.js"></script>
    </head>
    <body>
        <form id="myForm" runat="server">
            <div class="wmd-panel">
                <div id="wmd-button-bar"></div>
                <textarea cols="5" rows="5" id="wmd_input" class="wmd-input" runat="server"></textarea>
                <div id="wmd_preview" class="wmd-panel wmd-preview" runat="server"></div>
            </div>
            <asp:button id="Button1" runat="server" Text="Set" onclick="Button1_Click"></asp:button>
            <asp:button id="Button2" runat="server" Text="Get" onclick="Button2_Click"></asp:button><asp:label id="Label1" runat="server">Label</asp:label>
            <asp:HiddenField ID="h1" runat="server" EnableViewState="true" />
            <script type="text/javascript">
                (function () {
                    var converter1 = Markdown.getSanitizingConverter();
                    var editor1 = new Markdown.Editor(converter1);
                    editor1.run();

                    var d = document.getElementById("wmd_input");
                    var html = converter1.makeHtml(d.value);
                    alert(html);

                    document.getElementById('<%= h1.ClientID %>').value = html;
                    alert(document.getElementById('<%= h1.ClientID %>').value);
                })();
            </script>
        </form>
    </body>
</html>

Upvotes: 0

Views: 574

Answers (3)

McGarnagle
McGarnagle

Reputation: 102793

The asp:Label tag isn't an input control, so it won't get posted back to the server. I'd suggest using asp:HiddenField or asp:TextBox instead. (And Adil's point is crucial too, you need to make sure the client ID is actually what you think it is.)

Here's a test that works for me. On the first page load, the label shows "initial value", but the alert shows "updated". After postback, the label also shows "updated".

Edit Added the client-side update logic inside a client-side event handler.

<%@ Page Title="Test" Language="C#" AutoEventWireup="true" %>

<script runat="server">
    void Page_Load()
    {
        l1.Text = h1.Value;
    }
</script>

<html>
<body>
    <form runat="server">
        <asp:HiddenField runat="server" Value="initial value" ID="h1" />
        <asp:Label runat="server" ID="l1" />
        <asp:Button runat="server" Text="do postback" />
    </form>

    <script>
        document.getElementById('<%= Button1.ClientID %>').onclick = function () {
            document.getElementById('<%= h1.ClientID %>').value = 'updated';
            alert(document.getElementById('<%= h1.ClientID %>').value);
        };
    </script>
</body>
</html>

Upvotes: 1

shookdiesel
shookdiesel

Reputation: 277

you should be able to do what you want to do by using knockoutjs http://knockoutjs.com/examples/helloWorld.html You can use element binding.

Upvotes: 0

jrummell
jrummell

Reputation: 43107

Labels don't post. You will have to use an input or textarea element (<asp:TextBox>). If you don't want the user to see the markup source, you can also use an <asp:HiddenField>.

Upvotes: 1

Related Questions