Sunday, September 30, 2012

HTML Forms


ASP.Net MVC HTML Forms is the second post in a series of tutorials which introduces the basics of ASP.Net MVC programming.

Previous Posts:
MVC Introduction


As noted in my first post, ASP.Net MVC relies heavily on traditional web forms, the ones that have been around since HTML was invented.

Web forms allow form data from inputs such as text boxes, radio buttons, checklists, etc. to be sent to a server for processing. Actually, you can send form data to another HTML page or the same HTML page but to be really useful, data is sent to a server to either store or retrieve data or both.

A common example is entering registration details for a website. You enter you name, email address and password. The details are sent to a server. If the data is valid, a connection a database is made and the data is stored. The server can then redirect the user to a successful registration page or directly into the contents of the website. Otherwise if the data or part of it is invalid, the user is prompted with a warning. Validation can happen on the server or the client or a combination of both client and server. Checking if the user completed the name field could be checked on the client but checking if the user name is already taken can only be checked on the server through a query on the data store of users.






Every HTML form should contain the following attributes:

Name

The form name must be unique for each form on a HTML page. Each HTML page can contain more than one form but each form can only have one submit button.

Action

The action attribute tells the form where to send the form data. The action should refer to a server side form such as an Active Server Page or a PHP page. The server should have software to process the server pages. Microsoft IIS can process .asp pages and with additional add-ons can process other types of pages such as .php. Apache is a common web server software for .php pages and is available for Windows, Unix an MAC servers. Note: If the Action is omitted, the page will submit the form data to itself.

Method

The method can either be GET or POST. The GET method appends the form data to the address of the action when the form is submitted. in the above example form the address may end up looking like this:

http://www.mysite/registeruser.asp?name=michael&email=michael.earley@me.com&password=mvc&confirmpassword=mvc

There is a glaring problem with the GET method. The password is included in the web address which is not a secure way to submit a password. The POST method on the other hand submits the form data without appending it to the web address.

POST should be used generally for form data and GET should be used for search queries e.g. http://www.mysite.com/search?name=Michael. POST queries are useful because they can be bookmarked or written as url addresses. For example you could output an array of links each with a different url depending on the users in a database e.g. http://www.mysite.com/search?name=Michael, http://www.mysite.com/search?name=Tom, http://www.mysite.com/search?name=Sue, etc.

Be careful. If you don't include a method for a form, the default is GET.

HTML Form Example

The following is an example of a simple registration form which posts to itself. Create a HTML file named registeruser.html using the following code. Notice the page sends data to itself by appending the form data to the URL.




<html>
<head>
     <title>Registration Form</title>
     <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<form name="registrationform" action="registeruser.html" method="GET">
<p>Registration Details</p>
Name: <input type="text" name="username"><br>
Email: <input type="text" name="email"><br>
Password: <input type="text" name="password"><br>
Confirm Password: <input type="text" name="confirmpassword">
                        <input type="submit" value="Submit">
</form>
</body>
</html>


In a client server situation, the action would refer to a server page e.g. register.asp and the method would be POST to avoid having the password appear in the URL.

HTTP versus AJAX HTTP

The client passes data to the server using HTML forms through a combination of POST and GET methods via HTTP or AJAX (Asynchronous JavaScript and XML ) HTTP. AJAX allows for a more fluid experience with forms as the entire web page does not need to be refreshed giving a more windows form experience. AJAX does require a little extra code over traditional HTTP methods.


In Classic ASP and PHP, this is how things worked and it works well up to a point, well the point where there are too many forms and files to maintain. Websites often start off with one client page and a separate server page to process form requests and then maybe another to confirm the request. Large websites can end up with hundreds of files in lots of folders which become difficult to maintain. The business logic ends up spread across many files which makes code difficult to mantain and change.

ASP.Net Forms versus ASP.Net MVC

Microsoft introduced ASP.Net Web Forms in 2002 as the successor to Active Server Pages in an effort to improve upon HTML forms. While ASP.Net forms looked good in theory, in practice it was a backward step for web development. State Management was introduced to overcome the short comings of the HTTP Protocol which by design made web client server communications stateless. The desire by Microsoft was to make web development more akin to Windows forms development for which there were numerous developers trying to break into web development. Thankfully, Microsoft have absolved themselves with the introduction of ASP.Net MVC and a return to stateless development or a Restful Service as it is often referred to now.

Restful Service

MVC is a Restful Service. This means that once a request is made to a server, the server deals with the request and may return data to the client. Once that is done, the server forgets about the client literally. Any additional requests are completely independent of the last request and must include everything required to compete each request. The server doesn't even remember the users credentials for each request but there are ways to standardise how this information is included with each request to minimise code.

Summary

HTTP or AJAX HTTP actions are the method of communication for ASP.NET MVC forms. Understanding the difference between GET and POST is very important to understanding MVC as it is heavily reliant on these methods for communication.

To progress to Controllers which I will cover next, you will need to have the necessary software installed for MVC. My next blog will go through what is need to get you up and going. The good news is that the software is free.

Happy coding.

Michael




Monday, May 28, 2012

MVC - Introduction

Introduction

Welcome. This is my first blog on Model View Controller (MVC). I am blogging about it because I love programming in MVC so hopefully you will learn from my experiences. I also maintain a blog on Building Information Modelling (BIM) called BIM Manager, as aside from programming I have a passion for Architecture also. I think this puts me in a very small but growing group of individuals.

Through a series of posts over the next few months I plan to cover topics on MVC, Databases, Entity Frameworks (stuff that connects MVC and databases) and jQuery (very smart JavaScript). I may wander into other interesting MVC and Object Oriented related stuff but will try to keep focused.

MVC

MVC stands for Model View Controller. MVC is a bit of a buzz word at the moment as it is recently increasing in popularity. But what is MVC?

MVC is a pattern based framework for building applications. Software systems use MVC to basically put manners on code by ensuring code abides by strict rules. With a little bit of time and some coffee, you could even develop your own MVC pattern but there are plenty of good patterns out there and life is about more than just programming. MVC is a pattern or a set of rules. Applications such as Ruby on Rails, iOS and ASP.NET MVC now have some very well defined rules for how MVC code is structured. MVC is not new as it has been around since 1979 and was originally named Thing-Model-View-Editor.You will now find MVC in many applications both for the web and desktop. For example, if you plan to write an app for an iPhone, you will need to use MVC. Many organisations are using MVC to simplify very complex applications and websites.

I primarily develop web applications and also dabble in desktop and iPhone development. I started web programming in VB and Classic ASP which for a long time got a lot of productive programming done. When I switched to ASP.Net, I had great hope that it would remove some of the repetition involved in scripting while promoting reuse through Object Oriented programming. The reality was not so good. ASP.NET added so much baggage trying to make web sites work like windows based applications, that I soon was fed up and used it sparingly. I looked at a few bolt-on applications such as Devexpress for Visual Studio to automate some tasks but it was still clunky. The viewstate functionality of ASP.NET especially annoyed me, this wasn't web development any more.

I started to look at Ruby on Rails which has led the way in web MVC programming and then came across ASP.NET MVC which was still at the early stages of development. I found the Model View Controller a bit puzzling at first, but soon things started to click as I realised I was relearning the basics of HTML again. I was also starting to learn iOS programming for the iPhone/iPad online from Stanford University and was surprised that MVC was being used here also. Ruby on Rails is a great programming environment and credit must be given to David Heinemier Hansson for having the insight to bring MVC to the web. HTML has recently evolved to version 5 is now changing the web again with the introduction of media related functions that were long needed. It is exciting times indeed to be looking at MVC.

I opted to develop in ASP.NET MVC mostly because I was familiar with Microsoft applications and also because I program for AutoCAD and Revit which until recently were solely Windows based. I switched most of my programming tC# when I started MVC as most of the material and samples on the web were C#. VB will work just as well and there are websites that will convert VB to C# and vice versa.

Onward and Upward

Slightly convinced? Try MVC out, you won't regret it. It is suitable for beginners or experienced programmers alike.

I would recommend learning some basics of HTML first. W3Schools and HTML Goodies are excellent web sites to get you started on basic HTML and JavaScript. Many tutorials and books start with the Model or the View but my first meat and bones post will look at the HTML form. Yes, this is the basic HTML form that has been around since the beginning of HTML. MVC relies surprisingly heavily on HTML forms. I will include code with each post and build up to a useful everyday application.

Enjoy.