Interactive Resource Editing with WebForms - RickStrahl/Westwind.Globalization GitHub Wiki

Interactive Resource Editing via clickable links on your application pages works the same way in WebForms as it does in plain HTML or MVC pages by adding data-resource-id and data-resource-set attributes to the page.

However, there's some additional support in WebForms that can automatically generate these tags based on the meta data available in WebForms controls. There's a custom <loc:DbResourceControl> available that you can drop on a page to generate the appropriate attributes automatically.

To use the control you need to add the following to your page:

<loc:DbResourceControl ID="DbResourceControl1" runat="server"
                       EnableResourceLinking="false*|true" /> 
        
<script src="LocalizationAdmin/bower_components/jquery/dist/jquery.min.js"></script>

<% if (DbResourceControl1.EnableResourceLinking) { %>        
	<script src="LocalizationAdmin/scripts/ww.resourceEditor.js"></script>
	<script>
	    ww.resourceEditor.showResourceIcons({
	        adminUrl: "./LocalizationAdmin/"
	    });
	</script>
<% } %>

</form> <!-- should be inside of <form></form>  

Note that if you use a master page you can also drop the DbResourceControl on the master page to make it globally available.

You'll also need a bit of CSS which you can store in the page or in a global style sheet for the application:

<style>            
    .resource-editor-icon, 
    .resource-editor-icon:hover,  
    .resource-editor-icon:visited {
        position: absolute;
        display: inline;
        height: 13px;
        width: 13px;     
        text-decoration: none;
        zIndex: 999999;                 
        margin: -14px 0 0 -2px;
        cursor: pointer; 
        opacity: 0.45;                                   
    }
.resource-editor-icon:hover {
    opacity: 1;         
}
.resource-editor-icon:before {
    font-family: fontawesome;
    content: "\f024";   /*flag*/ 
    /*font-family: Arial;
    content: "#";*/
    font-size: 9pt;              
    color: red;                      
}
</style>

If you are using FontAwesome already, use the above styles as is. If you don't and you don't want to add FontAwesome, you can comment the first two lines in the :before style and uncomment the 3rd and 4th instead.

The first line adds the actual DbResourceControl instance to the page. Make sure to set the EnableResourceLinking property to true when you want to render the resource editing icons to the page. The EnableResourceLinking flag basically determines whether the data-resource-id and data-resource-set attributes are rendered onto controls.

Typically you set the EnableResourceLinking property inside of code depending on whether the user has rights to see the icons or whether you are in debug mode etc.

if (User.IsAdmin)
   this.DbResourceControl1.EnableResourceLinking = true;

The default for the EnableResourceLinking property is false as there's a bit of overhead involved in parsing through all of the controls on the page and adding the attributes to them. The idea is that you enable the editing features only to some users.

Note that the control and the flag by themselves do not actually turn resource linking - they just add the attributes to the page. In order to get the resource linking to work you still have to add a script library and explicitly show the icons.

The rest of this process is the same as it would be for the Interactive Resource editing for HTML pages. You have to add client side script references to jQuery and ww.resourceEditor.js and use some mechanism in your page to trigger the actual resource link activation.

First this library depends on jQuery so you need a reference to jQuery. If your page already has jQuery loaded you can skip this step. You can load jQuery from whereever you want (CDN, your own local copy), but the localizationadmin section contains a version of jQuery that you can reference:

<script src="LocalizationAdmin/bower_components/jquery/dist/jquery.min.js"></script>

Next add ww.resourceEditor.js. This library contains the required logic to add the resource links to a page that contains data-resource-id and data-resource-set attributes:

<script src="LocalizationAdmin/scripts/ww.resourceEditor.js"></script>

Finally you need to actually activate resource editing by calling the showResourceIcons() function in the ww.resourceeditor library.

<script>
    ww.resourceEditor.showResourceIcons({
        adminUrl: "./LocalizationAdmin/"
    });
</script>

You pass in an adminUrl which points at the base page from which the localization admin page runs, which is the root of the folder with the same name. This URL is used to activate the resource editor passing ResourceSet, ResourceId and Content parameters via the query string.

Typically you'll want to call this code hook dynamically as part of your user interface. Maybe you have a button on an admin menu that enables that functionality.

To turn off the resource links:

<script>
    ww.resourceEditor.removeResourceIcons();    
</script>