Safely Encoding Strings On ASP.NET MVC Razor Pages (sometimes)

 

Background

Sometimes, we want to let html tags come through our web pages from user defined content.  If for example, you have a workflow that requires approval before publishing, there are times when you want to let the author put through html, links, etc. 

Solution

In Visual Studio write a simple HtmlHelper method that allows for a flag you can pass through.  In my case, I have a database table with a boolean column “allowhtml”.  If this is set, then instead of using Html.Raw(…) I can use my own helper method, pass in the allowHtml value and if it is set true, then allow the not encoded Html to flow through.

Here is that helper method:

namespace WebAPI.Code.Helpers
{
    public static class SvccHtmlHelperExtension
    {
        public static MvcHtmlString SafeEncodeSvcc
            (this HtmlHelper helper, string inString, 
            bool? allowHtml = false)
        {
            string s =
                allowHtml.HasValue && allowHtml.Value
                    ? inString
                    : HttpUtility.HtmlEncode(inString);
            return new MvcHtmlString (s);
        }

Then, in the razor page (.cshtml)

<div class="sessionDescription" id="sessionDescription_@session.Id">
    <p>@Html.SafeEncodeSvcc(session.Description,session.AllowHtml)</p>
</div>

This way, the syntax is tight and I just use this instead of Html.Raw all the time.

Here is a good reference: http://www.dotnetperls.com/htmlencode-htmldecode

HTH’s.

Awesome Announcement Regarding Code Stars Summit (2 weeks from now)

As most readers of my blog know, I organizer both Silicon Valley Code Camp (going on our 9th year now with dates set for 10/11-12/2014 again at Foothill College in Los Altos) and Code Stars Summit which is happening for the first time this year in San Francisco.   Code Stars Summit is a much smaller event (under 100 people) is a paid event with top quality workshop leaders doing all day training events.

 

Yesterday, we added the benefit that all attendees will get a 1 year subscription to Frontend Masters.  See the announcement below for details.
Breaking News: All attendees of Code Stars Summit will receive a free 1 year subscription to FrontEnd Masters catalog of online courses ($390 value).  FrontEnd Masters has courses in JavaScript, NodeJS, AngularJS, CSS, UI and others. Two of our Code Stars Summit workshop leaders (Crockford and Weyl) both have courses published on FrontEnd Masters and I’ve linked to those course video previews below.

 

Why are we offering this now? On my last email promoting Douglas Crockford’s Fun with Functions workshop, Doug asked me include a preview of a 5 hour training video he did for FrontEnd Masters as a sample of what to expect at his workshop.  Many hundreds of you watched that video preview getting the attention of Marc Grabanski, FrontEnd Masters president.  Marc (a past attendee of SV Code Camp) called me and we came up with the plan to give all attendees of Code Stars Summit a free 1 year subscription to FrontEnd Masters.

 

Douglas Crockford On JavaScript Video Sample

 

Estelle Wehl CSS In Depth

 

Below are the three workshops in which we still have space.  Signup now to reserve your space.

 

Fun With Functions In JavaScript – Douglas Crockford- Friday - This hands-on workshop is about using functions and thinking with functions to take your JavaScript use to another level. This workshop will challenge you to do better and think differently. Are you game? WHAT WILL YOU LEARN Through a graduated series of problems, your knowledge of what is possible with JavaScript will grow exponentially. WHO SHOULD ATTEND Developers, Operations Engineers and Testers and anyone wanting to increase their skill in functions and JavaScript.

 

AngularJS End-to-End Application Development Workshop.  2 Days With Dan Wahlin – Tuesday & Wednesday - The course starts with an introduction to building Single Page Applications (SPA) and talks about the features AngularJS provides. From there you’ll learn about different aspects of the framework such as views and directives, controllers and routes, as well as factories and services. Along the way, different debugging techniques and tools are discussed, how different AngularJS components can be customized and shared with other components, and different JavaScript patterns that can be applied to applications to make them more maintainable. By the end of the workshop you’ll have walked through the process of building a Single Page Application (SPA) from end-to-end using AngularJS and be ready to apply that knowledge to applications you need to build.

 

CSS3: What you need to know.  Estelle Weyl – Thursday - Web development without image editing software, IDs or classes? What was impossible 5 years ago is almost simple to do with CSS3. Prototyping with CSS3 has made the development process fun again. Yes, there is new syntax to learn, and different browsers sometimes require slightly different markup, but the power is worth the pain. And, once you understand the syntax, there are tools so CSS3 isn’t a memorization game. Improved development time, reduced maintenance costs, SEO, accessibility and site performance? What more could you ask for?
How about all of it, all in 1 day! In this full day workshop you will learn about the capabilities of CSS3, progressive design principles, time saving techniques, and debugging and development tools. Yes, we’ll cover rounded corners, but this skills-based workshop will cover so much more, including selectors, fonts, media queries, performance, responsive features, background effects, gradients, animations, transitions and transformations.

 

Thanks again for your support and of course, feel free to email me with any questions.

 

Peter Kellner

 

PS: Please click on this link to add us to your address book and help our emails bypass your junk mail filters

 

code stars summit

 

 

Why In Sencha’s ExtJS or Sencha Touch Source is so Important

Right now, I’m trying to figure out how to turn grouping on and off in a Sencha ExtJS store. That is, I have a page that looks like the following where I want to have a checkbox to turn the grouping page on and off depending on how the user wants to see the display.

image

So, I look in the help and I don’t find a method in the “store” documentation that says enableGrouping or disableGrouping.  I do find one that says “isGrouped” however.  So, clicking on the view source for that I now see source as follows:

image

image

which tells me that if there are no “groupers” defined that my store is not grouped.

Just sayin…

ExtJS Not Using autoLoad Best Practice

The typical usage pattern in Sencha’s ExtJS for loading data into a visual control such as a grid is to assign a grid to a store, then let the store have autoLoad: true which means that when the store is created, it will automatically be loaded and since it is assigned to a visual control (grid), the grid will be populated.  I don’t like that pattern.  I like to be more in control.  There may be things I want to do before the grid is loaded.

So, what I do is in the application launch event I load my store first and in my store itself, I explicitly tell it not to autoLoad by setting autoLoad to false.  Below is an example of the code I’m using at the moment to handle this.  Notice that I cleverly show a load mask only if the the store takes more than 500 milliseconds to load.

launch: function() {
        var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading Data..."});
        var task = new Ext.util.DelayedTask(function(){
            mask.show();
        });
        task.delay(500); // don't show mask for 500 milliseconds
        var ccyStore = Ext.data.StoreManager.lookup('CodeCampYear');
        ccyStore.load({
            scope: this,
            callback: function(records, operation, success) {
                // do on success
                var codeCampYearFirst = ccyStore.getById(8);
                var codeCampYearId = codeCampYearFirst.get("id");
                var sessionsStore = Ext.data.StoreManager.lookup('Sessions');
                sessionsStore.load({
                    params: {
                        codeCampYearId: codeCampYearId,
                        withNotApproved: true  // always get all sessions and let filter deal with approved or not
                    },
                    callback: function(records, operation, success) {
                        task.cancel(); // make sure mask never shows since we are done
                        mask.hide(); // mask may or may not be showing but hide anyhow, no harm.
                        Ext.create('SessionEditor.view.MainView');
                    }
                });
            }
        });
    }

Hope this helps.

Plugin by Social Author Bio

Follow

Get every new post delivered to your Inbox

Join other followers: