Using Web Pages Helpers in ASP.NET Web Forms
I have already written quite extensively about WebMatrix and ASP.NET Web Pages. The new product has provoked quite a bit of discussion at both ends of the spectrum: some (like me) love it, and others hate it. However, it has spawned the Razor View Engine which has definitely found near universal favour among the ASP.NET MVC crowd. What about using Razor within a Web Forms web site? There seems little point in just replacing your ASPX files with VBHTML files or CSHTML files. You may as well create a Web Pages site instead, but you might want to display Web Pages helpers in your existing ASPX files. ASPX files don't understand Razor syntax. If you tried adding some, it will just render as text. Maybe a User Control is the answer? Nope. That won't work either. But you can use an Iframe or jQuery.
In Visual Studio, create a new ASP.NET Web Site. If you have installed MVC 3 RC with the VS tools, you will see an option to create a Razor site. That's not what you want. You want a straightforward Web Forms site. Now you need to get the Microsoft.Web.Helpers library which is available via the NuGet Library Package Manager. Right click on the project name and choose Add Library Package Reference.
Search for "web helpers" and click install when the microsoft-web-helpers package is found:
Add a Text file (.txt) to the site, but rename it Twitter.cshtml. Once you have done that, add the following code to it:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> @Twitter.Profile("mikesdotnetting") </body> </html>
Change the Default.aspx file that came with the Web Forms site template to include an iframe pointing to your CSHTML file so that it looks like this:
<p> To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>. </p> <iframe src="/Twitter" frameBorder="0" height="400" width="270" scrolling="no"></iframe> <p> You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409" title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>. </p>
Now if you run the site, my Twitter feed will appear within it:
And that's all there is to it. An alternative method is to use jQuery to call the CSHTML file and load the content into a <div>. This doesn't work for the Twitter helper, which relies on some javascript to do its thing, but the FileUpload provides a useful example. Add another file to the Web Forms site called FileUpload.cshtml, and simply add the following line of code to it:
@FileUpload.GetHtml()
Make sure that the jQuery library which resides by default in the Scripts folder is referenced in the MasterPage:
<head runat="server"> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head>
Then add the following to Default.aspx:
<script type="text/javascript"> $(function () { $('#upload').load("/FileUpload"); }); </script> <div id="upload"></div>
Now when you run the page, you can see both the Twitter feed, and a file upload:
Obviously, if you are going to deploy this site, you need a host that supports ASP.NET 4.0. If your hoster meets that requirement, but doesn't support WebMatrix or MVC 3, you will have to add some additional dlls to your bin folder. These are:
- System.Razor.dll
- System.Web.WebPages.dll
- System.Web.WebPages.Razor.dll
- Microsoft.We.Infrastructure.dll
- WebMatrix.Data.dll
- WebMatrix.WebData.dll
Once you have installed WebMatrix, you should find these in Program Files -> Microsoft ASP.NET -> ASP.NET Web Pages -> v1.0 -> Assemblies.
You can download the sample here.
Currently rated 4.67 by 15 people
Rate Now!
Date Posted:
17 November 2010 15:00
Last Updated:
21 November 2010 08:31
Posted by:
Mikesdotnetting
Total Views to date:
35998
Comments
18 November 2010 15:32 from yousaid
GREAT info !!. THANKS man. Noticed you answered my question and I have marked it as "anwered"
cheers,
yousaid
31 January 2011 18:38 from Julio Bermudez
I have the following error C:\Users\jbermudez\Documents\Visual Studio 2010\WebSites\WebSite2\Default.aspx: ASP.NET error at runtime: Start initialization method before the start of the implementation of such Microsoft.Web.Helpers.PreApplicationStartCode threw an exception with the following error message: Could not load file or assembly 'System . Web.WebPages.Razor, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35 'or one of its dependencies. The system can not find the file specified ..
if you could help me to correct thanks!!!!
01 February 2011 12:04 from Mikesdotnetting
@Julio
See if you can find the dll file in the location mentioned at the end of the article, and copy it to your bin folder. If you cannot find the dll, you should download and install WebMatrix.
19 August 2012 14:46 from ben onomah
I see you have given details on the above, but l habe problem connecting to my database. I get "cs0103 the name database is not in the cuurnt context' please help
20 August 2012 08:15 from Mikesdotnetting
@ben onomah
If you are using the Empty Site template in WebMatrix 2 RC, you need to download two packages to be able to work with the Database helper
http://nuget.org/packages/Microsoft.AspNet.WebPages.Data
http://nuget.org/packages/Microsoft.AspNet.WebPages.WebData