This is my first attempt at creating HTML5 pages. VS 2010 allows working with HTML5 now (you just need to make a small change after installing SP1). So my Razor view is now a HTML5 page. I call this application - 5Commerce – (an over-simplified) HTML5 ECommerce site. So here’s the flow of the application: home page renders user enters first and last name, chooses a product and the quantity can enter additional instructions for the order place the order user is then taken to another page showing the order details Off to the details. This is what my page looks in Google Chrome 10 beta (or later)
soon after it renders. Here are some of the things to observe on this. Look a little closer and you’ll see a border around the first name textbox – this is ‘autofocus’ in action. I’ve set the autofocus attribute on this textbox. So as
soon as the page loads, this control gets focus. 1: <input type="text" autofocus id="firstName" class="inputWidth" data_minlength=""
2: data_maxlength="" placeholder="first name" />
See a partially grayed out ‘last name’ text in the second textbox. This is set using a placeholder attribute (see above). It gets wiped out on-focus and improves the UI visuals in general.
The quantity textbox is actually a numerical-only textbox.
1: <input type="number" id="quantity" data_mincount="" class="inputWidth" />
The last line is for additional instructions. This looks like a label but it’s content is editable. Just adding the ‘contenteditable’ attribute to the span allow the user to edit the text inside.
1: <span contenteditable id="additionalInstructions" data_texttype="" class="editableContent">select text and edit </span>
All of the above is just plain HTML (no lurking javascript acting in here). Makes it real clean and simple. Going more into the HTML, I see that the _Layout.cshtml already is using some HTML5 content. I created my project before installing SP1, so that was the reason for my surprise.
1: <!DOCTYPE html>
This is the doctype declaration in HTML5 and this is supported even by IE6 (just take my word on IE6 now, don’t go install it to test it, especially when MS is doing an IE6 countdown). That’s just amazing and extremely easy to read remember and talk about a few less bytes on every call! I modified the rest of my _Layout.cshtml to the below:
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>5Commerce - HTML 5 Ecommerce site</title>
5: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
6: <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> 7: <script src="@Url.Content("~/Scripts/CustomScripts.js")" type="text/javascript"></script> 8: <script type="text/javascript"> 9: $(document).ready(function () { 10: WireupEvents(); 11: }); 12:</script>
13:
14: </head>
15:
16: <body role="document" class="bodybackground">
17: <header role="heading">
18: <h2>5Commerce - HTML 5 Ecommerce site!</h2>
19: </header>
20: <section id="mainForm">
21: @RenderBody()
22: </section>
23: <footer id="page_footer" role="siteBaseInfo">
24: <p>© 2011 5Commerce Inc!</p>
25: </footer>
26: </body>
27: </html>
I’m sure you’re seeing some of the new tags here. To give a brief intro about them:
<header>, <footer>: Marks the header/footer region of a page or section.
<section>: A logical grouping of content
role attribute: Identifies the responsibility of an element. This attribute can be used by screen readers and can also be filtered through jQuery.
SP1 also allows for some intellisense in HTML5.
You see the other types of input fields – email, date, datetime, month, url and there are others as well.
So once my page loads, i.e., ‘on document ready’, I’m wiring up the events following the principles of unobtrusive javascript. In the snippet below, I’m controlling the behavior of the input controls for specific events.
1: $("#productList").bind('change blur', function () {
2: IsSelectedProductValid();
3: });
4:
5: $("#quantity").bind('blur', function () {
6: IsQuantityValid();
7: });
8:
9: $("#placeOrderButton").click(
10: function () {
11: if (IsPageValid()) {
12: LoadProducts();
13: }
14: });
This enables some client-side validation to occur before the data is sent to the server.
These validation constraints are obtained through a JSON call to the WCF service and are set to the ‘data_’ attributes of the input controls. Have a look at the ‘GetValidators()’ function below:
1: function GetValidators() {
2: // the post to your webservice or page
3: $.ajax({
4: type: "GET", //GET or POST or PUT or DELETE verb
5: url: "http://localhost:14805/OrderService.svc/GetValidators", // Location of the service
6: data: "{}", //Data sent to server
7: contentType: "application/json; charset=utf-8", // content type sent to server
8: dataType: "json", //Expected data format from server
9: processdata: true, //True or False
10: success: function (result) {//On Successfull service call
11: if (result.length > 0) {
12: for (i = 0; i < result.length; i++) {
13: if (result[i].PropertyName == "FirstName") {
14: if (result[i].MinLength > 0) {
15: $("#firstName").attr("data_minLength", result[i].MinLength);
16: }
17: if (result[i].MaxLength > 0) {
18: $("#firstName").attr("data_maxLength", result[i].MaxLength);
19: }
20: }
21: else if (result[i].PropertyName == "LastName") {
22: if (result[i].MinLength > 0) {
23: $("#lastName").attr("data_minLength", result[i].MinLength);
24: }
25: if (result[i].MaxLength > 0) {
26: $("#lastName").attr("data_maxLength", result[i].MaxLength);
27: }
28: }
29: else if (result[i].PropertyName == "Quantity") {
30: if (result[i].MinCount > 0) {
31: $("#quantity").attr("data_minCount", result[i].MinCount);
32: }
33: }
34: else if (result[i].PropertyName == "AdditionalInstructions") {
35: if (result[i].TextType.length > 0) {
36: $("#additionalInstructions").attr("data_textType", result[i].TextType);
37: }
38: }
39: }
40: }
41: },
42: error: function (result) {// When Service call fails
43: alert('Service call failed: ' + result.status + ' ' + result.statusText);
44: }
45: });
46:
47: //....
48: }
Just before the GetValidators() function runs and sets the validation constraints, this is what the html looks like (seen through the Dev tools of Chrome):
After the function executes, you see the values in the ‘data_’ attributes.
As and when we enter valid data into these fields, the error messages disappear, since the validation is bound to the blur event of the control.
There you see… no error messages (well, the catch here is that once you enter THAT name, all errors disappear automatically). Clicking on ‘Place Order!’ runs the SaveOrder function. You can see the JSON for the order object that is getting constructed and passed to the WCF Service.
1: function SaveOrder() {
2: var addlInstructionsDefaultText = "select text and edit";
3: var addlInstructions = $("span:first").text();
4: if(addlInstructions == addlInstructionsDefaultText)
5: {
6: addlInstructions = '';
7: }
8: var orderJson = {
9: AdditionalInstructions: addlInstructions,
10: Customer: {
11: FirstName: $("#firstName").val(),
12: LastName: $("#lastName").val()
13: },
14: OrderedProduct: {
15: Id: $("#productList").val(),
16: Quantity: $("#quantity").val()
17: }
18: };
19:
20: // the post to your webservice or page
21: $.ajax({
22: type: "POST", //GET or POST or PUT or DELETE verb
23: url: "http://localhost:14805/OrderService.svc/SaveOrder", // Location of the service
24: data: JSON.stringify(orderJson), //Data sent to server
25: contentType: "application/json; charset=utf-8", // content type sent to server
26: dataType: "json", //Expected data format from server
27: processdata: false, //True or False
28: success: function (result) {//On Successfull service call
29: window.location.href = "http://localhost:14805/home/ShowOrderDetail/" + result;
30: },
31: error: function (request, error) {// When Service call fails
32: alert('Service call failed: ' + request.status + ' ' + request.statusText);
33: }
34: });
35: }
The service saves this order into an XML file and returns the order id (a guid). On success, I redirect to the ShowOrderDetail action method passing the guid. This page will show all the details of the order.
Although the back-end weightlifting is done by WCF, I did not show any of that plumbing-work as I wanted to concentrate more on the HTML5 and its associates. However, you can see it all in the source here.
I do have one issue with HTML5 and this is an existing issue with HTML4 as well. If you see the snippet above where I’ve declared a textbox for first name, you’ll see the autofocus attribute just dangling by itself. It doesn’t follow the xml syntax of ‘key="value"’ allowing users to continue writing badly-formatted html even in the new version. You’ll see the same issue with the ‘contenteditable’ attribute as well.
The work-around is that you can do ‘autofocus=”true”’ and it’ll work fine plus make it well-formatted. But unless the standards enforce this, there will be people (me included) who’ll get by, by just typing the bare minimum! Hoping this will get fixed in the coming version-updates.
Source code here.
Verdict: I think it’s time for us to embrace the new HTML5. Thank you HTML4 and Welcome HTML5.
