Razor syntax is a simple programming syntax for embedding server-based code in a web page.
In a web page that uses the Razor syntax, there are two kinds of content: client content and server code.
Client content is the stuff you're used to in web pages: HTML markup (elements), style information such as CSS, client script such as JavaScript, and plain text.
Razor syntax lets you add server code to this client content. If there's server code in the page, the server runs that code first, before it sends the page to the browser.
By running on the server, the code can perform tasks that can be a lot more complex to do using client content alone, like accessing server-based databases.
Most importantly, server code can dynamically create client content — it can generate HTML markup or other content on the fly and then send it to the browser along with any static HTML that the page might contain.
From the browser's perspective, client content that's generated by your server code is no different than any other client content.
ASP.NET web pages that include the Razor syntax have a special file extension (.cshtml
or .vbhtml
). The server recognizes these extensions, runs the code that's marked with Razor syntax, and then sends the page to the browser.
@{
string message = "Hello World!";
}
<!DOCTYPE html>
<html>
<head>
<title>Sample Razor code</title>
</head>
<body>
<h1>Message is: @message</h1>
</body>
</html>
The @ character starts inline expressions, single statement blocks, and multi-statement blocks.
<!-- Single statement blocks -->
@{ var total = 7; }
<!-- Inline expressions -->
<p>The value of your account is: @total </p>
<!-- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
We can use any C# code we want...
@{
var showToday = false;
if(showToday) {
@DateTime.Today;
}
else {
<text>Sorry!</text>
}
foreach(var p in Posts) {
<h2>p.Title</h1>
<p>p.Content</p>
}
}
IsPost
propertyThe protocol used for web pages (HTTP) supports a very limited number of methods (verbs) that are used to make requests to the server. The two most common ones are GET, which is used to read a page, and POST, which is used to submit a page.
In general, the first time a user requests a page, the page is requested using GET. If the user fills in a form and then clicks a submit button, the browser makes a POST request to the server.
IsPost
propertyIn web programming, it's often useful to know whether a page is being requested as a GET or as a POST so that you know how to process the page. In ASP.NET Web Pages, you can use the IsPost
property to see whether a request is a GET or a POST. If the request is a POST, the IsPost
property will return true, and you can do things like read the values of text boxes on a form.
@if (IsPost) {
// do something
}
else {
// do something else
}
To make it more efficient to create web pages for your site, you can create reusable blocks of content (like headers and footers) for your website, and you can create a consistent layout for all the pages.
@RenderPage()
ASP.NET lets you create a separate file with a content block that can contain text, markup, and code, just like a regular web page.
You can then insert the content block in other pages on the site where you want the information to appear. That way you don't have to copy and paste the same content into every page.
@RenderPage()
example illustration@RenderPage()
example code_Header.cshtml
:html <header> This is my header. </header>
_Footer.cshtml
:html <footer> © 2016 AFDEmp Coding Bootcamp </footer>
Index.cshtml
:
```html
...
This is the content of the main page.
@RenderPage("/Shared/_Footer.cshtml")