Overview
The OnlyOffice Control for ASP.NET provides a simple way to integrate document editing capabilities into your web applications. This guide covers the fundamental steps to get started.
Registering the Control
First, register the OnlyOffice control in your ASPX page:
<%@ Register Src="~/Controls/OnlyOfficeEditor/OnlyOfficeEditor.ascx"
TagPrefix="oo"
TagName="Editor" %>
Then add the control to your page markup:
<oo:Editor ID="docEditor" runat="server" />
Essential Properties
Configure the control by setting these key properties in your code-behind:
Set the URL to your OnlyOffice Document Server API:
docEditor . OnlyOfficeApiUrl = "https://your-server.com/web-apps/apps/api/documents/api.js" ;
Provide the JWT secret that matches your OnlyOffice server configuration:
docEditor . JwtSecret = "your_jwt_secret_key" ;
The JWT secret must match exactly with the secret configured on your OnlyOffice Document Server. Mismatched secrets will cause authentication failures.
Set the public URL where your application is accessible:
docEditor . PublicBaseUrl = "https://your-app.com" ;
This URL is used to generate callback and download URLs that the OnlyOffice server needs to access.
Loading a Document
There are three primary methods to load documents into the editor:
From Byte Array
Load a document from a byte array in memory:
protected void Page_Load ( object sender , EventArgs e )
{
if ( ! IsPostBack )
{
string sampleFilePath = Server . MapPath ( "~/doc.docx" );
if ( File . Exists ( sampleFilePath ))
{
byte [] fileBytes = File . ReadAllBytes ( sampleFilePath );
docEditor . SetDocumentFromBytes ( fileBytes , "doc.docx" );
}
}
}
From File Upload
Load a document from a FileUpload control:
protected void btnUpload_Click ( object sender , EventArgs e )
{
if ( ! fuFile . HasFile )
return ;
docEditor . SetDocumentFromBytes ( fuFile . FileBytes , fuFile . FileName );
}
From Server File Path
Load a document directly from a file path on the server:
string serverPath = Server . MapPath ( "~/Documents/report.docx" );
docEditor . SetDocumentFromFile ( serverPath , "Monthly Report.docx" );
Displaying the Editor
Once a document is loaded, the editor renders automatically. The control generates:
A container div for the editor (OnlyOfficeEditor.ascx.cs:66)
JavaScript initialization code
Configuration with JWT tokens
Event handlers for document callbacks
Checking Document Status
You can verify if a document is loaded:
if ( docEditor . HasDocument )
{
// Document is loaded and ready
litStatus . Text = "Document loaded: " + docEditor . DocumentName ;
}
Editor Modes
Set the editor mode based on your requirements:
// Edit mode (default)
docEditor . Mode = "edit" ;
// View-only mode
docEditor . Mode = "view" ;
Customizing Appearance
Editor Height
Adjust the editor container height:
docEditor . EditorHeight = "600px" ;
Language
Set the editor interface language:
docEditor . Lang = "es" ; // Spanish
docEditor . Lang = "en" ; // English
User Configuration
Set user information that appears in the editor:
docEditor . UserId = "123" ;
docEditor . UserDisplayName = "John Doe" ;
User information is important for collaboration features and document history tracking.
Complete Example
Here’s a complete example integrating all the basics:
using System ;
using System . IO ;
using System . Web . UI ;
namespace YourApp
{
public partial class DocumentEditor : Page
{
protected void Page_Load ( object sender , EventArgs e )
{
if ( ! IsPostBack )
{
// Configure OnlyOffice connection
docEditor . OnlyOfficeApiUrl = "https://docserver.example.com/web-apps/apps/api/documents/api.js" ;
docEditor . JwtSecret = "your_secret_key" ;
docEditor . PublicBaseUrl = "https://yourapp.example.com" ;
// Set editor preferences
docEditor . Mode = "edit" ;
docEditor . Lang = "en" ;
docEditor . EditorHeight = "650px" ;
// Set user info
docEditor . UserId = Session [ "UserId" ] ? . ToString () ?? "1" ;
docEditor . UserDisplayName = Session [ "UserName" ] ? . ToString () ?? "Guest" ;
}
}
protected void btnUpload_Click ( object sender , EventArgs e )
{
if ( ! fuFile . HasFile )
{
lblMessage . Text = "Please select a file" ;
return ;
}
docEditor . SetDocumentFromBytes ( fuFile . FileBytes , fuFile . FileName );
lblMessage . Text = "Document loaded: " + fuFile . FileName ;
}
}
}
Next Steps
Document Upload Learn advanced file upload and storage techniques
Advanced Configuration Customize editor behavior and security settings