---
title: "Use and handling of the selection area"
canonical_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/use-and-handling-of-the-selection-area/"
md_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/use-and-handling-of-the-selection-area.md"
last_updated: "2026-05-19T01:10:17.036Z"
description: "Use and handle the selection area in ASP.NET Web Forms to apply filters within your DocuVieware application."
---
# Use and handling of the selection area
> Before starting, complete the [your first DocuVieware ASP.NET Web Forms page](https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/your-first-docuvieware-asp-dotnet-web-forms-page.md) and [client/server coming and going with custom actions](https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/client-server-coming-and-going-with-custom-actions.md) guides.
This guide shows how to work with selection area (also known as region of interest, or ROI) in a sample ASP.NET Web Forms application that applies a negative filter on a particular area.
**Requirements** —.NET Framework 4.6 or above
**Note** — Screenshots were taken using Visual Studio 2015 and GdPicture.NET 14. They may differ from the current release.
In this guide, you’ll add three buttons above the DocuVieware control: one outputs the coordinates of the selection area (if any), another clears it, and the last button applies a negative filter on the selected area.
## Displaying the ROI coordinates
This is done client-side. Add a button that calls a JavaScript function on click:
```html
```
```javascript
function getROICoordinates() {
var coords = DocuViewareAPI.GetSelectionAreaCoordinates("DocuVieware1");
if ((coords.width == 0) && (coords.height == 0)) {
alert("No selection area set.");
} else {
alert("Selection area coordinates (in inches):\nLeft: " + coords.left + "\nTop: " + coords.top + "\nWidth: " + coords.width + "\nHeight: " + coords.height);
}
}
```
## Clearing the ROI
It’s often useful to have a button to clear the ROI (reset the selection area). This is done the same way: by using a button that calls a JavaScript function on click.
```html
```
```javascript
function clearROI() {
DocuViewareAPI.ClearSelectionArea("DocuVieware1");
}
```
## Applying the negative filter on the ROI
Now use a `CustomAction` to apply the `Negative` filter on the selected area. Send the ROI coordinates server-side, set a ROI on the actual image, and apply the filter on it.
```html
```
```javascript
function Negative() {
var coords = DocuViewareAPI.GetSelectionAreaCoordinates("DocuVieware1");
if ((coords.width!= 0) && (coords.height!= 0)) {
DocuViewareAPI.PostCustomServerAction("DocuVieware1", false, "Negative", coords);
}
}
```
## Server-side
Now handle the custom action server-side. For more information, refer to the [client/server coming and going with custom actions](https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/client-server-coming-and-going-with-custom-actions.md) guide.
Create a class to retrieve the parameters (the ROI coordinates):
```csharp
public class roi
{
public double left { get; set; }
public double top { get; set; }
public double width { get; set; }
public double height { get; set; }
}
```
Because you’re handling a custom action that’s triggered client-side, handle it in the `Global.asax.cs` file, in `Application_Start` and the dispatcher. For more information, refer to the [client/server coming and going with custom actions](https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/client-server-coming-and-going-with-custom-actions.md) guide.
```csharp
protected void Application_Start(object sender, EventArgs e)
{
DocuViewareLicensing.RegisterKEY("XXXX"); //Unlocking DocuVieware
DocuViewareEventsHandler.CustomAction += CustomActionsHandler;
}
private void CustomActionsHandler(object sender, CustomActionEventArgs e)
{
if ((e.actionName == "Negative") && (e.args!= null))
{
Default.handleCustomAction(e);
}
}
```
Then implement the custom action handler itself in the `Default.aspx.cs` file.
To retrieve the image object, set the ROI on it based on the coordinates received from the client, and apply the filter on it. Below is the corresponding source code:
```csharp
private static void handleCustomAction(CustomActionEventArgs e)
{
using (GdPictureImaging gdPictureImaging = new GdPictureImaging())
{
int imageId;
GdPictureStatus status = e.docuVieware.GetNativeImage(out imageId);
if (status == GdPictureStatus.OK)
{
status = GdPictureStatus.GenericError;
roi roi = (roi)JsonConvert.DeserializeObject(e.args.ToString());
gdPictureImaging.SetROI((int)Math.Round(roi.left * gdPictureImaging.GetHorizontalResolution(imageId), 0),
(int)Math.Round(roi.top * gdPictureImaging.GetVerticalResolution(imageId), 0),
(int)Math.Round(roi.width * gdPictureImaging.GetHorizontalResolution(imageId), 0),
(int)Math.Round(roi.height * gdPictureImaging.GetVerticalResolution(imageId), 0));
status = gdPictureImaging.FxNegative(imageId);
if (status!= GdPictureStatus.OK)
{
e.message = SendErrorMessage("Error during Negative filter: " + status.ToString());
}
if (status == GdPictureStatus.OK)
{
status = e.docuVieware.RedrawPage();
if (status == GdPictureStatus.OK)
{
e.message = new DocuViewareMessage("Filter successfully applied.");
}
else
{
e.message = SendErrorMessage("Error during redraw : " + status.ToString() + ".");
}
}
}
}
}
private static DocuViewareMessage SendErrorMessage(string message)
{
return new DocuViewareMessage(message, "#ff5656", 2500, 300, 300, false, "130%", "normal", "#FFFFFF", "none", "none", "48px", DocuViewareMessageIcon.Error);
}
```
---
## Related pages
- [Custom snap-in implementation](/guides/docuvieware/asp-dotnet-web-forms/custom-snap-in-implementation.md)
- [ASP.NET Web Forms integration](/guides/docuvieware/asp-dotnet-web-forms.md)
- [Client/server coming and going with custom actions](/guides/docuvieware/asp-dotnet-web-forms/client-server-coming-and-going-with-custom-actions.md)
- [Your first DocuVieware ASP.NET Web Forms page](/guides/docuvieware/asp-dotnet-web-forms/your-first-docuvieware-asp-dotnet-web-forms-page.md)