You might have heard the term graceful degradation. It this specific instance it refers to the page usability and the fact that when you rely on some language that are not available everywhere, the page still will be usable, w3’s article define it as:

Graceful degradation Providing an alternative version of your functionality or making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable. Progressive enhancement Starting with a baseline of usable functionality, then increasing the richness of the user experience step by step by testing for support for enhancements before applying them. You may think that these two approaches sound very similar, and that they should give you pretty much the same result, but there are differences to take note of, which we’ll look at below.

So in this post I’m going to explain how I used javascript and what asp.net core framework made available to use to achieve this.

Flexibility in handling request by using IActionResult

In the following section I’m going to build a simple submit form that if JavaScript was enabled, I use JavaScript and Ajax to submit the form. On the other hand if JavaScript was not enabled, I’m going to submit the form without JavaScript. All of that is possible through the use of IActionResult in Asp.Net Core or ActionResult in Asp.Net MVC 5. Although my example here is simple, the same concept can be applied when we have a more complicated scenario. What IActionResult does for use here is that it allows us to return a JsonRsult, ViewResult, or any other supported result to it. In this particular scenario we can return JsonResult if the JavaScript was enabled and plain ViewResult if JavaScript was turned off. Here is the code for Create action:

Here we take a bool value called isJavascriptEnabled in our controller’s action. Then if JavaScript was enabled, from our JavaScript code we set the isJavaScriptEnabled to true, and the program control flow inters the if(isJavascriptEnabled) part and we return a JsonResult. If JavaScript was not enabled, the program flow skip this part and go to the rest of our controller’s action which then return a ViewResult and indicate to our user that insert was successful. Here’s my JavaScript code:

The important part here is where we push a new object into formParametersArray, and set the isJavascriptEnabled to true. For Html part we don’t have anything special, it’s just a normal form:

Redirect to another page without JavaScript

When JavaScript was enabled, we had a code like this setTimeout(function () { window.location.replace("/Home/Index"); }, 3000); to redirect us to home page, but now that it is not enabled, we have to return a Success page to show the user the operation succeeded. But do we redirect the user now that we don’t have JavaScript? The answer is we can do that with meta tag.

As you can see in the code above, the code you see in MetaTags section is responsible to redirect us to Index page.