Razor Form - Create, Validate and Get User Input

In this chapter you will learn
  1. How to create Form in Razor?
  2. How to validate user Input
  3. How to Get User Input
  4. Restore Value after Page Refresh or PostBack

How to create Form in Razor?

There is no special rule for creating form. As you know Razor works with Pure HTML so you can design you Form in Pure HTML as follow.

Step 1 : Create a New Page and save it as Form.cshtml.
Step 2 : Create HTML Form

<form method="post">        
            <table>            
            <tr>
            <td><label for="lblBook">Book Name : </label></td>
            <td><input type="text" name="txtBook" value="@Request.Form["txtBook"]" /></td>
            </tr>
            <tr><td colspan="2">@Html.ValidationMessage("txtBook")</td></tr>
            
            <tr>
            <td><label for="lblAuthor">Author Name : </label></td>
            <td><input type="text" name="txtAuthor" value="@Request.Form["txtAuthor"]" /></td>
            <tr><td colspan="2">@Html.ValidationMessage("txtAuthor")</td></tr>
            </tr>
                
             <tr>
             <td colspan="2"><input type="submit" value="Submit" /></td>
             </tr>  
            </table>
</form>
  Let's Understand It. 
<input type="text" name="txtBook" value="@Request.Form["txtBook"]" />


This is Text Box has 3 properties.
type="text" – It declares that it is a TextBox.
name="txtBook" – It declares its identification name.
value="@Request.Form["txtBook"]" – It restores Text Box value after Page Refresh or Post Back.
@Html.ValidationMessage("txtBook") – It displays error messages which is defined in Razor Syntax for TextBook.

How to Validate User Input

You can validate User Input as follow

<form method="post">        
            <table>            
            <tr>
            <td><label for="lblBook">Book Name : </label></td>
            <td><input type="text" name="txtBook" value="@Request.Form["txtBook"]" /></td>
            </tr>
            <tr><td colspan="2">@Html.ValidationMessage("txtBook")</td></tr>
            
            <tr>
            <td><label for="lblAuthor">Author Name : </label></td>
            <td><input type="text" name="txtAuthor" value="@Request.Form["txtAuthor"]" /></td>
            <tr><td colspan="2">@Html.ValidationMessage("txtAuthor")</td></tr>
            </tr>
                
             <tr>
             <td colspan="2"><input type="submit" value="Submit" /></td>
             </tr>  
            </table>
        </form>


Let’s Understand It.

Validation.RequireField("txtBook","Book Name is Required.");
This method check textBook for empty. If textBook TextBox is empty it flash error message "Book Name is Required."

Validation.Add("txtAuthor", Validator.StringLength(40,5,"Author Name must be Minimum 5 chars long"));
This method checks txtAuthor TextBox for string length. 40 is maximum length and 5 is minimum length. It means this box must be filled between 5 to 40 characters long. If condition fails then it will flash error message , "Author Name must be Minimum 5 chars long"

if(Validation.IsValid())
{
}
This block gets executed only, if all the conditions match and validation process don't return error messages.

How to Get User Input

You can get user input using Request.Form["Control Name"]. for example,

if(IsPost)
    {
        //Getting TextBox value in string
        string BookName=Request.Form["txtBook"];
        string AuthorName=Request.Form["txtAuthor"]; 
    }


Let's Understand It.

string BookName=Request.Form["txtBook"];
string variable BookName holds the textBook value.

Restore Value after Page Refresh or PostBack

You can restore control value after PostBack or after Page Refresh using @Request.Form["txtBook"] method in value attribute. Example 
<input type="text" name="txtBook" value="@Request.Form["txtBook"]" />

Let's Put all together

@{
    
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
 @{
      //Validating Input
      Validation.RequireField("txtBook","Book Name is Required.");
      Validation.RequireField("txtAuthor", "AuthorName is Required.");
      Validation.Add("txtAuthor", Validator.StringLength(40,5,"Author Name must be Minimum 5 chars long"));
    
    if(IsPost)
    {
        //Getting TextBox value in string        
        string BookName=Request.Form["txtBook"];
        string AuthorName=Request.Form["txtAuthor"];
 
        if(Validation.IsValid())
        {
            <text>
                You Entered: <br />
                Book Name : @BookName<br />
                Author Name : @AuthorName
            
            </text>
        }
    }
 }
 
        <form method="post">        
            <table>            
            <tr>
            <td><label for="lblBook">Book Name : </label></td>
            <td><input type="text" name="txtBook" value="@Request.Form["txtBook"]" /></td>
            </tr>
            <tr><td colspan="2">@Html.ValidationMessage("txtBook")</td></tr>
            
            <tr>
            <td><label for="lblAuthor">Author Name : </label></td>
            <td><input type="text" name="txtAuthor" value="@Request.Form["txtAuthor"]" /></td>
            <tr><td colspan="2">@Html.ValidationMessage("txtAuthor")</td></tr>
            </tr>
                
             <tr>
             <td colspan="2"><input type="submit" value="Submit" /></td>
             </tr>  
            </table>
        </form>
    </body>
</html>

Output

If Submitted Value is Empty

Book Name :
Book Name is Required.

Author Name :
AuthorName is Required.



Submitted With Value

You Entered:
Book Name : C#-Rajor
Author Name : Simon D.

Book Name :
Author Name :

Summary

In this chapter you learned how to create, validate, get user input and restore form data after post back. In the next chapter you will learn to store form data in database.
 

Share your thought