Question

I’m a very new ASP.NET developer (and web developer at all for that matter.) I want to put together a simple website that has the web server providing a form containing a few controls for setting a timer, and a start button, which when pressed, posts the configuration to the server (for how long the timer is set for.) and also starts the timer in the client, upon expiration, it would also post to the server that this has been done.

If this is easy please explain to me how to go about doing something like this, if this is not easy, or even more so if this is “not a good way to go about this” please explain to me a better architecture or design for this.

Answer 1

As this is a client-side thing, I wouldn’t use ASP.NET 🙂 Obviously it still stands for the server-side, anyway:

1. New ASP.NET MVC project with a single controller, two views, and two corresponding viewmodels.
2. View has a <form> with the timer <select> or text-box or something.
3. Controller has an action that receives the POSTed form data and saves it or something, then returns a 303 response to a view that has a hidden field that specifies when the timer should end, this value should be persisted on the server in Session state in case the user refreshes the page. The value should be saved as an absolute UTC date-time value.
4. The client has a simple client-script that, on page-load, inspects this hidden fields and sets up the timer using setTimeout.
5. The script also contains a callback function that will be called when the timer reaches its end. This callback function will create and populate a hidden dynamic <form> element which is submitted, causing a POST request to the server with some tag that identifies the client and timer that expired. The server then does another 303 redirect back to the original view, possibly containing a message for the user or something.

This is probably the simplist way using modern techniques and avoiding complexities inherent in using AJAX or external frameworks like jQuery or Mootools. Note my use of 303 redirect instead of returning a HTML repsonse to a POST request – this is for the user’s benefit so they never get the browser “Resubmit form?” dialog and also prevents the timer from being reset.

UPDATE:

Why 3xx Responses Are Good:

When a client submits a POST request, the webserver can respond either by returning a response directly, or by doing a 3xx redirect to another page. The problem with providing a response directly is that the content of the response (i.e. the web page) is not “accessible” as far as HTTP is concerned: you cannot retrieve the same content with a GET request. This is why when a user presses F5 or hits Refresh for a POST’d page they get a message-box prompting them (in cryptic language) to resubmit the form, however often if the user resubmits the form they’ll end up breaking the application because their data will be processed twice. This is why ASP.NET WebForms, which its heavy reliance on “postback” is being phased out.

Javascript

The code would look something like this:

// bind to this event rather than executing directly because the onload event is only fired after the entire DOM is available. If you run the code immediately then you won't be able to traverse the DOM tree.
window.onload = setUpCallback;

function setUpCallback() {
    var hiddenField = document.getElementByID("someHiddenFieldId");
    var timeStampEnd = parseInt( hiddenField.value ); // this is the number of miliseconds since 1970-Jan-01 00:00
    var timeStampNow = new Date().getTime(); // this also returns a miliseconds-since-1970 value

    var timeToEnd = timeStampEnd - timeStampNow;
    if( timeToEnd > 0 ) {
        window.setTimeout( onTimerEnd, timeToEnd ); // set-up the callback
    }
}

function onTimerEnd() {
    var form = document.createElement("form");
    form.action = "http://mywebsite/uriToSubmitPostTo";
    form.method = "post";
    document.documentElement.appendChild( form );

    var clientField = document.createElement("input");
    clientField.type = "hidden";
    clientField.name = "someFieldName";
    clientField.value = "someValueToIdentifyTheClientOrJustUseSession?";

    form.appendChild( clientField );

    form.submit();
}