Using DS Server with Blazor
This sample and article shows how to integrate the DS Server DocumentEditor using JavaScript into an ASP.NET Blazor application. Blazor allows you create interactive web applications using C#.
This sample and article shows how to integrate the DS Server DocumentEditor using JavaScript into an ASP.NET Blazor application. Blazor allows you create interactive web applications using C#. DS Server provides the backend engine to integrate document processing into web applications.
Trial Token
For this tutorial, a trial token is required and can be easily created on the dedicated DS Server website:
Adding JavaScript
After you created a new Blazor application in Visual Studio, open the _Host.cshtml page in the Pages folder. In the <head> tag, add the following script tag:
<script src="https://trial.dsserver.io/documenteditor/JS/ds-server-document-editor.js"></script>In the same page, add the following script tag into the <body> element and add your private clientId and clientSecret:
<script>
function addEditorToElement(element) {
TXTextControl.init({
containerID: element.id,
serviceURL: "https://trial.dsserver.io",
authSettings: {
clientId: "",
clientSecret: ""
}
});
}
</script>In the folder Pages, create a new Razor page named Editor.razor and add the following content:
@page "/editor"
@implements IAsyncDisposable
@inject IJSRuntime JS
<style>
#txDocumentEditorContainer {
width: 1100px;
height: 600px;
display: inline-block;
position: relative;
}
</style>
<div id="txDocumentEditorContainer" @ref="txDocumentEditorContainer"></div>
@code {
private ElementReference txDocumentEditorContainer;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
await JS.InvokeVoidAsync("addEditorToElement", txDocumentEditorContainer);
}
}
public async ValueTask DisposeAsync() {
}
}This code calls the addEditorToElement method that has been added to the _Host.cshtml page.
Finally, the new page is added to the navigation:
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="editor">
<span class="oi oi-plus" aria-hidden="true"></span> Editor
</NavLink>
</li>
</ul>
</div>On starting the application, the document editor is shown when navigating to the new page editor:
Sample Application
You can test this on your own by downloading the sample from our GitHub repository.
Download and Fork This Sample on GitHub
We proudly host our sample code on github.com/TextControl.
Please fork and contribute.
Requirements for this sample
- DS Server Trial Token
- Visual Studio 2019
ASP.NET
Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.
- Angular
- Blazor
- React
- JavaScript
- ASP.NET MVC, ASP.NET Core, and WebForms
Related Posts
Using TX Text Control .NET Server in Blazor Server Apps
The TX Text Control document editor and the server-side non-UI component ServerTextControl can be used in Blazor Server Apps. This article shows how to save documents to the server and how to…
JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps
The JavaScript API can be used to group several steps into one undo action that can be undone with a single undo call. Additionally, those groups are visually updated at once to avoid screen…
DS Server or TX Text Control? Different Deployment Scenarios
The Text Control document processing technology can be deployed in various ways using different products for different applications. This overview explains the differences and deployment strategies.
Document Editor: JavaScript Object Availability and Order of Events
The online document editor, available for MVC and Angular, provides a JavaScript API to manipulate the document and the style and behavior of the editor. This article explains the order of events…
Track Changes: Show 'Original' and 'No Markup'
The redlining feature is very helpful when working on the same document with multiple authors specifically with legal or healthcare documents where changes need to be tracked and safely logged.…