Simple Ajax scenario in ASP.NET MVC Part 3: graceful degradation

This follows part 1 and part 2.

Let’s continue improving our previous example by adding more requirements. This time supporting clients without JavaScript aka graceful degradation for our Ajax feature.

Graceful degradation in web design refers to supporting less capable clients correctly. In our case, using Ajax will currently only work in browsers with JavaScript enabled.

While that is most browsers, the best scenario possible is to support all browsers, even those who have disabled JavaScript or do not support it.

Supporting clients without JavaScript is sometimes required for conforming to standards or for accessibility reasons.

Changing our previous example

If we disable JavaScript and try our current version of our example application our filtering feature doesn’t work anymore (as well as our jQuery DataTables plugin).

jsdisabled

We are currently using the onclick event on a checkbox. Since this won’t submit the form without JavaScript we need to show the input element we had hidden in Part 2 when JS is disabled.

We still want to have that element hidden if JavaScript is enabled so instead of relying on style=”display: none” we will use JavaScript to hide the input element.

using (Ajax.BeginForm("FilterDepartmentsAjax",
                       new AjaxOptions
                       {
                           HttpMethod = "POST",
                           InsertionMode = 
                               InsertionMode.Replace,
                           UpdateTargetId = 
                               "department-table",
                           OnSuccess = "tableUpdated",
                       }))
{
    <label>Filter: </label>
    @Html.CheckBoxFor(model => model.Filtered, 
                      new { onclick = "$(this).parents('form:first').find(':submit')[0].click();" })
    <input id="input-filter" type="submit" value="Submit" />
}

<div id="department-table">
    @{ Html.RenderPartial("DepartmentsTablePartial", Model); }    
</div>

@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#input-filter').hide();
            $('#deparment-table').DataTable();
        });

        function tableUpdated() {
            $('#deparment-table').DataTable().draw();
        }
    </script>    
}

Now our button is shown only when JavaScript is disabled.

The next problem is that we want to return a PartialView when we are dealing with an Ajax request and a View when we are dealing with a regular request.

Otherwise we will either get only the partial view with JavaScript disabled or loose our jQuery DataTables functionality when we return a whole view.

The correct this we change the FilterDepartmentsAjax method return type to ActionResult and use if (Request.IsAjaxRequest()) like so:

[HttpPost]
public ActionResult FilterDepartmentsAjax(
                       DepartmentsModel model)
{
    var updatedModel = new DepartmentsModel
    {
        Filtered = model.Filtered,
        Departments = GetDepartments(model.Filtered),
    };

    if (Request.IsAjaxRequest())
        return PartialView("DepartmentsTablePartial", 
                           updatedModel);

    return View("Index", updatedModel);
}

Problem solved.

You can find the whole project on GitHub and the specific changeset for this blog post.

 

One thought on “Simple Ajax scenario in ASP.NET MVC Part 3: graceful degradation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s