Showing all posts tagged: 'HTML 5'

A 8-post collection

How to use JQuery dialog as Confirm dialog in ASP.NET

Another ASP.NET WebForms post. It seems I'm "stuck" with WebForms for now, so lets make the best out of it. Today's issue: how many times did you have to code some confirmation logic on your website to ensure that your users are (doubly/triply) sure about the action they are about to perform? A typical example is prompting the user to confirm that they are sure about deleting a record. In typical/boring javascript world, you would do something like this: HTML <asp:Button runat="server" ID="btnDelete" Text="Delete" …[read more]

Processing Payments and with Stripe, JavaScript and C# - PCI compliant

The source code and post have been updated to use the latest Stripe.NET API => v4.2 Online payments! We've all used them and some of us may have had the "fortune" implementing them on one website or another. [Stripe](http://stripe.com" target="_blank") is the not-so-new kid on the block, since it recently expanded in many countries, that makes this development task a breeze. If you are using .NET, then [Stripe.NET](https://github.com/jaymedavis/stripe.net" target="_blank) is an excellent library that hides away most of the …[read more]

Upload files to the server using Javascript and MVC WebAPI

The ASP.NET WebAPI is really versatile and powerful and I like to use it as much as I can when I develop for the web. I know that MVC controller methods can also process ajax requests, but I like the separation of concerns. WebAPI for REST calls and MVC for Views and the ViewModels manipulation. Note: if you still want to use MVC instead of WebAPI for your server implementation, have a read here. Recently, I had to implement a method to upload files to the server from an MVC view. I decided to use ajax and WebAPI. Once …[read more]

Importing CSV files using jQuery and HTML5

One of the cool features of HTML5 is the new File API that allows the broswer to directly interact with files on the file system. Most modern browsers that support HTML5 can use this API to perform client-side only processing without the need for a round trip to the servers or the use of ajax etc. In effect the server becomes redundant and the user experience more fluent and responsive. You can still, if you need to, perform server-side processing, but if you only want to make the file contents available to the browser then you can use the code …[read more]

Working with Radio buttons and jQuery

Working with Radio buttons and jQuery Radio buttons are one of the essential HTML elements that you can find in almost any website that contains a form for users to enter data. In this blog today we will do the following: Add radio buttons dynamically using jQuery And, get the value and text of the selected radio button using jQuery First you need a standard boiler plate html page that has a reference to the jQuery library. For this example we will use the Google jQuery CDN to pull the library on our page. At this stage, you page should …[read more]

Add watermark to textbox and password textbox using HTML5

If you need to add a watermark on your textboxes and wish to avoid ugly Javascript implementations, HTML5 is your friend. Simply use the placeholder attribute with any input element of type text or password, as per the examples below: <input id=”txtUsername” type=”text” placeholder=”Type your username” /> <input id=”txtPassword” type=”password” placeholder”Type your password” /></pre> This works like a treat! P.S This feature is only supported by the latest HTML5 browsers (IE10, Safari, Chrome, Firefox). Older browsers still require Javascript Happy coding… …[read more]

Tidy up your forms with horizontal sliding divs using JQuery UI

Many websites still make use of lengthy scrollable forms or numerous page post backs when requesting input from their users, e.g shopping cart check outs etc. jQuery and jQueryUI give developers the opportunity to significantly improve the overall UI experience. In this tutorial, we will look into creating sliding panels/divs that respond to user input and allow the users to navigate through the data entry process in a nice, fluid way. First we need to ensure that we reference the appropriate libraries: jQuery 1.9.0 jQueryUI 1.9.2 Then we need to create our html elements: …[read more]

HTML5 Drag and Drop file upload with preview using jQuery and MVC 4

With the advent of HTML5 and its wide adoption by all major browsers, web developers now have a new arsenal in their hands for implementing powerful file upload functionality on their website. In this tutorial we will see how to implement this using the FileDrop jQuery plugin and an MVC controller to receive and store the uploaded files in a repository on the server. First create a new MVC 4 website in Visual Studio. An existing website can also be used.  Create a new blank view and name it “UploadFiles”. You should be able to navigate to the page using …[read more]