Custom Snap-In implementation using a MVC PartialView
In This Topic
As seen in this tutorial, Snap-Ins are very powerful interface elements that provide a rich and modular user experience. Depending on your custom Snap-In content it can quickly become tedious to design and also painful to maintain.
In this context the best option is to build the custom Snap-In in an MVC PartialView (thanks to Jocke Pihlström for the idea and his help on the subject).
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 using the MVC PartialView concept.
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 PartialView implementation
Step 1: Create a ViewModel that will contain both DocuVieware™ unique ID and your custom Snap-In HTML content.
Step 2: Create an extension method that will allow you to render your newly created PartialView to a string. To do this, simply create a new RenderRazorViewToStringHelper.cs class.
Creating the Snap-In content as a PartialView
Step 1: Create a PartialView called _CustomSnapIn.cshtml with the following content:
Step 2: Getting back to your controller, in the action you now need to take care of both the model creation and the PartialView rendering.
As you can see the created model is used to render the PartialView and it is then reinjected in the view where you have your DocuVieware™ control.
Step 3: In the view where you have your DocuVieware™ control (Index in the present case) you now need to first inject the model and then add the Snap-In from its content.
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:
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.