Progressive enhancement
Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page
Now that it’s 2011 I hope more .NET web developers really start to take progressive enhancement seriously. Sure many ASP.NET devs work on internal LOB apps and can enforce javascript requirements, but if you’re working on an internet-facing site I encourage you to take advantage of the many PE/unobtrusive javascript techniques we have available these days, especially in MVC 3.
building a contact us form
JavaScript enabled
As you can see when a user visits our site with JavaScript enabled and clicks on the Contact Us link, they are presented with a nice jQuery UI dialog window. They can fill in the form and get a nice confirmation message inside the dialog, and finally close it without ever leaving the page they were on.
JavaScript disabled
A visitor without JavaScript will still get the same functionality, just a slightly lesser experience. Without JavaScript logic attached to our Contact Us link it behaves like a plain old hyperlink, navigating the browser to a new page. Once they fill out the form and press Send Message we redirect them back to the Home page with a confirmation message.
the general idea behind this code
On the server-side (your controller) use Request.IsAjaxRequest() to determine whether the incoming request was invoked via JavaScript or not
Use Partial Views to re-use the same markup in both the Ajax view and the standard view
Use jQuery to make Ajax calls to our Controller, which will return a Partial View of only the HTML we need to display. We then inject this HTML into the DOM where we need it.
Now that it’s 2011 I hope more .NET web developers really start to take progressive enhancement seriously. Sure many ASP.NET devs work on internal LOB apps and can enforce javascript requirements, but if you’re working on an internet-facing site I encourage you to take advantage of the many PE/unobtrusive javascript techniques we have available these days, especially in MVC 3.
building a contact us form
JavaScript enabled
As you can see when a user visits our site with JavaScript enabled and clicks on the Contact Us link, they are presented with a nice jQuery UI dialog window. They can fill in the form and get a nice confirmation message inside the dialog, and finally close it without ever leaving the page they were on.
JavaScript disabled
A visitor without JavaScript will still get the same functionality, just a slightly lesser experience. Without JavaScript logic attached to our Contact Us link it behaves like a plain old hyperlink, navigating the browser to a new page. Once they fill out the form and press Send Message we redirect them back to the Home page with a confirmation message.
the general idea behind this code
On the server-side (your controller) use Request.IsAjaxRequest() to determine whether the incoming request was invoked via JavaScript or not
Use Partial Views to re-use the same markup in both the Ajax view and the standard view
Use jQuery to make Ajax calls to our Controller, which will return a Partial View of only the HTML we need to display. We then inject this HTML into the DOM where we need it.
No comments
Post a Comment