Potentially dangerous Request.Form value was detected from the client

'A Potentially dangerous Request.Form value was detected from the client'

This is a common error that ASP.NET developers have run into many times. We will see in this post a few ways on how to avoid it. 

Reason

       By default, ASP.NET performs request validation to prevent people from uploading HTML markup or script to your site. ASP.NET checks the content of the form sent to the server to prevent cross-site scripting(xss).  

This error is caused by a newly introduced feature of .NET Framework 1.1, called "Request Validation."  This feature is designed to help prevent script-injection attacks whereby client script code or HTML is unknowingly submitted to a server, stored, and then presented to other users.

Note that anything between '<' and '>' is considered dangerous, and it doesn't have to necessarily closes the tag with '<' ("<a" would have be considered potentially dangerous). ASP.NET validates query string as well.

Try it:

To overcome this error first try to disable the request validation feature, because the validation is done by ASP.NET before any of your code.

<%@ Page ValidateRequest="false" %>

Or you can disable it for your entire application in the web.config file:

<configuration>

    <system.web>

        <pages validateRequest="false" />

    </system.web>

</configuration>

ASP.Net 4.0?

        In ASP.Net 2.0, request validation is enabled for only ASP.Net pages and validated when those pages are executing. Whereas in ASP.Net 4.0, by default request validation is enabled for all requests. As a result validation applies to not only to ASP.Net pages but also to the Web service calls, Http handlers etc.. To prevent this error simply revert ASP.Net behavior back to 2.0. 
To do this, add a configuration element in Web.Config.

<httpRuntime requestValidationMode="2.0" />

CodeProject

Working with Knockout.js

Knockout(KO) is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. KO provides a simple two-way data binding mechanism between your data model and UI means any changes to data model are automatically reflected in the DOM (UI) and any changes to the DOM are automatically reflected to the data model.

Since Knockout is a purely client-side library, it has the flexibility to work with any server-side technology (e.g., ASP.NET, Rails, PHP, etc.), and any architectural pattern, database, whatever. As long as your server-side code can send and receive JSON data — a trivial task for any half-decent web technology

Key Concepts:

• Declarative Bindings - Easily associate DOM elements with model data using a concise, readable syntax.
• Automatic UI Refresh - When your data model's state changes, your UI updates automatically.
• Dependency Tracking - Implicitly set up chains of relationships between model data, to transform and combine it.
• Templating - Quickly generate sophisticated, nested UIs as a function of your model data.

Additional benefits:

• Declarative Bindings - Pure JavaScript library - works with any server or client-side technology.
• Can be added on top of your existing web application without requiring major architectural changes.
• Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms.

More Features:

• Free, open source.
• Pure JavaScript — works with any web framework
• Small & lightweight — 40kb minified. (... reduces to 14kb when using HTTP compression)
• No dependencies
• Supports all mainstream browsers
  IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)

Knockout.js uses a Model-View-ViewModel (MVVM) design pattern in which the model is your stored data, and the view is the visual representation of that data (UI) and ViewModel acts as the intermediary between the model and the view.

                                         Model   <---------> View Model <---------> View

ViewModel is a JavaScript representation of the model data, along with associated functions for manipulating the data. Knockout.js creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.

Simple Example

1. View(HTML)

<h2>Your Seat reservations</h2>
<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
    </tr></thead>
    <tbody data-bind="foreach: seats">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: meal().mealName"></td>
        <td data-bind="text: meal().price"></td>
    </tr> 
</tbody>
</table>

2. View Model(Javascript)

// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;
    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 10.11 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ]; 

    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[1])
    ]);
}

ko.applyBindings(new ReservationsViewModel());

3. OUTPUT