Home > 2010 Winter BTI420 > Introducing JavaScript components into your ASP.NET Web Forms web site

Introducing JavaScript components into your ASP.NET Web Forms web site


Web sites typically include JavaScript components to enhance functionality. We will learn about two today, CKEditor, and SyntaxHighlighter.

In your web site, you may want to enable a browser user to perform rich text editing.  Although this capability is typically built in to modern web browsers, an add-on component, written in JavaScript, better exposes the functionality. We will use a top-rated component, called CKEditor.

You also may want to display computer language source code in a “marked up” form that shows coloured language elements (e.g. syntax). An add-on component, written in JavaScript, performs this work. We will use a top-rated component, called SyntaxHighlighter.
.

Rich text editing in a browser with CKEditor

Use your favourite search engine to locate CKEditor.

Follow these instructions to implement CKEditor in your ASP.NET Web Forms web site. The instructions have been customized for our needs in BTI420.

.

1. Download and unzip

Download the latest version. (As of March 22 2010, it’s version 3.2.) Unzip it to a folder.

.

2. Remove the non-essential files

Navigate to your unzipped folder, and then into the “ckeditor” folder. Delete the “_source” folder. Also, delete the “.htaccess” file.

.

3. Copy the “ckeditor” folder to your web site

Copy the “ckeditor” folder to your web site. We suggest this destination:

~/ui/ckeditor

~~~~~~~~~~~~~~~

.

The following instructions are done on a web form (page) where you want the editor to appear.

4. Add a reference to the CKEditor code

In the <head> element of a web form, add a reference to the CKEditor code. For example:

<script type="text/javascript" src="<%=Request.ApplicationPath.TrimEnd('/') %>/ui/ckeditor/ckeditor.js"></script>

.

5. Turn off ASP.NET request validation for the page (but be careful!)

In the page directive, add a ValidateRequest=”false” attribute. Be careful that there’s no other control on the page (other than the rich text editor) that will permit text entry.

.

6. Add a <textarea> that will become the rich text editor

Add a <textarea> element at the location where you want the rich text editor to appear. An example is below. Note the “name” attribute, and the other ASP.NET attributes (id and runat).

<textarea name="editor1" cols="10" rows="10" id="editor1" runat="server"></textarea>

.

7. Add C# code to inject a script block at runtime

You actually have a choice on how to do this. You could add the JavaScript code below to the web form (page). Or, you could inject it from the web form’s C# code behind. Here’s the code block:

// Inject the script into the page
string theScript = "<script type='text/javascript'>CKEDITOR.replace('editor1');</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "Startup", theScript);

~~~~~~~~~~~~~~~

.

The following code enables round trip operations.

8. Add code to load the editor with content (to be edited)

In step 6 above, you added the id and runat attributes to the textarea. This enables you to get access to the textarea in your C# code-behind with the following code:

// Assume that "s" is a string instance
// editor1 is the id of the textarea
editor1.InnerHtml = s;

.

9. Add code to read the edited content

Add an ASP.NET button web server control, which will be used as a “save” button. Add code to its handler method to read the rich text editor’s content.

When the page is posted back to the server, the rich text editor’s content is available in the form post package. Use the following code to read the content:

// Assume that "s" is a string instance
// editor1 is the id of the textarea
s = Request["editor1"];

.

See the “…Blog Post Editor Enhanced…” code example for an implementation.

.

Source code markup with SyntaxHighlighter

Use your favourite search engine to locate SyntaxHighlighter by Alex Gorbatchev.

Follow these instructions to implement SyntaxHighlighter in your ASP.NET Web Forms web site. The instructions have been customized for our needs in BTI420.

.

1. Download and unzip

Download the latest version. (As of March 22 2010, it’s version 2.1.364) Unzip it to a folder called “sh”.

2. Copy the “sh” folder to your web site

Copy the “sh” folder to your web site. We suggest this destination:

~/ui/sh

~~~~~~~~~~~~~~~

.

The following instructions are done on a web form (page) where you want the syntax highlighter to appear.

.

3. Add references to the SyntaxHighligher style sheets

In the <head> element of a web form (page), add these references to the SyntaxHighlighter style sheets:

<link href="<%=Request.ApplicationPath.TrimEnd('/') %>/ui/sh/styles/shCore.css" rel="stylesheet"
    type="text/css" />
<link href="<%=Request.ApplicationPath.TrimEnd('/') %>/ui/sh/styles/shThemeDefault.css"
    rel="stylesheet" type="text/css" />

.

4. Add references to the required SyntaxHighlighter scripts

In the <head> element of a web form (page), add references to the SyntaxHighlighter style scripts that you need. You will always need “shCore.js”. Then, you will need a specific “brush” script.  For example, if you are working with xHTML code, you will need to reference the “shBrushXml.js” script. For C# code, you will need to reference “shBrushCSharp.js”. See the following code example:

<script type="text/javascript" src="<%=Request.ApplicationPath.TrimEnd('/') %>/ui/sh/src/shCore.js"></script>
<script type="text/javascript" src="<%=Request.ApplicationPath.TrimEnd('/') %>/ui/sh/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="<%=Request.ApplicationPath.TrimEnd('/') %>/ui/sh/scripts/shBrushCSharp.js"></script>

.

5. Add a <pre> that will be marked up by SyntaxHighlighter

Add a <pre> element at the location where you want the marked up content to appear. An example is below. Note the use of the “class” attribute. Also, note the other ASP.NET attributes (id and runat).

<pre class="brush: csharp" id="preShowCode" runat="server"></pre>

.

6. Add C# code to inject a script block at runtime

You actually have a choice on how to do this. You could add the JavaScript code below to the web form (page). Or, you could inject it from the web form’s C# code behind. Here’s the code block:

// Add the highlighter call
string theScript = "<script type='text/javascript'>SyntaxHighlighter.all()</script>";
Parent.Page.ClientScript.RegisterStartupScript(this.GetType(), "Startup", theScript);

Special note about the content to be marked up:

All left-angle brackets < must be replaced with the HTML Character Entity &lt;

You can do this using a string Replace() method

.


Advertisements
Categories: 2010 Winter BTI420
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: