1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

MVC postback for users without JavaScript - Post 1


Posts in this series:

Despite only around 1.2% of users having JavaScript disabled there is still a requirement to develop sites which work for users who have JavaScript turned off, especially sites which provide government services. The UK's Government Digital Services (GDS) require that a site works without JavaScript and is then enhanced using JavaScript. This causes all sorts of problems designing forms, especially where there is an "Add more" option for input fields.

Designing something like an "Add more" functionality with JavaScript is fairly trivial, having it work for those without is less so. Having encountered this problem several times I've written a summary of the approach I have used to address this.

The code

All the code for this tutorial is available on GitHub. I have used Git's branches to take snapshots of development changes. The final code is in the branch "step-5". Additonally I have hosted the website on Azure so you can see what the final page does here.

The product

We are designing a page to allow users to choose items from a menu, once they have selected as many items as they want, they submit the form and are taken to a summary of their active orders:

The screen features dropdowns containing menu items and an add another button allowing the user to add more input dropdowns


Core CLR and System.Xml


If you need to use some package which is dependent on System.Xml with Core CLR / DNX Core you simply add the Nuget package System.Xml.XmlDocument rather than referencing the GAC System.Xml.

This allows you to keep your code in Core CLR friendly mode.

System.Xml.XmlDocument on NuGet


Visual Studio 2015 and Gulp


Having played around with the Visual Studio 2015 preview a bit I've tried to learn how Gulp integrates with the Web Application project.

Gulp seems like one of those many, many, constantly appearing JavaScript libraries with names like YamahaPotplantSaucepan.js which are impossible to keep up with. However since it takes the place of the Bundle config it's important to be able to achieve a basic level of familiarity with it.

What does it do?

Gulp describes itself as a "streaming build system" which basically means you can wire up a pipeline of operations to perform on your content, such as JavaScript and CSS.

By default the project template comes with a gulpfile (shown in the image as #1). This is configured to take the dependencies from Bower (which is a package manager loading a few jQuery packages in by default) and copy them to the wwwroot/lib folder (#3 in the image).

1 is gulpfile.js, 2 is package.json, 3 is wwwroot folder, 4 is dependencies folder

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17