How to create a tryit html like w3 school?

Question

1.00/5 (10 votes)

See more:

Hi I am implementing a textbox for writing html and a form for displaying output of that html code in a form instantly as the user click on button for example:

http://w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1

Can any one provide me code in asp with c# please

Posted 21-Nov-10 1:06am

Sunil Tarwara

Updated 21-Nov-10 1:27am

Keith Barrow

v2

Add a Solution

Comments

Keith Barrow 21-Nov-10 7:27am

My Vote of 1: You haven't tried anything, just stated your requirements, then asked for the solution.

Richard MacCutchan 21-Nov-10 7:33am

Hint: go to the link you provided above and try right-clicking your mouse on it. You may be surprised at what you see.

[no name] 21-Nov-10 7:44am

Keith Barrow Nobody asked u to vote. Dont u have any job to do? hw can u day i havnt tried anything?

Manfred Rudolf Bihy 21-Nov-10 8:18am

Well he surely can say that. You haven't provided us with any information what you've tried, so we'll have to assume it was zilch, zero, nada (insert your favorite for nothing here). Besides that voting on questions and answers is what makes this whole CP stuff work. If you expect to be receiving anwsers here you'd better change your attitude. (Feeling tempted to remove / empty my answer right now) ;)

Keith Barrow 21-Nov-10 11:16am

Yes, I have a job. I lecture at a university, having spent the last ten years as a programmer at various large and prestigious companies. If I want to vote, that's my business, not yours. If you don't want to be voted down, I suggest you write questions according to the site guidelines. You'll notice other comments similar to mine.

OriginalGriff 21-Nov-10 11:28am

My vote of 1:
"Keith Barrow Nobody asked u to vote." Yes - you did when you posted a question here. Nearly everything can be voted on, here.
"Dont u have any job to do?" What would that matter? If we were all doing our day jobs, we wouldn't be answering here...
"hw can u day i havnt tried anything?" Oooh! Let me see your question: absence of code fragment, presence of "provide me code", lack of research, they will do for now.

Try to do something yourself. You never know, you might get good at it.

CPallini 21-Nov-10 11:33am

My vote of 1:
Please don't be silly while trying to be rude.

[no name] 21-Nov-10 11:38am

I do agree that my qn may not be up to the guideline but there may be a bit better way to tell me what was wrong. I respect knowledge and experience. by the way sorry for being straight forward.

[Edited to fix sms lingo]

Rajesh R Subramanian 21-Nov-10 12:19pm

You don't need to be sorry for being straight forward, but you should be sorry for being rude. Every such experience is a learning. And now that you have an answer for your question, just move on instead of arguing any more.

Abhinav S 21-Nov-10 12:56pm

Sunil - if you look at it from the reader's point of view, it does appear you have not tried. However, now that you have got the answer to your problem, I believe that all has ended well. Next time you can post a code snippet or two.

3 solutions

Solution 3

It can be done entirely client-side with javascript. Look into document.write.

Posted 21-Nov-10 2:09am

LloydA111

Comments

Manfred Rudolf Bihy 21-Nov-10 8:14am

No need for document.write, look at my sample above :) .

LloydA111 21-Nov-10 9:24am

Document.write means there is no extra load on the server, theres no need for something like this to run on the server unless you really want it to.

Manfred Rudolf Bihy 21-Nov-10 9:28am

Hmm, you've probably not looked at my solution, considering your comment. My solution works purely by utilizing good ol' javascript and nothin' more :) You must be talking about Ed's sample.

LloydA111 21-Nov-10 9:29am

Oops yes I was :)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ed Guzman · Accepted Answer · 2010-11-21T01:33:00

The simplest way to do it, see below.
Don't forget to set ValidateRequest=false.
For .NET 4.0 it also needed to add into your web.config file the following line

XML

<system.web>
      <httpRuntime requestValidationMode="2.0" />
        <compilation debug="true" targetFramework="4.0" />
    </system.web>

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CodeProjectWeb.WebForm1"
    ValidateRequest="false" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnClick" runat="server" Text="show" OnClick="btnClick_Click" /><br />
                    <asp:TextBox runat="server" ID="txtText" TextMode="MultiLine" Rows="5" Columns="50"></asp:TextBox>
                </td>
                <td valign="top">
                    <%if (this.IsPostBack) { Response.Write(Server.HtmlDecode((txtText.Text))); } %>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Good luck.

Manfred Rudolf Bihy · Accepted Answer · 2010-11-21T02:05:00

Hello Sunil,

Keith is absolutely right with what he said, but since I'm in my typical mellow weekend mode I'll let you have this for starters:

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	    <title>Quick shot</title>
    </head>
	<body>
		<input style="margin-bottom:5px;font-family:verdana;" name="submit" type="submit" value="Edit and Click Me >>" onclick="doDisplay()">
		<textarea id="sourceCode" style="width:400px; height: 300px" name="code" wrap="logical" orows="21" ocols="42">
			<p>This is a paragraph.</p>
			<p>This is a paragraph.</p>
			<p>This is a paragraph.</p>
		</textarea>
		Your Result:
		<div id="displayHtml" style="width: 500px; height: 500px; border: 2px solid red;">
		</div>
	</body>
	<script type="text/javascript">
		function doDisplay()
		{
			var destination = document.getElementById("displayHtml");
			var sourceCode = document.getElementById("sourceCode").innerText;
			alert(sourceCode);
			destination.innerHTML = sourceCode;
		}
	</script>
</html>

If you want to do some work yourself, go pep it up to use iframes like in the w3school sample. Textareas innerText is put into the div's innerHtml. Presto, no magic involved.

Cheers

Manfred

How to create a tryit html like w3 school?

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0