ASP.NET Web Pages
- HTML Form
This section explains to you
ASP.NET Web Pages HTML form.
A form is a part of an HTML document that places input controls (text boxes, check boxes, turn buttons, drop-down lists).
Create an HTML input page
Razor instance
<html>
<body>
@{
if (IsPost) {
string companyname = Request["companyname"];
string contactname = Request["contactname"];
<p>You entered: <br />
Company Name:
@companyname
<br />
Contact Name:
@contactname
</p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Name:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
}
</body>
</html>
Razor Instance - Display image
Suppose you have 3 images in your image folder, and you want to display the image dynamically based on the user's choice.
This can be done with a simple piece of Razor code.
If you have an image named "Photo1.jpg" in your site's image folder, you can display the image using html's element, as follows:
<img src="images/Photo1.jpg" alt="Sample" />
The following example shows how to display an image that a user selects from the following list:
Razor instance
@{
var imagePath="";
if (Request["Choice"] != null)
{imagePath="images/" + Request["Choice"];}
}
<!DOCTYPE html>
<html>
<body>
<h1>Display Images</h1>
<form method="post" action="">
I want to see:
<select name="Choice">
<option value="Photo1.jpg">Photo 1</option>
<option value="Photo2.jpg">Photo 2</option>
<option value="Photo3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit" />
@if (imagePath != "")
{
<p>
<img src="
@imagePath
" alt="Sample" />
</p>
}
</form>
</body>
</html>
Run an instance . . .
The instance explanation
The server created a
variable called imagePath.
The HTML page has
a
pull-down
list called Choice.
It allows users to choose a name they
want, such as Photo 1,
and pass a file name, such as Photo1, when the page is
submitted to a Web server.jpg.
The Razor code
reads the value of Choice
through Request ."Choice".
If the image path (images/photo1.jpg) built by code is valid, assign the image path to the
variable imagePath.
In HTML pages,
the element is used
to display the image.
When the page is displayed, the src property is used to set the value of the imagePath variable.
The element is in an if block, which is to prevent the display of an image without a name, such as when the page is first loaded and displayed.
Related articles
HTML form