DocuVieware Reference Guide
Custom Snap-In implementation
Tutorials > ASP.NET MVC Razor > Custom Snap-In implementation
This tutorial assumes that you have fully followed the Your first DocuVieware MVC Razor page tutorial first as its starting point is the end of it.

Snap-Ins are very powerful interface elements that can be used for various purposes. DocuVieware™ comes with several handy built-in snap-ins such as the Thumbnails, Bookmarks, Text Search or Annotations palette.

This tutorial shows how to create a very simple Custom Snap-In with a button that will trigger a Custom Action server-side to return a message.

You are going to implement a Custom Snap-In that will contain a simple button which action will be to send a "ping" command to the server and it will reply with a "pong" message.

DocuVieware™ requires .NET Framework 4.6 or above.
The screenshots have been taken using Visual Studio 2015 and GdPicture.NET™ 14, it may differ from the current release.


 Preparing the Custom Snap-In content

Step 1: Add mandatory imports you will need in the Index.cshtml view file.

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

Step 2: Implement an utility function that converts a .NET Color object to an hexadecimal value you can actually use in HTML.

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

Step 3: Build the content of the Custom Snap-In and add it to the DocuVieware™ control between its declaration and the rendering, like this:

   GdPicture14.WEB.DocuVieware docuVieware = new GdPicture14.WEB.DocuVieware
      ID = "DocuVieware1",
      CacheFolder = HttpRuntime.AppDomainAppPath + "\\Cache",
      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;";
         docuVieware.AddCustomSnapIn("customSnapInTutorial", "Custom Snap-In", icon, panel, true);

Step 4: Add the JavaScript function called on the snap-in button click event that will trigger the custom action, like this:

   function ping() {
      DocuViewareAPI.PostCustomServerAction("DocuVieware1", true, "ping");
 Handling your action server side

As seen in the Client/Server coming and going with Custom Actions tutorial, you are going to implement a simple custom action that will process the snap-in button click event.

All you need to do now is add the custom action event handler in the Global.asax.cs file like this:

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.

Now, if you select it and click on the ping button, it will trigger the custom action and you should see a "Pong" message coming back from the server.

See Also