Syncfusion MVC Grid - Prevent "A potentially dangerous Request.Form value was detected from the client" error

While working on an ASP.NET MVC project, using the Syncfusion Essential Grid for MVC, we had two pages utilizing the grid.  One page worked fine for displaying the data and paging/sorting.

The other page would show the results, but would fail on the AJAX calls back for paging/sorting.  It baffled me for several hours.  I compared all the settings between the two pages and I couldn't detect any differences between how each was set up.

I finally got frustrated and launched the site in Firefox, using Firebug to monitor the requests.
Props to Firebug, as it was the key to helping me find the solution; as AJAX calls don't show you ASP.NET error HTML when a request breaks... Firebug showed me.  The result was enlightening:

"A potentially dangerous Request.Form value was detected from the client..."
Interesting.  Do you see the "br"eaking issue here?

That's right... ASP.NET does request validation on all requests by default, to ensure prevention of cross-site scripting (See the MSDN article "How To: Prevent Cross-Site Scripting in ASP.NET" for more explanation.)

We were adding the tags into the HeaderText() calls on the cells in the grid setup on columns where the data in that column was guaranteed shorter than the header text, so we could avoid growing the table unnecessarily wide.

As soon as I removed those tags, it worked like a champ.

So be warned, don't put any HTML tags in your HeaderText calls, or you'll be bitten the same.  I hope this saves someone else several hours of pain.  I know it will save me in the future when I run into other Syncfusion grids in our app that are mysteriously not performing their AJAX calls correctly.  That'll be the first thing I look at.

(And did I mention that Firebug rocks?!)

No comments: