---
title: "Custom snap-in implementation"
canonical_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-mvc-razor/mvc-custom-snap-in-implementation/"
md_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-mvc-razor/mvc-custom-snap-in-implementation.md"
last_updated: "2026-05-19T01:10:17.036Z"
description: "Create a custom snap-in in DocuVieware, including implementing a button to trigger server-side actions."
---

# Custom snap-in implementation

This guide requires completion of the guide to [your first DocuVieware MVC Razor page](https://www.nutrient.io/guides/docuvieware/asp-dotnet-mvc-razor/your-first-docuvieware-mvc-razor-page.md).

A snap-in is an interface element that can be used for various purposes. DocuVieware comes with several built-in snap-ins such as the Thumbnails, Bookmarks, Text Search, and Annotations palette.

This guide shows how to create a custom snap-in with a button that sends a `ping` command to the server, which replies with a `pong` message.

**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.

## Preparing the custom snap-in content

**Steps:**

1. Add the mandatory imports you’ll need in the `Index.cshtml` view file:

   ```csharp

   @using System.Web.UI.HtmlControls;
   @using System.Drawing;
   ```

2. Implement a utility function that converts a.NET Color object to a hexadecimal value for use in HTML:

   ```csharp

   @functions
   {
    private static string HexConverter(Color c)
    {
    return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");

    }
   }
   ```

3. Build the custom snap-in content and add it to the DocuVieware control:

   ```csharp

   @{
    GdPicture14.WEB.DocuVieware docuVieware = new GdPicture14.WEB.DocuVieware
    {
    ID = "DocuVieware1",
    Height = new System.Web.UI.WebControls.Unit("100%"),
    Width = new System.Web.UI.WebControls.Unit("100%")
    };
    using (HtmlGenericControl icon = new HtmlGenericControl("svg"))
    {
    icon.Attributes["viewBox"] = "0 0 16 16";
    icon.Attributes["width"] = "100%";
    icon.Attributes["height"] = "100%";
    icon.InnerHtml = "<path d=\"M6 0l-6 8h6l-4 8 14-10h-8l6-6z\"></path>";
    using (HtmlGenericControl panel = new HtmlGenericControl("div"))
    {
    panel.ClientIDMode = ClientIDMode.Static;
    panel.ID = "customSnapInTutorialPanel" + docuVieware.UniqueID;
    using (HtmlGenericControl customSnapInTutorialButtonDiv = new HtmlGenericControl("div"))
    {
    customSnapInTutorialButtonDiv.Style["float"] = "left";
    customSnapInTutorialButtonDiv.Style["margin-top"] = "6px";
    customSnapInTutorialButtonDiv.Style["margin-left"] = "6px";
    using (HtmlGenericControl customSnapInTutorialButton = new HtmlGenericControl("button"))
    {
    customSnapInTutorialButton.ID = "customSnapInSubmit" + docuVieware.UniqueID;
    customSnapInTutorialButton.Style["height"] = "26px";
    customSnapInTutorialButton.Style["background-color"] = HexConverter(docuVieware.ActiveSelectedColor);
    customSnapInTutorialButton.InnerHtml = "Ping";
    customSnapInTutorialButton.Attributes["class"] = "btn-valid";
    customSnapInTutorialButton.Attributes["onclick"] = "ping(); return false;";
    customSnapInTutorialButtonDiv.Controls.Add(customSnapInTutorialButton);
    }
    panel.Controls.Add(customSnapInTutorialButtonDiv);
    }
    docuVieware.AddCustomSnapIn("customSnapInTutorial", "Custom Snap-In", icon, panel, true);
    }
    }
    docuVieware.RenderControl(Output);
    }
   ```

4. Add the JavaScript function called on the snap-in button click event that triggers the custom action:

   ```javascript

   <script>
    function ping() {
    DocuViewareAPI.PostCustomServerAction("DocuVieware1", true, "ping");
    }
   </script>
   ```

## Handling your action server-side

As described in the [client/server coming and going with custom actions](https://www.nutrient.io/guides/docuvieware/asp-dotnet-mvc-razor/mvc-client-server-coming-and-going-with-custom-actions.md) guide, implement a custom action that processes the snap-in button click event.

Add the custom action event handler in the `Global.asax.cs` file:

```csharp

private void CustomActionsHandler(object sender, CustomActionEventArgs e)
{
 if ((e.actionName == "ping"))
 {
 e.message = new DocuViewareMessage("Pong", icon: DocuViewareMessageIcon.Information);
 }
}

```

Compile and start the page. The custom snap-in icon will appear in the left panel.![Custom snap-in icon appearing in the DocuVieware left panel](@/assets/guides/docuvieware/custom_snapin_1.png)

Now, if you select it and click the ping button, it’ll trigger the custom action and you should see a `Pong` message coming back from the server.
---

## Related pages

- [ASP.NET MVC Razor integration](/guides/docuvieware/asp-dotnet-mvc-razor.md)
- [Custom snap-in implementation using an MVC PartialView](/guides/docuvieware/asp-dotnet-mvc-razor/mvc-custom-snap-in-implementation-using-a-partialview.md)
- [Use and handling of the selection area](/guides/docuvieware/asp-dotnet-mvc-razor/mvc-use-and-handling-of-the-selection-area.md)
- [Client/server coming and going with custom actions](/guides/docuvieware/asp-dotnet-mvc-razor/mvc-client-server-coming-and-going-with-custom-actions.md)
- [Your first DocuVieware MVC Razor page](/guides/docuvieware/asp-dotnet-mvc-razor/your-first-docuvieware-mvc-razor-page.md)