HTML Forms and their data; Plus Variables

I will assume that you guys are having the tools downloaded. So lets start!

What you currently have is IIS8, WebMatrix3 and some other tools that would run your database, which were installed alongwith the WebMatrix installation.

Now lets continue.

First of all, try to remind yourself of the HTML markup, and the CSS and JS.

Note: We will be using jQuery more often as compared to JavaScript.

So lets continue!

First of all, lets start with a very basic concept.

Using a Form!

<form method="post">
   <input type="text" name="name" />
   <input type="text" name="age" />
   <input type="submit" value="Submit" />
</form>

Now lets try to understand the very basics of it.

This form uses a method=”post” which changes the method of HttpRequest of the current form to POST. Which means that your form values will be submitted safely and directly to the browser. Contrary to this, you might have also used method=”get”; please note that this is the default behaviour of the form too. If there is no method, then it is a GET request.

The very basic difference for a beginner would be; a GET request creates a URL for the parameters of the FORM, and then the Server uses those parameters and processes the Request. Contrary to this, POST will just send the request directly to the server, and not having the Browser of any other ClientAgent involved.

Now lets move to the next part; the input. This is used to let the user write some values in a field, which will be sent to the server then. You can have other type of inputs too, such as radio buttons, checkboxes, email input, even password.

Now, the last and the same type of element used is the input, but with the type attribute set to submit. Which means that this button will submits the current form.  This way, you will get your data submitted to the server within a few seconds. Well actually it depends on what kind of data to send too.

This was the part which was easy to code, now comes the real horror! No wait, don’t worry it will be easier as talking. Lets start.

Since you downloaded WebMatrix, you might have noticed some other softwares downloaded too, such as Web Pages 2 and some other MS technologies. Now its their time to jump in and save the data. How?

Since these are the server-side technologies, you will use these languages to save the data or do what ever you want to do with them. I am sure, you might have downloaded that StarterSite template or any other from the Template Gallery; donot download WordPress or Joomla! templates as we won’t discuss PHP here right now. You require an ASP.NET website.

So, in a new page called “NewPage.cshtml” create a form as demonstrated above. Once you load the page, you will be able to see the form there. Now what you might want to do is to write some of the server-side codes there too. To make sure the data sent to the server gets saved somewhere too, as the user won’t like to keep sending the data when you’re not even saving it.

So here is the code for too.

First you need to create a server-side block for the code to execute.

@{
   // all the codes will be written here..
}

This is the way, a server-side code gets started and an end, in ASP.NET. Now how to manage it.

Use this:

@{
  if(IsPost) { // remember that we have set method to post, 
               //so if method is post then this..now create variables
    var name = Request.Form["name"]; // request the name input from the form
    var age = Request.Form["age"]; // request the age input from form
    // do whatso ever here.. then close the block and done!
  }
}

This block needs to be on the top of the page, even before HTML tag. Since we won’t require it in the client side, so we won’t need to care where it is placed. But remember we need to place it above, so that when the page is being executed all the variables and the code are compiled and are available throughout the DOM. For example:

@{ 
   var something = newThing;
   var newThing = "Hello";
}

This is wrong, because the server will look for the variable something in the current document, but there won’t be anything, since the variable is being declared below. So this would cause an error. To minimize this, each variable should come below its creation such as:

@{ 
   var newThing = "Hellow";
   var something = newThing;
}

You can use as many of the variables you want, and you can name them on your choice. Think like they’re your kids.

You can learn more about saving the form data to a file, reading the file in a server-side, deleting and creating a file in the link below.

http://www.asp.net/web-pages/tutorials/files,-images,-and-media/working-with-files

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s