Page tree
Skip to end of metadata
Go to start of metadata

These instructions describe how to add Textbox.io to a new Web Site project in Visual Studio 2012. Adding Textbox.io to an existing Web Site or Web Application is a similar process.

An "on-premises" deployment is used here.

Step 1. Unzip the distribution to somewhere on your hard drive.

Under the top-level "TextboxioForAspDotNet" folder, notice these folders:

  1. aspdotnetcontrol - this contains the .NET dll files for the Textbox.io server control.

  2. demo - a demonstration project
  3. textboxio - standard textbox.io distribution

The demo project has a .sln file which can be opened in Visual Studio, alternatively you can create your own new project using the steps described below.

Step 2. Create a Visual Studio project

You can create either a new Web Site, or a Web Application. We'll create a Web Site.

Step 3. Add References to Textbox.io dlls

Right-click your website project and click "Add Reference".

Click Browse, and navigate to where you unzipped Textbox.io for ASP.NET.

Select both "TextboxioControl.dll" and "HtmlAgilityPack.dll" and click Add, then OK.

You should now have the two dll files in your Bin folder.

Step 4. Add Textbox.io standard client distribution

Next we need to add the Textbox.io standard client distribution to the project, so that it has the Textbox.io client-side JavaScript library.

Navigate to where you unzipped the distribution in Windows Explorer. Drag the "textboxio" folder into your project.

Step 5. Set web.config settings

In this step we adjust the validation properties of the application.

Add requestValidationMode="2.0" to the httpRuntime tag, in the configuration: system.web section of your web.config file.

This is required in order to submit HTML content in ASP.NET web forms without the built-in validation blocking it. A per-page setting is also required, which we'll get to below.

 

Step 6. Create a new Web Form

Now we need to set up a web form and its associated validation properties.

Right-click the project and select Add > Web Form. Give it a name.

 

Make the following changes to the aspx file:

  1. Add ValidateRequest="false" to the <%@ Page ... %> tag

  2. Add the following line just below the <%@ Page ... %> tag:

    <%@ Register Assembly="TextboxioControl" Namespace="TextboxioControl" TagPrefix="textboxio" %>

Step 7: Add a Textbox.io control to your page

To add the Textbox.io control to your page, add the following code within the <form> tag of your page:

      <textboxio:Textboxio
            runat="server" 
            id="Editor1" 
            ScriptSrc="textboxio/textboxio.js"
            Content="<p>Hello from textbox.io!</p>"

 

Step 8: Open in your browser

Right-click your aspx page, then click "View in Browser". You should see the textbox.io editor running on your page. 

 

The final aspx page should look something like this:

Page1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page1.aspx.cs" Inherits="Page1" ValidateRequest="false" %>
<%@ Register Assembly="TextboxioControl" Namespace="TextboxioControl" TagPrefix="textboxio" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <textboxio:Textboxio 
            runat="server" 
            id="Editor1" 
            ScriptSrc="textboxio/textboxio.js"
            Content="<p>Hello from textbox.io!</p>"
        />
    </div> 
    </form>
</body>
</html>

 

Where to from here?

From here, you may wish to:

  • Customise the editor by setting Control Properties
  • Set up Image Uploads
  • Set up the Spelling service
  • Persist HTML content in your database

 

 

  • No labels