Computer Magic Logo
Forms the old fashioned way

Sunday, November 22, 2015

Published by Aristotelis Pitaridis

In the classic ASP and in PHP we create forms and we collect the information using a mix of code and markup in the same file. We do not have models, controllers or view to separate the different parts of the form. This is the first form type that we will see and everything will be in one place which is going to be a view.

Let’s create a new view which is going to host our form. We type the following code which generates the HTML markup for displaying the form.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@Umbraco.Field("title")</title>
    <meta name="description" content="@Umbraco.Field("description")">
    <meta name="keywords" content="@Umbraco.Field("keywords")">
</head>
<body>
    <form method="get">
        <b>Name : </b><br />
        <input type="text" id="txtName" name="txtName" /><br />

        <b>Surname : </b><br />
        <input type="text" id="txtSurname" name="txtSurname" /><br />

        <b>Married : </b><br />
        <input type="checkbox" id="chkMarried" name="chkMarried" /><br />

        <b>Number of children : </b><br />
        <select id="ddlNumberOfChildren" name="ddlNumberOfChildren">
            <option value="0" selected="selected">Zero</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="+">More than three</option>
        </select><br />

        <b>Picture : </b><br />
        <input type="file" id="filPicture" name="filPicture" /><br /><br />

        <input type="submit" id="btnSubmit" name="btnSubmit" /> 
        <input type="reset" id="btnReset" />
    </form>
</body>
</html>

In the above code we have a form with two text boxes, one check box, one list and one file selector control. At the bottom we have two buttons. The first button is the submit button and the second is the reset button.

All the controls have an id attribute which can be used in JavaScript in order to execute client side code and all the controls except the reset button have a name attribute which is going to be used in the server in order to get the value. If a control has not a nave attribute this will have as a result the control’s value will not be sent to the server.

All the controls has been wrapped in a form tag which has the method attribute equal to get. This will have as a result the data that the form will send to the server to appear in the address bar so that we will be able to understand what the form sends to the server. In our forms it is better to use the post method but now we just demonstrate how to create our forms so it does not matter what method we use.

At the moment if we display the form on a browser and click the submit button, the application will send the information to the server but we have not written any code in order to manage these information. What we should see at this point is that the URL at the address bar will change when we click the submit button and a sample of a URL is the following.

http://www.domain.com/?txtName=Aristotelis&txtSurname=Pitaridis&chkMarried=on&ddlNumberOfChildren=2&filPicture=Pic1.png&btnSubmit=Submit

As we can see all the information that we type in the form have been sent to the server. Let’s write some C# code in order to collect these information. The first thing that we have to identify is when the user clicks the Submit button. In order to accomplish it we can use IsPost property which contains the value false the first time that the forms appears or the value true when the user submits the form’s data to the server. The problem with this property is that it works only when the form’s method is post so we have to change the value from get to post.

In case we have multiple submit buttons we also have to check which button has caused the submission of the form. This can be done using the Request property which contains all the submitted data of the form. If the request value of the button contains a null value then the button did not fire the submission of the form. If we use all the information that we mentioned we can create a new Boolean variable which defines if our submit button has fired the submission or not.

bool SubmitFired = IsPost && (Request["btnSubmit"] != null);

The complete code is the following.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;

    bool SubmitFired = IsPost && (Request["btnSubmit"] != null);
    if (SubmitFired)
    {
        // The submit button clicked
    }
    else
    {
        // The submit button has not clicked
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@Umbraco.Field("title")</title>
    <meta name="description" content="@Umbraco.Field("description")">
    <meta name="keywords" content="@Umbraco.Field("keywords")">
</head>
<body>
    <form method="post">
        <b>Name : </b><br />
        <input type="text" id="txtName" name="txtName" /><br />

        <b>Surname : </b><br />
        <input type="text" id="txtSurname" name="txtSurname" /><br />

        <b>Married : </b><br />
        <input type="checkbox" id="chkMarried" name="chkMarried" /><br />

        <b>Number of children : </b><br />
        <select id="ddlNumberOfChildren" name="ddlNumberOfChildren">
            <option value="0" selected="selected">Zero</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="+">More than three</option>
        </select><br />

        <b>Picture : </b><br />
        <input type="file" id="filPicture" name="filPicture" /><br /><br />

        <input type="submit" id="btnSubmit" name="btnSubmit" /> 
        <input type="reset" id="btnReset" />
    </form>
</body>
</html>

Now that we caught the submit event lets collect the information that the user typed in the form. We will use the Request property of type HttpRequestBase which enables ASP.NET to read the HTTP values sent by a web site visitor during a web request.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;

    bool SubmitFired = IsPost && (Request["btnSubmit"] != null);
    string Name = "";
    string Surname = "";
    bool Married = false;
    string NumberOfChildren = "";

    if (SubmitFired)
    {
        // The submit button clicked
        Name = Request["txtName"];
        Surname = Request["txtSurname"];
        Married = Request["chkMarried"] == "on" ? true : false;
        NumberOfChildren = Request["ddlNumberOfChildren"];
    }
    else
    {
        // The submit button has not clicked
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@Umbraco.Field("title")</title>
    <meta name="description" content="@Umbraco.Field("description")">
    <meta name="keywords" content="@Umbraco.Field("keywords")">
</head>
<body>
    <form method="post">
        <b>Name : </b><br />
        <input type="text" id="txtName" name="txtName" /><br />

        <b>Surname : </b><br />
        <input type="text" id="txtSurname" name="txtSurname" /><br />

        <b>Married : </b><br />
        <input type="checkbox" id="chkMarried" name="chkMarried" /><br />

        <b>Number of children : </b><br />
        <select id="ddlNumberOfChildren" name="ddlNumberOfChildren">
            <option value="0" selected="selected">Zero</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="+">More than three</option>
        </select><br />

        <b>Picture : </b><br />
        <input type="file" id="filPicture" name="filPicture" /><br /><br />

        <input type="submit" id="btnSubmit" name="btnSubmit" /> 
        <input type="reset" id="btnReset" />
    </form>
</body>
</html>

As we can see in the code above we declared variables and we stored the information so that we will use them later