This section explains to you the ASP.NET WebPages HTML form.
A form is the portion of an HTML document where input controls (text boxes, check boxes, radio buttons, drop-down lists) are placed.
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" /> </form> } } </body> </html>
Suppose you have 3 images in your images folder and you want to display the images dynamically based on the user's selection.
This can be achieved with a simple piece of Razor code.
If you have an image named "Photo1.jpg" in your website's images folder, you can use the HTML <img> element to display the image, as shown below:
<img src="images/Photo1.jpg" />
The following example demonstrates how to display an image selected by the user from the following list:
@{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 " /> </p>} </form> </body> </html>The server creates a variable called imagePath .
The HTML page has a drop-down list (<select> element) named Choice . It allows the user to choose a name according to their own wishes (such as Photo 1 ), and when the page is submitted to the Web server, a file name (such as Photo1.jpg ) is passed.
Razor code reads the value of Choice through Request["Choice"] . If the image path (images/Photo1.jpg) constructed through code is valid, assign the image path to the variable imagePath .
In HTML pages, the <img> element is used to display images. When the page is displayed, the src attribute is used to set the value of the imagePath variable.
The <img> element is inside an if block. This is to prevent the image from being displayed without a name, such as when the page is first loaded.