Razor syntax is new asp.net view engine that we can embed our c# or vb.net code in the view page of our website. It seems like php that we can create variables and access them directly in the same view page. If we build just a simple web site and don't need an architecture layering like we build enterprise web application, razor syntax is more efficient and powerfull than we use common asp.net web form engine. In this post, I won't explain about what is razor syntax or etc.. I will show you how to reuse helper component that simplify our code when we build a web application using razor syntax.
Create Basic Helper Component
A helper can help you create a consistent look on your website by letting you use a common block of code across multiple pages. Suppose that in your page you often want to create a note item that's set apart from normal paragraphs, which you create using a <div> element that's styled as a box with a border. Rather than add the same markup to every page, you can package it as a helper, and then insert the note with a single line of code anywhere you need it. This makes the code in each of your pages simpler and easier to read. It also makes it easier to maintain your site, because if you need to change how the notes look, you can change the markup in one place.
To try create a basic helper for our web application, create a new .cshtml file first from App_Code folder and then input your helper code in that file. In this example, I use microsoft Visual Studio 2010 for IDE and ASP.NET Web Site (Razor) for web site template. Why we should put helper file in App_Code folder? Because in a Web site project, you can store source code in the App_Code folder, and it will be automatically compiled at run time. The resulting assembly is accessible to any other code in the Web application. The App_Code folder therefore works much like the Bin folder, except that you can store source code in it instead of compiled code. The App_Code folder and its special status in an ASP.NET Web application makes it possible to create custom classes and other source-code-only files and use them in your Web application without having to compile them independently.
1 @helper CreateNote(string inputParameter) {
2 <div style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">
3 <p>
4 <strong>Note</strong> @inputParameter
5 </p>
6 </div>
7 }
To access helper above, we just call it in our page like we call a method using razor syntax.. This is the code for Page1.cshtml
1 @{
2 Layout = "~/_SiteLayout.cshtml";
3 Page.Title = "Welcome to my Web Site!";
4 }
5 <p>
6 This is basic helper example usage
7 @MyHelper.CreateNote("My test note content.")
8 </p>
And this is the result..
Using Others Helper Package Component
If we install microsoft web matrix, it bundle some usefull helpers that we can install and use it for our web application. Go to administration page from Microsoft Web Matrix panel page and you can see some helpfull helper package there, include ASP.NET Web Helpers Library 1.1 that I will show to you on next blog post.. :)
