With the introduction of .NET framework and ASP.NET in the late 1990s, the legacy HTML embedded single page web application model of ASP is replaced by the Web Forms (and later ASP.NET MVC model). While the new ASP.NET models brought many new possibilities and made it easier to create enterprise web applications, the simplicity of legacy ASP was left behind.

If you are a hobby web developer and create web applications only to provide content in your own websites, writing ASP.NET web forms and code behind files, or model view and controller code for your single web page could be an overkill. In June 2010, To provide a simpler server-side programming tool for web developers, Microsoft released the Razor scripting and Web Matrix tool set as a part of MVC 3, and called the new single page programming model “ASP.NET Web Pages” (Yes, “Web pages”). Today it is the easiest server-side programming model available for you compared to classic ASP and PHP options.

Below I give you a quick summary of ASP.NET Web Pages programming model and Razor syntax.

Razor syntax

To embed code in your HTML page using Razor, you simply add your server-side code inside a @{ } block:

@{

var myVariable = "Hello World";

}

If you want to output a .NET variable inside HTML, it is as simple as using it together with @ operator inside your html code :


<div class="w3-example">

<div class="w3-code notranslate">
<html>
<body>

<h1>Hello World</h1>

My message is <span class="marked">@myVariable</span>
</body>
</html></div>

</div>

It is also possible to output your variables to your document inside a code block like below:

<html>
<body>
@{
if (IsPost)
{
    string url = Request.QueryString["redirurl"];
    string decoded = Server.UrlDecode(url);
    //You can output variables to your document
    Write(decoded);
    //or inside razor specific <text> tag
    <text>@decoded</text>
    //Or using any other html markup inside your code@decoded

//Or like this using @:
    @: @decoded
}
else
{
    RenderPage("~/OtherPage");
}
}
</body>
</html>

You can also embed server side loops and if statements with @ operator:


&amp;lt;ul&amp;gt;
@foreach (var record in queryResult)
{

&amp;lt;li&amp;gt;@record.id&amp;lt;/li&amp;gt;

}&amp;lt;/ul&amp;gt;

&amp;lt;/pre&amp;gt;

&amp;lt;body&amp;gt;
@if (i&amp;gt;30)
{

Too many tries.

}
else
{

Try once again.

}
&amp;lt;/body&amp;gt;

It is possible to use other .NET libraries inside a Razor script block, but Razor also has its own specific function set for easier access to some functions. The IsPost, RenderPage functions in the code blocks I gave above are some examples to this function set. Additionally you can declare your own custom functions to be used in your document by adding a .cs file under the ASP.NET folder “App_Code”.

Layouts

Using Razor, it is possible create a layout page (similar to master pages in ASP.NET) and use it in your other content pages like below :

<html>
<body>
<h1>This is my homepage layout</h1>
@RenderBody()My Footer

</body>
</html>
@{Layout="Layout.cshtml";}

This is my content in other file, displayed inside my chosen layout.

Globals

To initialize your global variables, you place your initialization code inside a special page named “_AppStart.cshtml” which runs when the web application starts. The “Page” object in Razor is a special object that you can add new properties inside and access them globally from your code :

_AppStart.cshtml
@{
Page.MyChoice = "Razor";
Page.WebSiteAddress= "sese.com";
}

Just like AppStart.cshtml, there is a “_PageStart.cshtml” standard file that runs every time a page is executed.

Database access

ASP.NET Web Pages and WebMatrix toolset provides you an easier way to access and read data from a database. You can open and browse data from a database in your HTML page as shown below :

@{
   var DB = Database.Open("sertanyaman");
}
<html>
<body>
@{
   var result = DB.Query("SELECT id, name from people");
}
<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
@foreach(var row in result)
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
</tr>
}</table>
</body>
</html>
@{
    DB.Close();
}

Helpers

Helpers are just server side functions that can output a visual part into your page using given parameters. You can use one of the Razor built-in helpers (visit Razor API quick reference to see a list of them) or create custom helpers for yourself to render repeating blocks of HTML in your page. To declare your custom helper, first you need to create a new cshtml file under the “App_Code” folder of ASP.NET then insert your helper inside the cshtml like below :

@helper DrawBanner(string picture, string link)
{
        <a style="display:block" href="@link">
<div class="blog-box small fullimgcontainer">
                <article role="article">
                    <img class="fullimg" src="@picture">
                </article>></div>
</a>
}
<div class="blog-container clearfix" id="blogcontainer">
<div class="blog-box-sizer"></div>
<ul id="blog-list">
                                @CustomHelpers.DrawBanner("~/Images/pic.jpg", "Yet another banner")</ul>
</div>

For more information on Razor and ASP.NET Wep Pages programming model check the links below :

ASP.NET Web Pages (Razor) API Quick Reference | Microsoft Docs

ASP.NET Web Pages | Microsoft Docs

ASP.NET Razor – Markup | W3 Schools

 

One thought on “Simple server-side scripting with ASP.NET Razor

Leave a Reply