Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 21 additions & 231 deletions diagram-sdk/asp-net-mvc/automatic-layout.md

Large diffs are not rendered by default.

312 changes: 16 additions & 296 deletions diagram-sdk/asp-net-mvc/bpmn-shapes.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Collaborative editing in diagram control allows multiple users to edit and revie
* Changes to [pageSettings](../page-settings), [contextMenuSettings](../context-menu), [snapSettings](../grid-lines#snapping), [rulerSettings](../ruler), [layout](../automatic-layout), and [scrollSettings](../scroll-settings) are not propagated to other users and apply only locally.

>**Note:**
Collaboration applies to actions that raise the [historyChange](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_HistoryChange) event.
Collaboration applies to actions that raise the [historyChange](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_HistoryChange) event.

## Sample code

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
---
---
layout: post
title: Collaborative Editing in ASP.NET MVC Diagram | Syncfusion
description: Checkout and learn to configure SignalR and Redis for real-time collaborative editing in Syncfusion® ASP.NET MVC Diagram.
Expand All @@ -20,18 +20,14 @@ This guide explains how to configure SignalR Hub in an ASP.NET MVC application f

## How to create ASP.NET MVC application

To create an ASP.NET MVC application, follow the steps outlined in the ASP.NET MVC [Getting Started](../../diagram/getting-started) documentation.
To create an ASP.NET MVC application, follow the steps outlined in the ASP.NET MVC [Getting Started](../getting-started.md) documentation.

## How to add packages in the ASP.NET MVC application

Open the NuGet Package Manager and install the following packages.

* Microsoft.AspNetCore.SignalR.Client
{% if page.publishingplatform == "aspnet-core" %}
* Syncfusion.EJ2.AspNet.Core
{% elsif page.publishingplatform == "aspnet-mvc" %}
* Syncfusion.EJ2.MVC5
{% endif %}

## Configure SignalR service in ASP.NET MVC application

Expand All @@ -41,24 +37,13 @@ To enable real-time collaboration, configure SignalR HubConnection in your ASP.N
* Connect to the `/diagramHub` endpoint with WebSocket transport `skipNegotiation: true` and enable automatic reconnect to handle transient network issues.
* Subscribe to the `OnConnectedAsync` callback to receive the unique connection ID, confirming a successful handshake with the server.
* Join a SignalR group by calling `JoinDiagram(roomName)` after connecting. This ensures updates are shared only with users in the same diagram session.
* Refer to Create ASP.NET MVC [Simple Diagram](../../diagram/getting-started)

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/diagram-sdk/asp-net-mvc/asp-net-mvc/asp-net-mvc/collaborative-editing/config/tagHelper %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}
* Refer to Create ASP.NET MVC [Simple Diagram](../getting-started.md)

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/diagram-sdk/asp-net-mvc/asp-net-mvc/asp-net-mvc/collaborative-editing/config/razor %}
{% endhighlight %}
{% endtabs %}
{% endif %}

>**Notes:**
>* Use a unique `roomName` per diagram (e.g., a diagram ID) to isolate sessions.
Expand All @@ -69,48 +54,26 @@ To enable real-time collaboration, configure SignalR HubConnection in your ASP.N

## Sending and applying real-time diagram changes

* The ASP.NET MVC Diagram component triggers the [historyChange](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_HistoryChange) event whenever the diagram is modified (e.g., add, delete, move, resize, or edit nodes/connectors).
* The ASP.NET MVC Diagram component triggers the [historyChange](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_HistoryChange) event whenever the diagram is modified (e.g., add, delete, move, resize, or edit nodes/connectors).
* Use [getDiagramUpdates]() to produce a compact set of incremental updates (JSON-formatted changes) representing just the changes, not the entire diagram.
* Send these changes to the hub method `BroadcastToOtherUsers`, which relays them to all users joined to the same SignalR group (room).
* Each remote user listens for ReceiveData and applies the incoming changes with [setDiagramUpdates](), keeping their view synchronized without reloading the full diagram.
* Enable the `enableCollaborativeEditing` property on the diagram to treat multi-step edits (like drag/resize sequences or batch changes) as a single operation.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/diagram-sdk/asp-net-mvc/asp-net-mvc/asp-net-mvc/collaborative-editing/realtimeChanges/tagHelper %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/diagram-sdk/asp-net-mvc/asp-net-mvc/asp-net-mvc/collaborative-editing/realtimeChanges/razor %}
{% endhighlight %}
{% endtabs %}
{% endif %}

## Conflict policy (optimistic concurrency) in ASP.NET MVC application

To maintain consistency during collaborative editing, each user applies incoming changes using `setDiagramUpdates`. After applying changes, the ASP.NET MVC sample synchronizes its `userVersion` with the `serverVersion` through the `UpdateVersion` event. This version-based approach ensures conflicts are resolved without locking, allowing real-time responsiveness while preserving data integrity.

Add the following code in the ASP.NET MVC application:

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/diagram-sdk/asp-net-mvc/asp-net-mvc/asp-net-mvc/collaborative-editing/conflict/tagHelper %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/diagram-sdk/asp-net-mvc/asp-net-mvc/asp-net-mvc/collaborative-editing/conflict/razor %}
{% endhighlight %}
{% endtabs %}
{% endif %}
Loading